homelab/traefik
1
0
Fork 0
Code Activity

Add more pages in the WebUI

Browse source
This commit is contained in:
Jorge Gonzalez 2019-09-10 14:40:05 +02:00 • committed by Traefiker Bot
parent 2b828765e3
commit fcc1109e76
82 changed files with 5005 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

9
webui/src/components/dashboard/PanelChart.vue
View file

@ -5,6 +5,9 @@
<div class="col">
<div class="text-h6 text-weight-bold">{{getName}}</div>
</div>
<div class="col-auto">
<q-btn :to="getUrl" color="accent" dense flat icon-right="eva-arrow-forward-outline" no-caps label="Explore" size="md" class="text-weight-bold"/>
</div>
</div>
</q-card-section>
<q-card-section>
@ -104,7 +107,7 @@ export default {
} else {
result = num
}
return isNaN(result) ? 0 : result
return isNaN(result) || result < 0 ? 0 : result
},
getWarnings (inPercent = false) {
const num = this.data.warnings
@ -114,7 +117,7 @@ export default {
} else {
result = num
}
return isNaN(result) ? 0 : result
return isNaN(result) || result < 0 ? 0 : result
},
getErrors (inPercent = false) {
const num = this.data.errors
@ -124,7 +127,7 @@ export default {
} else {
result = num
}
return isNaN(result) ? 0 : result
return isNaN(result) || result < 0 ? 0 : result
},
getData () {
return [this.getSuccess(), this.getWarnings(), this.getErrors()]

39
webui/src/components/dashboard/PanelEntry.vue
View file

@ -1,9 +1,9 @@
<template>
<q-card flat bordered>
<q-card flat bordered v-bind:class="['panel-entry', {'panel-entry-detail':type === 'detail'}, {'panel-entry-focus':focus}, {'panel-entry-ex-size':exSize}]">
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-subtitle2 text-uppercase text-center text-app-grey" style="letter-spacing: 3px;">{{name}}</div>
<div class="text-subtitle2">{{name}}</div>
</div>
</div>
</q-card-section>
@ -16,10 +16,41 @@
<script>
export default {
name: 'PanelEntry',
props: ['address', 'name']
props: ['address', 'name', 'type', 'focus', 'exSize']
}
</script>
<style scoped>
<style scoped lang="scss">
@import "../../css/sass/variables";
.panel-entry {
.text-subtitle2 {
font-weight: 600;
letter-spacing: 3px;
color: $app-text-grey;
text-transform: uppercase;
text-align: center;
}
&-detail{
.text-subtitle2 {
font-size: 11px;
font-weight: 600;
line-height: 11px;
text-align: left;
}
.text-h3 {
font-size: 16px;
text-align: left;
line-height: 16px;
}
}
&-focus {
border: solid 2px $accent;
}
&-ex-size{
.text-h3 {
font-size: 22px;
}
}
}
</style>

26
webui/src/components/dashboard/PanelFeature.vue
View file

@ -1,18 +1,15 @@
<template>
<q-card flat bordered>
<q-card flat bordered v-bind:class="['panel-feature']">
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-subtitle2 text-uppercase text-center text-app-grey" style="letter-spacing: 3px;">{{featureKey}}</div>
<div class="text-subtitle2">{{featureKey}}</div>
</div>
</div>
</q-card-section>
<q-card-section>
<div class="text-h3 text-center text-weight-bold">
<q-chip
outline
color="primary"
text-color="white"
v-bind:class="['feature-chip', {'feature-chip-string':isString}, {'feature-chip-boolean':isBoolean}, {'feature-chip-boolean-true':isTrue}]">
{{getVal}}
</q-chip>
@ -51,26 +48,37 @@ export default {
<style scoped lang="scss">
@import "../../css/sass/variables";
.panel-feature {
.text-subtitle2 {
font-weight: 600;
letter-spacing: 3px;
color: $app-text-grey;
text-transform: uppercase;
text-align: center;
}
}
.feature-chip {
border-radius: 12px;
border-width: 2px;
height: 56px;
padding: 12px 24px;
color: $primary;
&-string{
border-color: $app-text-grey;
font-size: 24px;
color: $app-text-grey !important;
font-size: 20px;
color: $app-text-grey;
background-color: rgba( $app-text-grey, .1 );
}
&-boolean{
font-size: 40px;
font-weight: 700;
border-color: $negative;
color: $negative !important;
color: $negative;
background-color: rgba( $negative, .1 );
&-true{
border-color: $positive;
color: $positive !important;
color: $positive;
background-color: rgba( $positive, .1 );
}
}