Fix mode-select for multiple loadpoints (#967)

This commit is contained in:
Michael Geers 2021-05-05 21:43:05 +02:00 • committed by GitHub
parent 210d0d7ce2
commit e3dd38f6d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 31 additions and 46 deletions

View file

@ -2,56 +2,40 @@
<div>
<div class="mb-3">{{ $t("main.mode.title") }}</div>
<div class="btn-group w-100" role="group">
<input
id="mode_off"
type="radio"
name="mode"
class="btn-check"
value="off"
<button
type="button"
class="btn btn-outline-primary"
:class="{ active: mode == 'off' }"
@click="setTargetMode('off')"
:checked="mode == 'off'"
/>
<label for="mode_off" class="btn btn-outline-primary">
>
{{ $t("main.mode.stop") }}
</label>
<input
id="mode_now"
type="radio"
name="mode"
class="btn-check"
value="now"
</button>
<button
type="button"
class="btn btn-outline-primary"
:class="{ active: mode == 'now' }"
@click="setTargetMode('now')"
:checked="mode == 'now'"
/>
<label for="mode_now" class="btn btn-outline-primary">
>
{{ $t("main.mode.now") }}
</label>
<input
id="mode_minpv"
type="radio"
name="mode"
class="btn-check"
value="minpv"
</button>
<button
type="button"
class="btn btn-outline-primary"
:class="{ active: mode == 'minpv' }"
@click="setTargetMode('minpv')"
:checked="mode == 'minpv'"
/>
<label for="mode_minpv" class="btn btn-outline-primary">
>
<span class="d-inline d-sm-none"> {{ $t("main.mode.minpvShort") }} </span>
<span class="d-none d-sm-inline"> {{ $t("main.mode.minpvLong") }} </span>
</label>
<input
id="mode_pv"
type="radio"
name="mode"
class="btn-check"
value="pv"
</button>
<button
type="button"
class="btn btn-outline-primary"
:class="{ active: mode == 'pv' }"
@click="setTargetMode('pv')"
:checked="mode == 'pv'"
/>
<label for="mode_pv" class="btn btn-outline-primary">
>
<span class="d-inline d-sm-none"> {{ $t("main.mode.pvShort") }} </span>
<span class="d-none d-sm-inline"> {{ $t("main.mode.pvLong") }} </span>
</label>
</button>
</div>
</div>
</template>
@ -74,5 +58,6 @@ export default {
.btn {
/* equal width buttons */
flex-basis: 0;
white-space: nowrap;
}
</style>

1
dist/css/index.75f5b7e0.css vendored Normal file
View file

@ -0,0 +1 @@
.progress-bar-animated{animation-direction:reverse}.btn.caption{opacity:1}.btn.first{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}.value,input[type=radio],label.btn{white-space:nowrap!important}.text-muted a,.text-muted a:hover{color:#6c757d!important;text-decoration:none}.bg-muted{opacity:.25}.icon[data-v-99c2e68a]{color:#0fdd42}.icon[data-v-1eecc7b7]{color:#0fdd42;display:inline-block}.sponsor-button[data-v-1eecc7b7]{touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.support-button .solid[data-v-1eecc7b7]{display:none}.support-button:hover .solid[data-v-1eecc7b7]{display:inline-block}.support-button:hover .outline[data-v-1eecc7b7]{display:none}.logo[data-v-1d8baa41]{width:85px}.app[data-v-1d8baa41]{min-height:100vh}.btn[data-v-5d01faa2]{flex-basis:0;white-space:nowrap}.vehicle-soc[data-v-332aa8c7]{--height:38px;--thumb-overlap:3px;--thumb-width:3px;--thumb-horizontal-padding:15px;--label-height:26px;position:relative;height:var(--height)}.progress[data-v-332aa8c7]{height:100%;font-size:1rem}.progress-bar.bg-muted[data-v-332aa8c7]{color:var(--white)}.bg-light[data-v-332aa8c7]{color:var(--bs-gray-dark)}.target-label[data-v-332aa8c7]{width:3em;margin-left:-1.5em;height:var(--label-height);position:absolute;top:calc(var(--label-height)*-1 + var(--thumb-overlap)*-1);text-align:center;color:var(--bs-gray-dark);font-size:1rem;opacity:1;transition:opacity .2s ease 1s}.target-slider[data-v-332aa8c7]{-webkit-appearance:none;position:absolute;top:calc(var(--thumb-overlap)*-1);left:calc(var(--thumb-horizontal-padding)*-1);height:calc(100% + var(--thumb-overlap)*2);width:calc(100% + var(--thumb-horizontal-padding)*2);background:transparent}.target-slider[data-v-332aa8c7]:focus{outline:none}.target-slider[data-v-332aa8c7]::-webkit-slider-runnable-track{position:relative;background:transparent;border:none;height:100%;cursor:pointer}.target-slider[data-v-332aa8c7]::-moz-range-track{background:transparent;border:none;height:100%;cursor:pointer}.target-slider[data-v-332aa8c7]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;top:calc(var(--label-height)*-1);height:100%;width:var(--thumb-width);padding:var(--label-height) var(--thumb-horizontal-padding) 0;box-sizing:content-box;background-clip:content-box;background-color:var(--bs-gray-dark);cursor:-webkit-grab;cursor:grab;border:none;opacity:1;-webkit-transition:opacity .2s ease 1s;transition:opacity .2s ease 1s}.target-slider[data-v-332aa8c7]::-moz-range-thumb{position:relative;top:calc(var(--label-height)*-1);height:100%;width:var(--thumb-width);padding:var(--label-height) var(--thumb-horizontal-padding) 0;box-sizing:content-box;background-clip:content-box;background-color:var(--bs-gray-dark);cursor:grab;border:none;opacity:1;-moz-transition:opacity .2s ease 1s;transition:opacity .2s ease 1s}.target--max .target-label[data-v-332aa8c7],.target--max .target-slider[data-v-332aa8c7]::-webkit-slider-thumb{opacity:0}.target--max .target-label[data-v-332aa8c7],.target--max .target-slider[data-v-332aa8c7]::-moz-range-thumb{opacity:0}.target:hover .target-label[data-v-332aa8c7],.target:hover .target-slider[data-v-332aa8c7]::-webkit-slider-thumb{opacity:1;transition-delay:0s}.target:hover .target-label[data-v-332aa8c7],.target:hover .target-slider[data-v-332aa8c7]::-moz-range-thumb{opacity:1;transition-delay:0s}

View file

@ -1 +0,0 @@
.progress-bar-animated{animation-direction:reverse}.btn.caption{opacity:1}.btn.first{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}.value,input[type=radio],label.btn{white-space:nowrap!important}.text-muted a,.text-muted a:hover{color:#6c757d!important;text-decoration:none}.bg-muted{opacity:.25}.icon[data-v-99c2e68a]{color:#0fdd42}.icon[data-v-1eecc7b7]{color:#0fdd42;display:inline-block}.sponsor-button[data-v-1eecc7b7]{touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.support-button .solid[data-v-1eecc7b7]{display:none}.support-button:hover .solid[data-v-1eecc7b7]{display:inline-block}.support-button:hover .outline[data-v-1eecc7b7]{display:none}.logo[data-v-1d8baa41]{width:85px}.app[data-v-1d8baa41]{min-height:100vh}.btn[data-v-9bc25d82]{flex-basis:0}.vehicle-soc[data-v-332aa8c7]{--height:38px;--thumb-overlap:3px;--thumb-width:3px;--thumb-horizontal-padding:15px;--label-height:26px;position:relative;height:var(--height)}.progress[data-v-332aa8c7]{height:100%;font-size:1rem}.progress-bar.bg-muted[data-v-332aa8c7]{color:var(--white)}.bg-light[data-v-332aa8c7]{color:var(--bs-gray-dark)}.target-label[data-v-332aa8c7]{width:3em;margin-left:-1.5em;height:var(--label-height);position:absolute;top:calc(var(--label-height)*-1 + var(--thumb-overlap)*-1);text-align:center;color:var(--bs-gray-dark);font-size:1rem;opacity:1;transition:opacity .2s ease 1s}.target-slider[data-v-332aa8c7]{-webkit-appearance:none;position:absolute;top:calc(var(--thumb-overlap)*-1);left:calc(var(--thumb-horizontal-padding)*-1);height:calc(100% + var(--thumb-overlap)*2);width:calc(100% + var(--thumb-horizontal-padding)*2);background:transparent}.target-slider[data-v-332aa8c7]:focus{outline:none}.target-slider[data-v-332aa8c7]::-webkit-slider-runnable-track{position:relative;background:transparent;border:none;height:100%;cursor:pointer}.target-slider[data-v-332aa8c7]::-moz-range-track{background:transparent;border:none;height:100%;cursor:pointer}.target-slider[data-v-332aa8c7]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;top:calc(var(--label-height)*-1);height:100%;width:var(--thumb-width);padding:var(--label-height) var(--thumb-horizontal-padding) 0;box-sizing:content-box;background-clip:content-box;background-color:var(--bs-gray-dark);cursor:-webkit-grab;cursor:grab;border:none;opacity:1;-webkit-transition:opacity .2s ease 1s;transition:opacity .2s ease 1s}.target-slider[data-v-332aa8c7]::-moz-range-thumb{position:relative;top:calc(var(--label-height)*-1);height:100%;width:var(--thumb-width);padding:var(--label-height) var(--thumb-horizontal-padding) 0;box-sizing:content-box;background-clip:content-box;background-color:var(--bs-gray-dark);cursor:grab;border:none;opacity:1;-moz-transition:opacity .2s ease 1s;transition:opacity .2s ease 1s}.target--max .target-label[data-v-332aa8c7],.target--max .target-slider[data-v-332aa8c7]::-webkit-slider-thumb{opacity:0}.target--max .target-label[data-v-332aa8c7],.target--max .target-slider[data-v-332aa8c7]::-moz-range-thumb{opacity:0}.target:hover .target-label[data-v-332aa8c7],.target:hover .target-slider[data-v-332aa8c7]::-webkit-slider-thumb{opacity:1;transition-delay:0s}.target:hover .target-label[data-v-332aa8c7],.target:hover .target-slider[data-v-332aa8c7]::-moz-range-thumb{opacity:1;transition-delay:0s}

4
dist/index.html vendored
View file

@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.0f1ada3b.css" rel="preload" as="style"><link href="css/index.f1625e44.css" rel="preload" as="style"><link href="js/chunk-vendors.442e4546.js" rel="preload" as="script"><link href="js/index.49f39c3e.js" rel="preload" as="script"><link href="css/chunk-vendors.0f1ada3b.css" rel="stylesheet"><link href="css/index.f1625e44.css" rel="stylesheet"></head><body><script>window.evcc = {
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.0f1ada3b.css" rel="preload" as="style"><link href="css/index.75f5b7e0.css" rel="preload" as="style"><link href="js/chunk-vendors.442e4546.js" rel="preload" as="script"><link href="js/index.9eb9e590.js" rel="preload" as="script"><link href="css/chunk-vendors.0f1ada3b.css" rel="stylesheet"><link href="css/index.75f5b7e0.css" rel="stylesheet"></head><body><script>window.evcc = {
version: "[[.Version]]",
configured: "[[.Configured]]",
};</script><div id="app"></div><script src="js/chunk-vendors.442e4546.js"></script><script src="js/index.49f39c3e.js"></script></body></html>
};</script><div id="app"></div><script src="js/chunk-vendors.442e4546.js"></script><script src="js/index.9eb9e590.js"></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/js/index.9eb9e590.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/js/index.9eb9e590.js.map vendored Normal file

File diff suppressed because one or more lines are too long