diff --git a/assets/css/app.css b/assets/css/app.css index aea5ba812..c80c9b745 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -308,3 +308,21 @@ small { --bs-table-color: var(--evcc-default-text); --bs-table-border-color: var(--evcc-gray); } +.nav-tabs .nav-link { + color: var(--evcc-gray) !important; +} + +.nav-tabs .nav-link.active { + color: var(--evcc-default-text) !important; + background-color: var(--evcc-box) !important; + border-bottom-color: var(--evcc-box); +} + +.form-check-input:checked { + border-color: var(--bs-primary); + background-color: var(--bs-primary); +} + +.dark .form-switch .form-check-input:checked { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2328293e'/%3e%3c/svg%3e"); +} diff --git a/assets/i18n/de.toml b/assets/i18n/de.toml index 685e77761..2b693de6e 100644 --- a/assets/i18n/de.toml +++ b/assets/i18n/de.toml @@ -26,10 +26,11 @@ modalUpdateStatusStart = "Aktualisierung gestartet: " modalUpdateStatusFailed = "Aktualisierung nicht möglich: " [footer.savings] +tabTitle = "Meine Daten" footerShort = "{percent}% Sonne" footerLong = "{percent}% Sonnenenergie" modalTitle = "Auswertung Ladeenergie" -since = "Seit {since}." +since = "seit {since}" percentTitle = "Sonnenenergie" percentSelf = "{self} kWh Sonne" percentGrid = "{grid} kWh Netz" @@ -40,8 +41,28 @@ savingsTitle = "Ersparnis" savingsComparedToGrid = "gegenüber Netzbezug" savingsTotalEnergy = "{total} kWh geladen" +[footer.community] +tabTitle = "Live-Community" +power = "Ladeleistung" +powerSub1 = "{activeClients} von {totalClients} Nutzern" +powerSub2 = "laden mit evcc" +greenShare = "Sonnenanteil" +greenShareSub1 = "der Leistung kommt" +greenShareSub2 = "aus PV & Hausakku" +greenEnergy = "Sonnenenergie" +greenEnergySub1 = "seit Oktober 2022" +greenEnergySub2 = "über evcc geladen" + +[footer.telemetry] +optIn = "Ich möchte meine Daten auch beisteuern." +optInMoreDetails = "Mehr Details gibts {0}." +optInMoreDetailsLink = "hier" +optInSponsorship = "Sponsoring erforderlich." + [footer.sponsor] -thanks = "Danke für deine Unterstützung, {sponsor}! Das hilft uns bei der Weiterentwicklung." +titleSponsor = "Du bist Unterstützer" +titleNoSponsor = "Unterstütze uns" +thanks = "Danke für dein Sponsoring, {sponsor}! Das hilft uns bei der Weiterentwicklung." confetti = "Lust auf Konfetti?" supportUs = "Unsere Mission: Sonne tanken zum Standard machen. Hilf uns und unterstütze evcc finanziell." sticker = "...oder evcc Sticker?" diff --git a/assets/i18n/en.toml b/assets/i18n/en.toml index 6025d0539..c72461711 100644 --- a/assets/i18n/en.toml +++ b/assets/i18n/en.toml @@ -26,10 +26,11 @@ modalUpdateStatusStart = "Update started: " modalUpdateStatusFailed = "Update failed: " [footer.savings] +tabTitle = "My data" footerShort = "{percent}% solar" footerLong = "{percent}% solar energy" modalTitle = "Charge Energy Overview" -since = "Since {since}." +since = "since {since}" percentTitle = "Solar Energy" percentSelf = "{self} kWh solar" percentGrid = "{grid} kWh grid" @@ -40,7 +41,27 @@ savingsTitle = "Savings" savingsComparedToGrid = "compared to grid" savingsTotalEnergy = "{total} kWh charged" +[footer.community] +tabTitle = "Live community" +power = "Charging power" +powerSub1 = "{activeClients} of {totalClients} participants" +powerSub2 = "are charging right now" +greenShare = "Solar share" +greenShareSub1 = "power is covered by" +greenShareSub2 = "PV & battery storage" +greenEnergy = "Solar energy" +greenEnergySub1 = "charged with evcc" +greenEnergySub2 = "since October 2022" + +[footer.telemetry] +optIn = "I want to contribute my data as well." +optInMoreDetails = "More details are available {0}." +optInMoreDetailsLink = "here" +optInSponsorship = "Sponsoring required." + [footer.sponsor] +titleSponsor = "You are a supporter" +titleNoSponsor = "Support us" thanks = "Thanks for your support, {sponsor}! It helps us with the further development." confetti = "Ready for confetti?" supportUs = "Our mission: Make solar charging the standard. Help us and support evcc financially." diff --git a/assets/i18n/lt.toml b/assets/i18n/lt.toml index bd103a8b9..f1ce95237 100644 --- a/assets/i18n/lt.toml +++ b/assets/i18n/lt.toml @@ -26,13 +26,14 @@ modalUpdateStatusStart = "Naujinimas prasidėjo: " modalUpdateStatusFailed = "Naujinimas nepavyko: " [footer.savings] +tabTitle = "Mano duomenys" footerShort = "{percent}% saulės" footerLong = "{percent}% saulės energija" modalTitle = "Įkrovimo energijos apžvalga" -since = "Nuo {since}." +since = "nuo {since}" percentTitle = "Saulės energija" percentSelf = "{self} kWh saulės" -percentGrid = "{grid} kWh tinklas" +percentGrid = "{grid} kWh tinklo" priceTitle = "Energijos kaina" priceFeedIn = "{feedInPrice} eksporto" priceGrid = "{gridPrice} tinklo" @@ -40,7 +41,27 @@ savingsTitle = "Sutaupyta" savingsComparedToGrid = "palyginus su tinklu" savingsTotalEnergy = "{total} kWh įkrauta" +[footer.community] +tabTitle = "Bendruomenės duomenys" +power = "Įkrovimo galia" +powerSub1 = "{activeClients} iš {totalClients} dalyvių" +powerSub2 = "įkrauna šiuo metu" +greenShare = "Saulės dalis" +greenShareSub1 = "galios tieka Saulė ir" +greenShareSub2 = "energijos kaupikliai" +greenEnergy = "Saulės energija" +greenEnergySub1 = "įkrauta su evcc" +greenEnergySub2 = "nuo 2022 Spalio" + +[footer.telemetry] +optIn = "Noriu prisidėti savo duomenimis." +optInMoreDetails = "Daugiau informacijos rasite {0}." +optInMoreDetailsLink = "čia" +optInSponsorship = "(Gali tik rėmėjai.)" + [footer.sponsor] +titleSponsor = "Esate rėmėjais" +titleNoSponsor = "Paremkite mus" thanks = "Ačiū, kad mus remiate {sponsor}! Taip prisidedate prie projekto vystymo." confetti = "Norite konfeti?" supportUs = "Mūsų misija: Siekiame, kad įkrovimas saulės energija taptų standartu. Padėkite mums ir paremkite evcc finansiškai." diff --git a/assets/js/communityApi.js b/assets/js/communityApi.js new file mode 100644 index 000000000..292789f6c --- /dev/null +++ b/assets/js/communityApi.js @@ -0,0 +1,21 @@ +import axios from "axios"; + +const api = axios.create({ + baseURL: "https://api.evcc.io/v1/", + headers: { + Accept: "application/json", + }, +}); + +// global error handling +api.interceptors.response.use( + (response) => response, + (error) => { + const url = error.config.baseURL + error.config.url; + const message = `${error.message}: API request failed ${url}`; + window.app.error({ message }); + return Promise.reject(error); + } +); + +export default api; diff --git a/assets/js/components/AnimatedNumber.vue b/assets/js/components/AnimatedNumber.vue index 3879062da..cdc903f39 100644 --- a/assets/js/components/AnimatedNumber.vue +++ b/assets/js/components/AnimatedNumber.vue @@ -11,18 +11,19 @@ export default { to: { type: Number }, format: { type: Function }, noAnimation: { type: Boolean }, + duration: { type: Number, default: DURATION }, }, data() { - return { duration: 0 }; + return { activeDuration: 0 }; }, computed: { animationDuration() { - return this.noAnimation ? 0 : this.duration; + return this.noAnimation ? 0 : this.activeDuration; }, }, watch: { to: function () { - this.duration = DURATION; + this.activeDuration = this.duration; }, }, }; diff --git a/assets/js/components/LiveCommunity.vue b/assets/js/components/LiveCommunity.vue new file mode 100644 index 000000000..7e7b2d88c --- /dev/null +++ b/assets/js/components/LiveCommunity.vue @@ -0,0 +1,106 @@ + + + diff --git a/assets/js/components/Savings.vue b/assets/js/components/Savings.vue index 3108384ee..c91e35bc6 100644 --- a/assets/js/components/Savings.vue +++ b/assets/js/components/Savings.vue @@ -41,64 +41,98 @@ >