Skip to content

Add configuration settings for colors theme #886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cshagen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add configuration settings for colors theme #886

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 237 additions & 0 deletions src/components/web_themes/colors/webTheme.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
<template>
<div class="web-theme-colors">
<!-- Display background displayMode -->
<openwb-base-button-group-input
title="Farbschema"
:buttons="[
{ buttonValue: 'dark', text: 'Dunkel' },
{ buttonValue: 'light', text: 'Hell' },
{ buttonValue: 'blue', text: 'Blau' },
]"
:model-value="webTheme.configuration.displayMode"
@update:model-value="updateConfiguration($event, 'configuration.displayMode')"
>
<template #help> Hintergrundfarbe </template>
</openwb-base-button-group-input>
<openwb-base-button-group-input
title="Farbschema Smarthome-Geräte"
:buttons="[
{ buttonValue: 'normal', text: 'Orange' },
{ buttonValue: 'standard', text: 'Grün/Violett' },
{ buttonValue: 'advanced', text: 'Bunt' },
]"
:model-value="webTheme.configuration.smartHomeColors"
@update:model-value="updateConfiguration($event, 'configuration.smartHomeColors')"
>
<template #help> Für die Smart-Home-Geräte stehen mehrere Schemata zur Verfügung. </template>
</openwb-base-button-group-input>
<openwb-base-range-input
title="Zeitfenster Live-Graph"
:min="15"
:max="120"
:step="15"
unit="Min."
:model-value="webTheme.configuration.liveGraphDuration / 60"
@update:model-value="updateConfiguration($event * 60, 'configuration.liveGraphDuration')"
>
<template #help>
Das Zeitfenster für den Live-Graphen wird auf die hier eingestellte Anzahl Minuten beschränkt.
</template>
</openwb-base-range-input>
<openwb-base-button-group-input
title="Grafik: Raster"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showGrid"
@update:model-value="updateConfiguration($event, 'configuration.showGrid')"
>
<template #help> Verwende ein Hintergrundraster in den Grafiken </template>
</openwb-base-button-group-input>
<openwb-base-button-group-input
title="Anzahl Dezimalstellen"
:buttons="[
{ buttonValue: 0, text: '3 kW' },
{ buttonValue: 1, text: '3.1 kW' },
{ buttonValue: 2, text: '3.14 kW' },
{ buttonValue: 3, text: '3.141 kW' },
{ buttonValue: 4, text: '3141 W' },
]"
:model-value="webTheme.configuration.decimalPlaces"
@update:model-value="updateConfiguration($event, 'configuration.decimalPlaces')"
>
<template #help> Alle kW- und kWh-Werte werden mit der gewählten Anzahl an Stellen angezeigt. </template>
</openwb-base-button-group-input>
<!-- variable bogenlänge showRelativeArcs -->
<openwb-base-button-group-input
title="Variable Bogenlänge"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showRelativeArcs"
@update:model-value="updateConfiguration($event, 'configuration.showRelativeArcs')"
>
<template #help>
Im Graph 'Aktuelle Leistung' können die Bögen immer die volle Länge haben, oder entsprechend des aktuellen
Gesamtleistung verkürzt dargestellt werden.
</template>
</openwb-base-button-group-input>
<!-- Wechselrichter anzeigen showInverters -->
<openwb-base-button-group-input
title="Wechselrichter anzeigen"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showInverters"
@update:model-value="updateConfiguration($event, 'configuration.showInverters')"
>
<template #help> Zeige Details zu den einzelnen Wechselrichtern </template>
</openwb-base-button-group-input>
<!-- Fahrzeuge anzeigen showVehicles -->
<openwb-base-button-group-input
title="Fahrzeugliste anzeigen"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showVehicles"
@update:model-value="updateConfiguration($event, 'configuration.showVehicles')"
>
<template #help> Zeige alle Fahrzeuge mit Ladestand und Reichweite. </template>
</openwb-base-button-group-input>
<!-- Zähler anzeigen showCounters -->
<openwb-base-button-group-input
title="Zähler anzeigen"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showCounters"
@update:model-value="updateConfiguration($event, 'configuration.showCounters')"
>
<template #help> Zeige die Werte zusätzlich angelegter Zähler. </template>
</openwb-base-button-group-input>
<!-- Preise anzeigen showPrices -->
<openwb-base-button-group-input
title="Preistabelle anzeigen"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showPrices"
@update:model-value="updateConfiguration($event, 'configuration.showPrices')"
>
<template #help> Zeige den Verlauf des dynamischen Strompreises auf der Hauptseite. </template>
</openwb-base-button-group-input>
<!-- alternatives Energie-Widget alternativeEnergy -->
<openwb-base-button-group-input
title="Alternatives Energie-Widget"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.alternativeEnergy"
@update:model-value="updateConfiguration($event, 'configuration.alternativeEnergy')"
>
<template #help> Horizontale Darstellung der Energie-Werte. </template>
</openwb-base-button-group-input>
<!-- Anzeige Standard-Fahrzeug-->
<openwb-base-button-group-input
title="Standard-Fahrzeug anzeigen"
:buttons="[
{
buttonValue: false,
text: 'Nein',
class: 'btn-outline-danger',
},
{
buttonValue: true,
text: 'Ja',
class: 'btn-outline-success',
},
]"
:model-value="webTheme.configuration.showStandardVehicle"
@update:model-value="updateConfiguration($event, 'configuration.showStandardVehicle')"
>
<template #help> Legt fest, ob das Standardfahrzeug in Listen und Auswahlmenus angezeigt wird.</template>
</openwb-base-button-group-input>
</div>
</template>

<script>
import WebThemeConfigMixin from "../WebThemeConfigMixin.vue";

export default {
name: "WebThemeColors",
components: {},
mixins: [WebThemeConfigMixin],
data() {
return {
slideLabels: {
daily_totals: "Tageswerte",
history_chart: "Verlaufsdiagramm",
flow_diagram: "Energiefluss",
},
};
},
};
</script>
Loading