Move components around
This commit is contained in:
parent
30e631b85f
commit
fdcaa8933b
9 changed files with 248 additions and 240 deletions
|
|
@ -21,13 +21,10 @@
|
|||
.extra-info {
|
||||
@apply text-xs truncate text-secondary;
|
||||
}
|
||||
.grid-apps {
|
||||
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4
|
||||
}
|
||||
.hover-effect {
|
||||
@apply no-underline md:hover:underline underline-offset-2 decoration-primary text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 transition-all ease-linear duration-150
|
||||
@apply no-underline md:hover:underline underline-offset-2 decoration-primary text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 transition-all ease-linear duration-150;
|
||||
}
|
||||
.heading{
|
||||
@apply text-lg text-secondary select-none truncate underline decoration-primary underline-offset-4
|
||||
.heading {
|
||||
@apply text-lg text-secondary select-none truncate underline decoration-primary underline-offset-4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
package application
|
||||
package components
|
||||
|
||||
import "gitlab.unjx.de/flohoss/godash/services"
|
||||
import "html/template"
|
||||
import (
|
||||
"gitlab.unjx.de/flohoss/godash/services"
|
||||
"html/template"
|
||||
)
|
||||
|
||||
var ImageTemplate = template.Must(template.New("bar").Parse("<div class=\"{{ .Background }}img rounded w-8 h-8 bg-contain bg-center bg-origin-content bg-no-repeat opacity-90\" style=\"background-image: url({{ .Icon }})\"></div>"))
|
||||
|
||||
type Bar struct {
|
||||
type Image struct {
|
||||
Background string
|
||||
Icon string
|
||||
}
|
||||
|
|
@ -26,7 +28,13 @@ func backgroundColor(config string) string {
|
|||
|
||||
templ Application(application services.Application) {
|
||||
<a href={ templ.URL(application.URL) } class="flex items-center hover-effect">
|
||||
@templ.FromGoHTML(ImageTemplate, Bar{Background: backgroundColor(application.Background), Icon: application.Icon})
|
||||
@templ.FromGoHTML(ImageTemplate, Image{Background: backgroundColor(application.Background), Icon: application.Icon})
|
||||
<div class="uppercase truncate ml-2">{ application.Name }</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
templ Link(link services.Link) {
|
||||
<a href={ templ.URL(link.URL) } class="hover-effect">
|
||||
<div class="truncate">{ link.Name }</div>
|
||||
</a>
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
package link
|
||||
|
||||
import (
|
||||
"gitlab.unjx.de/flohoss/godash/services"
|
||||
)
|
||||
|
||||
templ Link(link services.Link) {
|
||||
<a href={ templ.URL(link.URL) } class="hover-effect">
|
||||
<div class="uppercase truncate">{ link.Name }</div>
|
||||
</a>
|
||||
}
|
||||
|
|
@ -1,9 +1,30 @@
|
|||
package uptime
|
||||
package components
|
||||
|
||||
import "gitlab.unjx.de/flohoss/godash/services"
|
||||
import "gitlab.unjx.de/flohoss/godash/components/system"
|
||||
import "fmt"
|
||||
import "html/template"
|
||||
import (
|
||||
"html/template"
|
||||
"gitlab.unjx.de/flohoss/godash/services"
|
||||
"fmt"
|
||||
)
|
||||
|
||||
var BarTemplate = template.Must(template.New("bar").Parse("<div id=\"{{ .Id }}\" class=\"progress-bar\" style=\"width: {{ .Percentage }}%\"></div>"))
|
||||
|
||||
type Bar struct {
|
||||
Id string
|
||||
Percentage float64
|
||||
}
|
||||
|
||||
templ System(icon string, infoPre string, infoPost string, extraInfo string, percentageId string, valueId string, percentage float64) {
|
||||
<div class="flex items-center">
|
||||
<span class={ "system-icon", icon }></span>
|
||||
<div class="w-full truncate">
|
||||
<div class="extra-info">{ extraInfo }</div>
|
||||
<div class="truncate"><span id={ valueId }>{ infoPre }</span>{ infoPost }</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
@templ.FromGoHTML(BarTemplate, Bar{Id:percentageId, Percentage:percentage})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
var countDownTemplate = template.Must(template.New("countdown").Parse("<span id=\"{{ .Id }}\" style=\"--value: {{ .Value }};\"></span>"))
|
||||
|
||||
|
|
@ -32,7 +53,7 @@ templ Uptime(extraInfo string, id string, uptime services.Uptime) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
@templ.FromGoHTML(system.BarTemplate, system.Bar{Id:id, Percentage:float64(uptime.Percentage)})
|
||||
@templ.FromGoHTML(BarTemplate, Bar{Id:id, Percentage:float64(uptime.Percentage)})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
package system
|
||||
|
||||
import "html/template"
|
||||
|
||||
var BarTemplate = template.Must(template.New("bar").Parse("<div id=\"{{ .Id }}\" class=\"progress-bar\" style=\"width: {{ .Percentage }}%\"></div>"))
|
||||
|
||||
type Bar struct {
|
||||
Id string
|
||||
Percentage float64
|
||||
}
|
||||
|
||||
templ System(icon string, infoPre string, infoPost string, extraInfo string, percentageId string, valueId string, percentage float64) {
|
||||
<div class="flex items-center">
|
||||
<span class={ "system-icon", icon }></span>
|
||||
<div class="w-full truncate">
|
||||
<div class="extra-info">{ extraInfo }</div>
|
||||
<div class="truncate"><span id={ valueId }>{ infoPre }</span>{ infoPost }</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
@templ.FromGoHTML(BarTemplate, Bar{Id:percentageId, Percentage:percentage})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
160
components/weather.templ
Normal file
160
components/weather.templ
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
package components
|
||||
|
||||
import (
|
||||
"gitlab.unjx.de/flohoss/godash/services"
|
||||
"fmt"
|
||||
)
|
||||
|
||||
func getIcon(icon string) string {
|
||||
switch icon {
|
||||
case "01d":
|
||||
return "icon-[bi--sun-fill]"
|
||||
case "01n":
|
||||
return "icon-[bi--moon-fill]"
|
||||
case "02d":
|
||||
return "icon-[bi--cloud-sun-fill]"
|
||||
case "02n":
|
||||
return "icon-[bi--cloud-moon-fill]"
|
||||
case "03d", "03n":
|
||||
return "icon-[bi--cloud-fill]"
|
||||
case "04d", "04n":
|
||||
return "icon-[bi--clouds-fill]"
|
||||
case "09d", "09n":
|
||||
return "icon-[bi--cloud-rain-heavy-fill]"
|
||||
case "10d", "10n":
|
||||
return "icon-[bi--cloud-drizzle-fill]"
|
||||
case "11d", "11n":
|
||||
return "icon-[bi--cloud-lightning-rain-fill]"
|
||||
case "13d", "13n":
|
||||
return "icon-[bi--cloud-snow-fill]"
|
||||
case "50d", "50n":
|
||||
return "icon-[bi--cloud-fog2-fill]"
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
templ Weather(weather *services.OpenWeather) {
|
||||
<div class="flex items-center select-none">
|
||||
<span id="watherIcon" class={ "extra-icon h-12 w-12 shrink-0 mr-4 md:w-14 md:h-14", getIcon(weather.Icon) }></span>
|
||||
<div>
|
||||
<div class="text-4xl md:text-4xl"><span id="weatherTemp">{ fmt.Sprintf("%0.2f",weather.Temp) }</span> { weather.Units }</div>
|
||||
<div class="flex items-center gap-5 text-xs">
|
||||
<div class="flex items-center">
|
||||
<span class="extra-icon icon-[bi--chat-quote]"></span>
|
||||
<div id="weatherDescription" class="extra-info">{ weather.Description }</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="extra-icon icon-[bi--droplet]"></span>
|
||||
<div id="weatherHumidity" class="extra-info">{ fmt.Sprintf("%d %%",weather.Humidity) }</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center">
|
||||
<span class="extra-icon icon-[bi--sunrise]"></span>
|
||||
<div id="weatherSunrise" class="extra-info">{ weather.Sunrise }</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center">
|
||||
<span class="extra-icon icon-[bi--sunset]"></span>
|
||||
<div id="weatherSunset" class="extra-info">{ weather.Sunset }</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ WeatherScript() {
|
||||
<script>
|
||||
let systemSSESource = null;
|
||||
let weatherSSESource = null;
|
||||
addEventListener('beforeunload', () => {
|
||||
systemSSESource && systemSSESource.close();
|
||||
weatherSSESource && weatherSSESource.close();
|
||||
});
|
||||
systemSSESource = new EventSource('/sse?stream=system');
|
||||
systemSSESource.onmessage = (e) => {
|
||||
const parsed = JSON.parse(e.data);
|
||||
replaceSystem(parsed);
|
||||
};
|
||||
weatherSSESource = new EventSource('/sse?stream=weather');
|
||||
weatherSSESource.onmessage = (e) => {
|
||||
const parsed = JSON.parse(e.data);
|
||||
replaceWeather(parsed);
|
||||
};
|
||||
|
||||
|
||||
// weather elements
|
||||
const weatherIcon = document.getElementById('weatherIcon');
|
||||
const weatherTemp = document.getElementById('weatherTemp');
|
||||
const weatherDescription = document.getElementById('weatherDescription');
|
||||
const weatherHumidity = document.getElementById('weatherHumidity');
|
||||
const weatherSunrise = document.getElementById('weatherSunrise');
|
||||
const weatherSunset = document.getElementById('weatherSunset');
|
||||
|
||||
// system elements
|
||||
const systemCpuPercentage = document.getElementById('systemCpuPercentage');
|
||||
const systemRamPercentage = document.getElementById('systemRamPercentage');
|
||||
const systemRamValue = document.getElementById('systemRamValue');
|
||||
const systemDiskPercentage = document.getElementById('systemDiskPercentage');
|
||||
const systemDiskValue = document.getElementById('systemDiskValue');
|
||||
const systemUptimePercentage = document.getElementById('systemUptimePercentage');
|
||||
const uptimeDays = document.getElementById('uptimeDays');
|
||||
const uptimeHours = document.getElementById('uptimeHours');
|
||||
const uptimeMinutes = document.getElementById('uptimeMinutes');
|
||||
const uptimeSeconds = document.getElementById('uptimeSeconds');
|
||||
|
||||
function weatherClass(icon){
|
||||
switch (icon) {
|
||||
case "01d":
|
||||
return "icon-[bi--sun-fill]"
|
||||
case "01n":
|
||||
return "icon-[bi--moon-fill]"
|
||||
case "02d":
|
||||
return "icon-[bi--cloud-sun-fill]"
|
||||
case "02n":
|
||||
return "icon-[bi--cloud-moon-fill]"
|
||||
case "03d", "03n":
|
||||
return "icon-[bi--cloud-fill]"
|
||||
case "04d", "04n":
|
||||
return "icon-[bi--clouds-fill]"
|
||||
case "09d", "09n":
|
||||
return "icon-[bi--cloud-rain-heavy-fill]"
|
||||
case "10d", "10n":
|
||||
return "icon-[bi--cloud-drizzle-fill]"
|
||||
case "11d", "11n":
|
||||
return "icon-[bi--cloud-lightning-rain-fill]"
|
||||
case "13d", "13n":
|
||||
return "icon-[bi--cloud-snow-fill]"
|
||||
case "50d", "50n":
|
||||
return "icon-[bi--cloud-fog2-fill]"
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
function replaceWeather(parsed) {
|
||||
weatherIcon.className.split(' ').forEach(function(className) {
|
||||
if (className.startsWith('icon-')) {
|
||||
weatherIcon.classList.remove(className);
|
||||
}
|
||||
});
|
||||
weatherIcon.classList.add(weatherClass(parsed.icon));
|
||||
weatherTemp.innerText = parsed.temp;
|
||||
weatherDescription.innerText = parsed.description;
|
||||
weatherHumidity.innerText = parsed.humidity + '%';
|
||||
weatherSunrise.innerText = parsed.sunrise;
|
||||
weatherSunset.innerText = parsed.sunset;
|
||||
}
|
||||
|
||||
function replaceSystem(parsed) {
|
||||
systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
|
||||
systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
|
||||
systemRamValue.innerText = parsed.ram.value;
|
||||
systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
|
||||
systemDiskValue.innerText = parsed.disk.value;
|
||||
systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
|
||||
uptimeDays.style = '--value:' + parsed.uptime.days;
|
||||
uptimeHours.style = '--value:' + parsed.uptime.hours;
|
||||
uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
|
||||
uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -43,33 +43,6 @@ func NewBookmarkService() *BookmarkService {
|
|||
return &bs
|
||||
}
|
||||
|
||||
type BookmarkService struct {
|
||||
bookmarks Bookmarks
|
||||
}
|
||||
|
||||
type Bookmarks struct {
|
||||
Links []struct {
|
||||
Category string
|
||||
Entries []Link
|
||||
}
|
||||
Applications []struct {
|
||||
Category string
|
||||
Entries []Application
|
||||
}
|
||||
}
|
||||
|
||||
type Link struct {
|
||||
Name string
|
||||
URL string
|
||||
}
|
||||
|
||||
type Application struct {
|
||||
Name string
|
||||
Icon string
|
||||
Background string
|
||||
URL string
|
||||
}
|
||||
|
||||
func (bs *BookmarkService) GetAllBookmarks() *Bookmarks {
|
||||
return &bs.bookmarks
|
||||
}
|
||||
|
|
|
|||
28
services/bookmark.types.go
Normal file
28
services/bookmark.types.go
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
package services
|
||||
|
||||
type BookmarkService struct {
|
||||
bookmarks Bookmarks
|
||||
}
|
||||
|
||||
type Bookmarks struct {
|
||||
Links []struct {
|
||||
Category string
|
||||
Entries []Link
|
||||
}
|
||||
Applications []struct {
|
||||
Category string
|
||||
Entries []Application
|
||||
}
|
||||
}
|
||||
|
||||
type Link struct {
|
||||
Name string
|
||||
URL string
|
||||
}
|
||||
|
||||
type Application struct {
|
||||
Name string
|
||||
Icon string
|
||||
Background string
|
||||
URL string
|
||||
}
|
||||
|
|
@ -1,73 +1,20 @@
|
|||
package home
|
||||
|
||||
import "gitlab.unjx.de/flohoss/godash/services"
|
||||
import "gitlab.unjx.de/flohoss/godash/views/layout"
|
||||
import "gitlab.unjx.de/flohoss/godash/components/system"
|
||||
import "gitlab.unjx.de/flohoss/godash/components/uptime"
|
||||
import "gitlab.unjx.de/flohoss/godash/components/application"
|
||||
import "gitlab.unjx.de/flohoss/godash/components/link"
|
||||
import "fmt"
|
||||
|
||||
func getIcon(icon string) string {
|
||||
switch icon {
|
||||
case "01d":
|
||||
return "icon-[bi--sun-fill]"
|
||||
case "01n":
|
||||
return "icon-[bi--moon-fill]"
|
||||
case "02d":
|
||||
return "icon-[bi--cloud-sun-fill]"
|
||||
case "02n":
|
||||
return "icon-[bi--cloud-moon-fill]"
|
||||
case "03d", "03n":
|
||||
return "icon-[bi--cloud-fill]"
|
||||
case "04d", "04n":
|
||||
return "icon-[bi--clouds-fill]"
|
||||
case "09d", "09n":
|
||||
return "icon-[bi--cloud-rain-heavy-fill]"
|
||||
case "10d", "10n":
|
||||
return "icon-[bi--cloud-drizzle-fill]"
|
||||
case "11d", "11n":
|
||||
return "icon-[bi--cloud-lightning-rain-fill]"
|
||||
case "13d", "13n":
|
||||
return "icon-[bi--cloud-snow-fill]"
|
||||
case "50d", "50n":
|
||||
return "icon-[bi--cloud-fog2-fill]"
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
import (
|
||||
"gitlab.unjx.de/flohoss/godash/services"
|
||||
"gitlab.unjx.de/flohoss/godash/views/layout"
|
||||
"fmt"
|
||||
"gitlab.unjx.de/flohoss/godash/components"
|
||||
)
|
||||
|
||||
templ Home(title string, bookmarks *services.Bookmarks, static *services.StaticInformation, live *services.LiveInformation, weather *services.OpenWeather) {
|
||||
<section class="grid gap-10">
|
||||
<div class="flex items-center select-none">
|
||||
<span id="watherIcon" class={ "extra-icon h-12 w-12 shrink-0 mr-4 md:w-14 md:h-14", getIcon(weather.Icon) }></span>
|
||||
<div>
|
||||
<div class="text-4xl md:text-4xl"><span id="weatherTemp">{ fmt.Sprintf("%0.2f",weather.Temp) }</span> { weather.Units }</div>
|
||||
<div class="flex items-center gap-5 text-xs">
|
||||
<div class="flex items-center">
|
||||
<span class="extra-icon icon-[bi--chat-quote]"></span>
|
||||
<div id="weatherDescription" class="extra-info">{ weather.Description }</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="extra-icon icon-[bi--droplet]"></span>
|
||||
<div id="weatherHumidity" class="extra-info">{ fmt.Sprintf("%d %%",weather.Humidity) }</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center">
|
||||
<span class="extra-icon icon-[bi--sunrise]"></span>
|
||||
<div id="weatherSunrise" class="extra-info">{ weather.Sunrise }</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center">
|
||||
<span class="extra-icon icon-[bi--sunset]"></span>
|
||||
<div id="weatherSunset" class="extra-info">{ weather.Sunset }</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@components.Weather(weather)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 select-none">
|
||||
@system.System("icon-[bi--cpu]",static.CPU.Name,"",static.CPU.Threads,"systemCpuPercentage","",live.CPU)
|
||||
@system.System("icon-[bi--nvme]",live.Disk.Value,fmt.Sprintf(" | %s", static.Disk.Total),static.Disk.Partitions,"systemDiskPercentage","systemDiskValue",live.Disk.Percentage)
|
||||
@system.System("icon-[bi--memory]",live.Ram.Value,fmt.Sprintf(" | %s", static.Ram.Total),static.Ram.Swap,"systemRamPercentage","systemRamValue",live.Ram.Percentage)
|
||||
@uptime.Uptime(static.Host.Architecture,"systemUptimePercentage",live.Uptime)
|
||||
@components.System("icon-[bi--cpu]",static.CPU.Name,"",static.CPU.Threads,"systemCpuPercentage","",live.CPU)
|
||||
@components.System("icon-[bi--nvme]",live.Disk.Value,fmt.Sprintf(" | %s", static.Disk.Total),static.Disk.Partitions,"systemDiskPercentage","systemDiskValue",live.Disk.Percentage)
|
||||
@components.System("icon-[bi--memory]",live.Ram.Value,fmt.Sprintf(" | %s", static.Ram.Total),static.Ram.Swap,"systemRamPercentage","systemRamValue",live.Ram.Percentage)
|
||||
@components.Uptime(static.Host.Architecture,"systemUptimePercentage",live.Uptime)
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
for _, a := range bookmarks.Applications {
|
||||
|
|
@ -77,120 +24,28 @@ templ Home(title string, bookmarks *services.Bookmarks, static *services.StaticI
|
|||
}
|
||||
<div class="grid-apps">
|
||||
for _, entry := range a.Entries {
|
||||
@application.Application(entry)
|
||||
@components.Application(entry)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="grid-apps">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
||||
for _, l := range bookmarks.Links {
|
||||
<div class="flex flex-col gap-2">
|
||||
if l.Category != "" {
|
||||
<div class="heading">{ l.Category }</div>
|
||||
} else {
|
||||
<div class="my-[0.9rem]"></div>
|
||||
}
|
||||
for _, entry := range l.Entries {
|
||||
@link.Link(entry)
|
||||
@components.Link(entry)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@components.WeatherScript()
|
||||
</section>
|
||||
<script>
|
||||
let systemSSESource = null;
|
||||
let weatherSSESource = null;
|
||||
addEventListener('beforeunload', () => {
|
||||
systemSSESource && systemSSESource.close();
|
||||
weatherSSESource && weatherSSESource.close();
|
||||
});
|
||||
systemSSESource = new EventSource('/sse?stream=system');
|
||||
systemSSESource.onmessage = (e) => {
|
||||
const parsed = JSON.parse(e.data);
|
||||
replaceSystem(parsed);
|
||||
};
|
||||
weatherSSESource = new EventSource('/sse?stream=weather');
|
||||
weatherSSESource.onmessage = (e) => {
|
||||
const parsed = JSON.parse(e.data);
|
||||
replaceWeather(parsed);
|
||||
};
|
||||
|
||||
|
||||
// weather elements
|
||||
const weatherIcon = document.getElementById('weatherIcon');
|
||||
const weatherTemp = document.getElementById('weatherTemp');
|
||||
const weatherDescription = document.getElementById('weatherDescription');
|
||||
const weatherHumidity = document.getElementById('weatherHumidity');
|
||||
const weatherSunrise = document.getElementById('weatherSunrise');
|
||||
const weatherSunset = document.getElementById('weatherSunset');
|
||||
|
||||
// system elements
|
||||
const systemCpuPercentage = document.getElementById('systemCpuPercentage');
|
||||
const systemRamPercentage = document.getElementById('systemRamPercentage');
|
||||
const systemRamValue = document.getElementById('systemRamValue');
|
||||
const systemDiskPercentage = document.getElementById('systemDiskPercentage');
|
||||
const systemDiskValue = document.getElementById('systemDiskValue');
|
||||
const systemUptimePercentage = document.getElementById('systemUptimePercentage');
|
||||
const uptimeDays = document.getElementById('uptimeDays');
|
||||
const uptimeHours = document.getElementById('uptimeHours');
|
||||
const uptimeMinutes = document.getElementById('uptimeMinutes');
|
||||
const uptimeSeconds = document.getElementById('uptimeSeconds');
|
||||
|
||||
function weatherClass(icon){
|
||||
switch (icon) {
|
||||
case "01d":
|
||||
return "icon-[bi--sun-fill]"
|
||||
case "01n":
|
||||
return "icon-[bi--moon-fill]"
|
||||
case "02d":
|
||||
return "icon-[bi--cloud-sun-fill]"
|
||||
case "02n":
|
||||
return "icon-[bi--cloud-moon-fill]"
|
||||
case "03d", "03n":
|
||||
return "icon-[bi--cloud-fill]"
|
||||
case "04d", "04n":
|
||||
return "icon-[bi--clouds-fill]"
|
||||
case "09d", "09n":
|
||||
return "icon-[bi--cloud-rain-heavy-fill]"
|
||||
case "10d", "10n":
|
||||
return "icon-[bi--cloud-drizzle-fill]"
|
||||
case "11d", "11n":
|
||||
return "icon-[bi--cloud-lightning-rain-fill]"
|
||||
case "13d", "13n":
|
||||
return "icon-[bi--cloud-snow-fill]"
|
||||
case "50d", "50n":
|
||||
return "icon-[bi--cloud-fog2-fill]"
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
function replaceWeather(parsed) {
|
||||
weatherIcon.className.split(' ').forEach(function(className) {
|
||||
if (className.startsWith('icon-')) {
|
||||
weatherIcon.classList.remove(className);
|
||||
}
|
||||
});
|
||||
weatherIcon.classList.add(weatherClass(parsed.icon));
|
||||
weatherTemp.innerText = parsed.temp;
|
||||
weatherDescription.innerText = parsed.description;
|
||||
weatherHumidity.innerText = parsed.humidity + '%';
|
||||
weatherSunrise.innerText = parsed.sunrise;
|
||||
weatherSunset.innerText = parsed.sunset;
|
||||
}
|
||||
|
||||
function replaceSystem(parsed) {
|
||||
systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
|
||||
systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
|
||||
systemRamValue.innerText = parsed.ram.value;
|
||||
systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
|
||||
systemDiskValue.innerText = parsed.disk.value;
|
||||
systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
|
||||
uptimeDays.style = '--value:' + parsed.uptime.days;
|
||||
uptimeHours.style = '--value:' + parsed.uptime.hours;
|
||||
uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
|
||||
uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
templ HomeIndex(
|
||||
|
|
|
|||
Loading…
Reference in a new issue