Skip to content

Commit 9f955ff

Browse files
theyoshtheyosh
committed
Update NodeJS libraries
1 parent 53ce5f3 commit 9f955ff

File tree

3 files changed

+259
-850
lines changed

3 files changed

+259
-850
lines changed

‎gui/pages/Dashboard.svelte

+87-96
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
<style lang="sass">
2-
.right
3-
right: 0.5rem
4-
5-
.top
6-
top: 0.5rem
7-
8-
.text-truncate
9-
max-width: 95%
10-
11-
.animate
12-
transition: 1s linear
13-
transform: rotate(180deg)
1+
<style lang="css">
2+
.right {
3+
right: 0.5rem;
4+
}
5+
6+
.top {
7+
top: 0.5rem;
8+
}
9+
10+
.text-truncate {
11+
max-width: 95%;
12+
}
13+
14+
:global(.animate) {
15+
transition: 1s linear;
16+
transform: rotate(180deg);
17+
}
1418
</style>
1519

1620
<script>
@@ -169,26 +173,17 @@
169173
170174
// TODO: Make a PR for info box icon color
171175
document.querySelectorAll('div.info-box span.info-box-icon').forEach((item, counter) => {
172-
item.classList.remove('bg-transparent');
173-
item.classList.add('elevation-1');
174-
item.classList.add('float');
175176
switch (counter) {
176177
case 0:
177178
item.classList.add('bg-secondary');
178179
break;
179180
180181
case 1:
181-
item.classList.add('bg-danger');
182-
break;
183-
184-
case 2:
185-
item.classList.add('bg-info');
186-
break;
187-
188182
case 3:
189183
item.classList.add('bg-danger');
190184
break;
191185
186+
case 2:
192187
case 4:
193188
item.classList.add('bg-info');
194189
break;
@@ -226,98 +221,94 @@
226221
<div class="container-fluid">
227222
<div class="row">
228223
<div class="col-12 col-xl-4">
229-
<InfoBox>
230-
<svelte:fragment slot="image">
231-
<i class="fas fa-hourglass-end hourglass-animation animate"></i>
232-
</svelte:fragment>
233-
{$_('dashboard.infobox.uptime.title', { default: 'Up time' })}
234-
235-
<div class="position-absolute right top">
236-
<div class="progress vertical progress-sm" title="{$systemLoad[0]}%" style="height: 55px">
237-
<div
238-
class="progress-bar bg-success progress-bar-striped"
239-
role="progressbar"
240-
aria-valuenow="0"
241-
aria-valuemin="0"
242-
aria-valuemax="100"
243-
style="height: {$systemLoad[0]}%"
244-
>
245-
<span class="sr-only">{$systemLoad[0]}%</span>
224+
<InfoBox
225+
shadow="small"
226+
icon="fas fa-hourglass-end hourglass-animation animate"
227+
text="{$_('dashboard.infobox.uptime.title', { default: 'Up time' })}"
228+
>
229+
<svelte:fragment slot="number">
230+
<div class="position-absolute right top">
231+
<div class="progress vertical progress-sm" title="{$systemLoad[0]}%" style="height: 55px">
232+
<div
233+
class="progress-bar bg-success progress-bar-striped"
234+
role="progressbar"
235+
aria-valuenow="0"
236+
aria-valuemin="0"
237+
aria-valuemax="100"
238+
style="height: {$systemLoad[0]}%"
239+
>
240+
<span class="sr-only">{$systemLoad[0]}%</span>
241+
</div>
246242
</div>
247-
</div>
248-
<div class="progress vertical progress-sm" title="{$systemLoad[1]}%" style="height: 55px">
249-
<div
250-
class="progress-bar bg-warning progress-bar-striped"
251-
role="progressbar"
252-
aria-valuenow="0"
253-
aria-valuemin="0"
254-
aria-valuemax="100"
255-
style="height: {$systemLoad[1]}%"
256-
>
257-
<span class="sr-only">{$systemLoad[1]}%</span>
243+
<div class="progress vertical progress-sm" title="{$systemLoad[1]}%" style="height: 55px">
244+
<div
245+
class="progress-bar bg-warning progress-bar-striped"
246+
role="progressbar"
247+
aria-valuenow="0"
248+
aria-valuemin="0"
249+
aria-valuemax="100"
250+
style="height: {$systemLoad[1]}%"
251+
>
252+
<span class="sr-only">{$systemLoad[1]}%</span>
253+
</div>
258254
</div>
259-
</div>
260-
<div class="progress vertical progress-sm" title="{$systemLoad[2]}%" style="height: 55px">
261-
<div
262-
class="progress-bar bg-danger progress-bar-striped"
263-
role="progressbar"
264-
aria-valuenow="0"
265-
aria-valuemin="0"
266-
aria-valuemax="100"
267-
style="height: {$systemLoad[2]}%"
268-
>
269-
<span class="sr-only">{$systemLoad[2]}%</span>
255+
<div class="progress vertical progress-sm" title="{$systemLoad[2]}%" style="height: 55px">
256+
<div
257+
class="progress-bar bg-danger progress-bar-striped"
258+
role="progressbar"
259+
aria-valuenow="0"
260+
aria-valuemin="0"
261+
aria-valuemax="100"
262+
style="height: {$systemLoad[2]}%"
263+
>
264+
<span class="sr-only">{$systemLoad[2]}%</span>
265+
</div>
270266
</div>
271267
</div>
272-
</div>
273-
274-
<svelte:fragment slot="number">
275268
{uptime_format($uptime)}
276269
</svelte:fragment>
277270
</InfoBox>
278271
</div>
279272

280273
<div class="col-12 col-sm-6 col-md-3 col-xl-2">
281-
<InfoBox>
282-
<svelte:fragment slot="image">
283-
<i class="fas fa-bolt"></i>
284-
</svelte:fragment>
285-
<span>{$_('dashboard.infobox.current_power_usage.title', { default: 'Power usage in Watt' })}</span>
274+
<InfoBox
275+
shadow="small"
276+
icon="fas fa-bolt"
277+
text="{$_('dashboard.infobox.current_power_usage.title', { default: 'Power usage in Watt' })}"
278+
progressBar="{true}"
279+
progressBarWidth="{($currentPower / $maxPower) * 100}%"
280+
progressBarAccent="danger"
281+
>
286282
<svelte:fragment slot="number">
287283
<span>{$number($currentPower)} / {$number($maxPower)}</span>
288-
<div class="progress" title="{($currentPower / $maxPower) * 100}%">
289-
<div class="progress-xxs bg-danger" style="width: {($currentPower / $maxPower) * 100}%"></div>
290-
</div>
291284
</svelte:fragment>
292285
</InfoBox>
293286
</div>
294287

295288
<div class="col-12 col-sm-6 col-md-3 col-xl-2">
296-
<InfoBox>
297-
<svelte:fragment slot="image">
298-
<i class="fas fa-tint"></i>
299-
</svelte:fragment>
300-
<span
301-
>{$_('dashboard.infobox.current_water_flow.title', {
302-
default: 'Water flow in {water_flow_indicator}',
303-
values: { water_flow_indicator: settings.units.water_flow.value },
304-
})}</span
305-
>
289+
<InfoBox
290+
shadow="small"
291+
icon="fas fa-tint"
292+
text="{$_('dashboard.infobox.current_water_flow.title', {
293+
default: 'Water flow in {water_flow_indicator}',
294+
values: { water_flow_indicator: settings.units.water_flow.value },
295+
})}"
296+
progressBar="{true}"
297+
progressBarWidth="{($currentWater / $maxWater) * 100}%"
298+
progressBarAccent="info"
299+
>
306300
<svelte:fragment slot="number">
307301
<span>{$number($currentWater)} / {$number($maxWater)}</span>
308-
<div class="progress" title="{($currentWater / $maxWater) * 100}%">
309-
<div class="progress-xxs bg-info" style="width: {($currentWater / $maxWater) * 100}%"></div>
310-
</div>
311302
</svelte:fragment>
312303
</InfoBox>
313304
</div>
314305

