Elara6331/simpledash
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clean code, and use progress bars instead of Loading...

Browse Source
This commit is contained in:
Elara 2021-03-27 19:59:15 -07:00
parent 7206f99b84
commit a6f56ceaa3
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/public/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
resources/templates/cards/api.html
View File

@ -9,13 +9,13 @@
</a> </a>
</div> </div>
<div class="card-content"> <div class="card-content">
<p id="APILoadingText_{{$randID}}">Loading...</p> <progress class="progress is-light" id="APILoading_{{$randID}}"></progress>
{{range $index, $fmtStr := $format}} {{range $index, $fmtStr := $format}}
<div id="{{printf `APIElement%d_%s` $index $randID}}"></div> <div id="{{printf `APIElement%d_%s` $index $randID}}"></div>
{{end}} {{end}}
</div> </div>
{{if .Data.footer}} {{if .Data.footer}}
<div class="card-footer" style="margin-top: auto"> <div class="card-footer">
<p class="card-footer-item">{{.Data.footer}}</p> <p class="card-footer-item">{{.Data.footer}}</p>
</div> </div>
{{end}} {{end}}
@ -24,7 +24,7 @@
request.open('GET', "{{proxy .URL}}", true) request.open('GET', "{{proxy .URL}}", true)
request.onload = function () { request.onload = function () {
const data = JSON.parse(this.response) const data = JSON.parse(this.response)
document.getElementById("APILoadingText_{{$randID}}").classList.add("is-hidden") document.getElementById("APILoading_{{$randID}}").classList.add("is-hidden")
{{range $index, $fmtStr := $format}} {{range $index, $fmtStr := $format}}
document.getElementById("{{printf `APIElement%d_%s` $index $randID}}").innerHTML = `{{unescJS (trim $fmtStr)}}` document.getElementById("{{printf `APIElement%d_%s` $index $randID}}").innerHTML = `{{unescJS (trim $fmtStr)}}`
{{end}} {{end}}

6
resources/templates/cards/weather.html
View File

@ -3,7 +3,7 @@
<p class="card-header-title">{{.Title}}</p> <p class="card-header-title">{{.Title}}</p>
</div> </div>
<div class="card-content"> <div class="card-content">
<p id="weatherLoadingText_{{$randID}}">Loading...</p> <progress class="progress is-light" id="weatherLoading_{{$randID}}"></progress>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-half"> <div class="column is-half">
<object type="image/svg+xml" id="weatherStateImg_{{$randID}}" style="width:45px; height: 45px"></object> <object type="image/svg+xml" id="weatherStateImg_{{$randID}}" style="width:45px; height: 45px"></object>
@ -20,7 +20,7 @@
<p id="weatherVisibilityText_{{$randID}}"></p> <p id="weatherVisibilityText_{{$randID}}"></p>
<p id="weatherPredictabilityText_{{$randID}}"></p> <p id="weatherPredictabilityText_{{$randID}}"></p>
</div> </div>
<div class="card-footer" style="margin-top: auto"> <div class="card-footer">
<span class="card-footer-item">Data from&nbsp;<a href="https://www.metaweather.com" class="has-text-info">Metaweather</a></span> <span class="card-footer-item">Data from&nbsp;<a href="https://www.metaweather.com" class="has-text-info">Metaweather</a></span>
</div> </div>
<script> <script>
@ -29,7 +29,7 @@
const round = function (flt){return Number.parseFloat(flt).toPrecision(3)} const round = function (flt){return Number.parseFloat(flt).toPrecision(3)}
request.onload = function () { request.onload = function () {
const data = JSON.parse(this.response) const data = JSON.parse(this.response)
document.getElementById('weatherLoadingText_{{$randID}}').classList.add("is-hidden") document.getElementById('weatherLoading_{{$randID}}').classList.add("is-hidden")
document.getElementById('weatherStateText_{{$randID}}').innerText = data["consolidated_weather"][0]["weather_state_name"] document.getElementById('weatherStateText_{{$randID}}').innerText = data["consolidated_weather"][0]["weather_state_name"]
document.getElementById('weatherTempText_{{$randID}}').innerHTML = round(data["consolidated_weather"][0]["the_temp"]*1.8+32) + " &deg;F" document.getElementById('weatherTempText_{{$randID}}').innerHTML = round(data["consolidated_weather"][0]["the_temp"]*1.8+32) + " &deg;F"
document.getElementById('weatherStateImg_{{$randID}}').data = "/proxy/" + btoa("https://www.metaweather.com/static/img/weather/" + data["consolidated_weather"][0]["weather_state_abbr"] + ".svg") document.getElementById('weatherStateImg_{{$randID}}').data = "/proxy/" + btoa("https://www.metaweather.com/static/img/weather/" + data["consolidated_weather"][0]["weather_state_abbr"] + ".svg")

4
resources/templates/home.html
View File

@ -18,7 +18,7 @@
{{if .User.ShowPublic}} {{if .User.ShowPublic}}
{{ range $_, $card := .Config.Users._public_.Cards }} {{ range $_, $card := .Config.Users._public_.Cards }}
<div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile"> <div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile">
<div class="card is-flex is-flex-direction-column" style="min-height: 175px; max-height: 175px; overflow: auto"> <div class="card is-fullheight is-scrollable" style="min-height: 175px; max-height: 175px;">
{{dyn_template $card.Type $card}} {{dyn_template $card.Type $card}}
</div> </div>
</div> </div>
@ -26,7 +26,7 @@
{{end}} {{end}}
{{ range $_, $card := .User.Cards }} {{ range $_, $card := .User.Cards }}
<div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile"> <div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile">
<div class="card is-flex is-flex-direction-column" style="min-height: 175px; max-height: 175px; overflow: auto"> <div class="card is-fullheight is-scrollable" style="min-height: 175px; max-height: 175px; overflow: auto">
{{dyn_template $card.Type $card}} {{dyn_template $card.Type $card}}
</div> </div>
</div> </div>