Max/Main
1
0
Fork 0
forked from Simnation/Main
Code Pull requests Activity

ed

Browse source
This commit is contained in:
Nordi98 2025-08-11 16:51:34 +02:00
parent 600d79af31
commit 5d11084641
136 changed files with 12007 additions and 584 deletions
Download patch file Download diff file Expand all files Collapse all files

195
resources/[freizeit]/[gym]/ps-ui/web/src/components/StatusBarComponent.svelte Normal file
View file

@ -0,0 +1,195 @@
<script lang="ts">
import { hideStatusBar, hideStatusBarStore, statusBarStore } from "../stores/StatusBarStores";
import { onMount } from "svelte";
import Icon from "./Icon.svelte";
import type { IStatusBarItem } from "src/interfaces/IStatusBar";
import { isDevMode, showComponent, showUi } from "../stores/GeneralStores";
let statusData:any = $statusBarStore;
let statusDataItems:[IStatusBarItem] = statusData.items;
statusBarStore.subscribe((value) => {
statusData = value;
statusDataItems = statusData.items;
});
let hideStatusBarValue = false;
hideStatusBarStore.subscribe(value => {
hideStatusBarValue = value;
});
onMount(() => {
if(isDevMode) {
setTimeout(() => {
hideStatusBar();
}, 10000);
}
});
function closeStatusBar() {
const statusWrapperDom = document.getElementById('status-bar-wrapper');
if(statusWrapperDom) {
statusWrapperDom.style.animation = '2s hide-statusbar';
let keyFrames = document.createElement('style');
keyFrames.innerHTML = `
@keyframes hide-statusbar {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.status-bar-wrapper {
-moz-animation: 2s hide-statusbar;
-webkit-animation: 2s hide-statusbar;
animation: 2s hide-statusbar;
}
`;
statusWrapperDom.appendChild(keyFrames);
setTimeout(() => {
showUi.set(false);
showComponent.set(null);
statusBarStore.set({
title: '',
description: '',
items: [],
icon: '',
});
hideStatusBarStore.set(false);
}, 500);
}
}
$: {
if(hideStatusBarValue) {
// if(hideStatusBarValue || !hideStatusBarValue)
closeStatusBar();
}
}
</script>
<div id="status-bar-wrapper" class="status-bar-wrapper">
<div class="status-title-wrapper">
<div class="icon">
<Icon icon={statusData.icon} color="ps-text-green" />
</div>
<div class="title-info">
<p class="title">
{statusData.title}
</p>
<p class="title-description">
{statusData.description}
</p>
</div>
</div>
<div class="items-wrapper">
{#each statusDataItems as item}
<div class="each-item">
<p class="label">
{item.key}:
</p>
<p class="value">
{item.value}
</p>
</div>
{/each}
</div>
</div>
<style>
.status-bar-wrapper {
-moz-animation: 2s display-status;
-webkit-animation: 2s display-status;
animation: 2s display-status;
position: absolute;
left: 50%;
bottom: 1%;
transform: translateX(-50%);
width: 23vw;
min-height: 8vw;
height: fit-content;
overflow: hidden;
background-color: var(--color-darkblue);
border-radius: 0.3vw;
padding: 1vw 2vw;
display: flex;
flex-direction: column;
}
@keyframes display-status {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.status-bar-wrapper > .status-title-wrapper {
display: flex;
flex-direction: row;
}
.status-bar-wrapper > .status-title-wrapper > .icon {
width: 1.5vw;
margin-right: 0.5vw;
font-size: 1.25vw;
}
.status-bar-wrapper > .status-title-wrapper > .title-info {
display: flex;
flex-direction: column;
text-transform: capitalize;
}
.status-bar-wrapper > .status-title-wrapper > .title-info > .title {
font-size: 1.3vw;
font-weight: 500;
color: var(--color-white);
}
.status-bar-wrapper > .status-title-wrapper > .title-info > .title-description {
font-size: 0.95vw;
font-weight: 200;
color: var(--color-lightgrey);
margin-top: -0.2vw;
}
.status-bar-wrapper > .items-wrapper {
margin-left: 2vw;
margin-top: 0.5vw;
}
.status-bar-wrapper > .items-wrapper > .each-item {
display: flex;
flex-direction: row;
word-wrap: break-word;
flex-wrap: wrap;
font-size: 0.95vw;
}
.status-bar-wrapper > .items-wrapper > .each-item:not(:last-child) {
margin-bottom: 0.3vw;
}
.status-bar-wrapper > .items-wrapper > .each-item > .label {
color: var(--color-lightgrey);
}
.status-bar-wrapper > .items-wrapper > .each-item > .value {
color: var(--color-green);
margin-left: 0.3vw;
}
</style>