315306
<div class="col-12 col-sm-6 col-md-3 col-xl-2">
316-
<InfoBox>
317-
<svelte:fragment slot="image">
318-
<i class="fas fa-bolt"></i>
319-
</svelte:fragment>
320-
<span>{$_('dashboard.infobox.total_power_usage.title', { default: 'Total power usage' })}</span>
307+
<InfoBox
308+
shadow="small"
309+
icon="fas fa-bolt"
310+
text="{$_('dashboard.infobox.total_power_usage.title', { default: 'Total power usage' })}"
311+
>
321312
<svelte:fragment slot="number">
322313
<span>{$number($totalPower)} {settings.units.powerusage.value}</span>
323314
<div class="text-nowrap text-truncate">
@@ -333,11 +324,11 @@
333324
</div>
334325

335326
<div class="col-12 col-sm-6 col-md-3 col-xl-2">
336-
<InfoBox>
337-
<svelte:fragment slot="image">
338-
<i class="fas fa-tint"></i>
339-
</svelte:fragment>
340-
<span>{$_('dashboard.infobox.total_water_usage.title', { default: 'Total water usage' })}</span>
327+
<InfoBox
328+
shadow="small"
329+
icon="fas fa-tint"
330+
text="{$_('dashboard.infobox.total_water_usage.title', { default: 'Total water usage' })}"
331+
>
341332
<svelte:fragment slot="number">
342333
<span>{$number($totalWater)} {settings.units.water_volume.value}</span>
343334
<div class="text-nowrap text-truncate">

0 commit comments

Comments
 (0)