379 lines
13 KiB
HTML
379 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<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">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png">
|
|
<link rel="manifest" href="ico/site.webmanifest">
|
|
<link rel="mask-icon" href="ico/safari-pinned-tab.svg" color="#5bbad5">
|
|
<link rel="shortcut icon" href="ico/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#2b5797">
|
|
<meta name="msapplication-config" content="ico/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<title>evcc</title>
|
|
|
|
<!-- CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/fontawesome.min.css" rel="stylesheet">
|
|
|
|
<!-- Bootstrap -->
|
|
<script src="js/jquery-3.4.1.slim.min.js"></script>
|
|
<script src="js/popper.min.js"></script>
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Axios -->
|
|
<script src="js/axios.min.js"></script>
|
|
|
|
<!-- VueJS -->
|
|
<script src="js/vue.min.js"></script>
|
|
<script src="js/vue-router.min.js"></script>
|
|
|
|
<style>
|
|
/* reverse loading animation */
|
|
.progress-bar-animated {
|
|
animation-direction: reverse;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<a class="navbar-brand" href="https://github.com/andig/evcc"><i class="text-primary fas fa-leaf mr-2"></i>evcc</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
|
|
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
|
<div class="navbar-nav">
|
|
<router-link class="nav-item nav-link pb-1" to="/">Laden</router-link>
|
|
<!-- << range $idx, $link := .Links >> -->
|
|
<router-link class="nav-item nav-link pb-1" to="/links/<< $idx >>"><< $link.Title >></router-link>
|
|
<!-- << end >> -->
|
|
<router-link class="nav-item nav-link pb-1" to="/config">Konfiguration</router-link>
|
|
<a class="nav-item nav-link pb-1" href="https://github.com/andig/evcc/issues">Support</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<message-toasts></message-toasts>
|
|
<router-view></router-view>
|
|
</div>
|
|
|
|
<script type="text/x-template" id="embed-template">
|
|
<div class="container mx-auto text-center">
|
|
<h1 class="display-4 pt-3" v-if="title">{{title}}</h1>
|
|
<p class="lead mx-auto text-center" v-if="subtitle">{{subtitle}}</p>
|
|
<a v-bind:href="link" v-if="link">
|
|
<img v-bind:src="img" v-if="img">
|
|
<iframe v-bind:src="iframe" v-if="iframe">
|
|
</a>
|
|
<span v-else>
|
|
<img class="img-fluid" v-bind:src="img" v-if="img">
|
|
<iframe v-bind:src="iframe" v-if="iframe">
|
|
</span>
|
|
</div>
|
|
</script>
|
|
|
|
<div id="toasts">
|
|
<div aria-atomic="true" style="position: absolute; top: 4rem; right: 0.5rem; min-height: 200px; min-width: 300px">
|
|
<!-- Position it -->
|
|
<message-toast v-for="item in items" v-bind:item="item" :id="'message-id-'+item.id" :key="item.id">
|
|
</message-toast>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/x-template" id="message-template">
|
|
<div class="toast" data-delay="10000" v-bind:data-autohide="true">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto" v-if="item.type != 'warn'"><i class="text-danger fas fa-exclamation-triangle"></i> Error</strong>
|
|
<strong class="mr-auto" v-if="item.type == 'warn'"><i class="text-warning fas fa-exclamation-triangle"></i> Warning</strong>
|
|
<small v-if="item.status">HTTP {{item.status}}</small>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">{{item.message}}</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="main-template">
|
|
<div class="container">
|
|
<site></site>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="mode-template">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="btn-group btn-group-toggle bg-white">
|
|
<label class="btn btn-outline-primary shadow-none" v-bind:class="{active:mode=='off'}">
|
|
<input type="radio" value="off" v-on:click="mode='off'">Stop
|
|
</label>
|
|
<label class="btn btn-outline-primary shadow-none" v-bind:class="{active:mode=='now'}">
|
|
<input type="radio" value="now" v-on:click="mode='now'">
|
|
<span class="d-inline d-sm-none">Sofort</span>
|
|
<span class="d-none d-sm-inline">Sofortladen</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary shadow-none" v-bind:class="{active:mode=='minpv'}" v-if="state.gridMeter">
|
|
<input type="radio" value="minpv" v-on:click="mode='minpv'">
|
|
<span class="d-inline d-sm-none">Min + PV</span>
|
|
<span class="d-none d-sm-inline">Minimum + PV</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary shadow-none" v-bind:class="{active:mode=='pv'}" v-if="state.gridMeter">
|
|
<input type="radio" value="pv" v-on:click="mode='pv'">
|
|
<span class="d-inline d-sm-none">PV</span>
|
|
<span class="d-none d-sm-inline">Nur PV</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="site-template">
|
|
<div>
|
|
|
|
<div class="row mt-4 border-bottom">
|
|
<div class="col-12 col-md-4">
|
|
<p class="h1">{{state.title||"Home"}}</p>
|
|
</div>
|
|
<div class="d-none col-12 col-md-8 pt-1"
|
|
v-bind:class="{'d-md-block': state.loadpoints.length>1}">
|
|
<modeswitch></modeswitch>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="d-none d-md-block col-md-4">
|
|
</div>
|
|
<div class="col-6 col-md-2 mt-3" v-if="state.gridMeter">
|
|
<div class="mb-2" v-if="state.gridPower > 0">
|
|
Bezug <i class="text-primary fas fa-arrow-down"></i>
|
|
</div><div class="mb-2" v-else>
|
|
Einspeisung <i class="text-primary fas fa-arrow-up"></i>
|
|
</div>
|
|
<h2>
|
|
{{fmt(state.gridPower)}} <small class="text-muted">{{fmtUnit(state.gridPower)}}W</small>
|
|
</h2>
|
|
</div>
|
|
<div class="col-6 col-md-2 mt-3" v-if="state.pvMeter">
|
|
<div class="mb-2">Erzeugung <i class="text-primary fas fas fa-sun" v-if="state.pvPower < 0"></i></div>
|
|
<h2>
|
|
{{fmt(state.pvPower)}} <small class="text-muted">{{fmtUnit(state.pvPower)}}W</small>
|
|
</h2>
|
|
</div>
|
|
<div class="d-none col-md-2 mt-3" v-if="state.batteryMeter">
|
|
<div class="mb-2">Batterie <i class="text-primary fas"
|
|
v-bind:class="{'fa-arrow-down':state.batteryPower<0, 'fa-arrow-up':state.batteryPower>0}"></i>
|
|
</div>
|
|
<h2>
|
|
{{fmt(state.batteryPower)}} <small class="text-muted">{{fmtUnit(state.batteryPower)}}W</small>
|
|
</h2>
|
|
</div>
|
|
<div class="d-block col-12 text-center pt-4 pb-4 mt-3 mt-md-5 mb-0 bg-light"
|
|
v-bind:class="{ 'd-md-none': state.loadpoints.length>1 }">
|
|
<modeswitch></modeswitch>
|
|
</div>
|
|
</div>
|
|
|
|
<loadpoint v-for="(loadpoint,id) in state.loadpoints" v-bind:state="loadpoint" :id="'loadpoint-'+id">
|
|
</loadpoint>
|
|
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="loadpoint-template">
|
|
<div>
|
|
<div class="row mt-3 mt-md-5 border-bottom">
|
|
<div class="col-12">
|
|
<p class="h1">{{state.title||"Ladepunkt"}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-4 mt-3">
|
|
<div class="mb-2">{{state.socTitle||"Fahrzeug"}}</div>
|
|
<div class="progress" style="height: 24px; font-size:100%; margin-top:16px">
|
|
<div class="progress-bar" role="progressbar" v-if="!state.soc"
|
|
v-bind:class="{
|
|
'progress-bar-striped': state.charging,
|
|
'progress-bar-animated': state.charging,
|
|
'bg-primary': state.connected,
|
|
'bg-light': !(state.connected || state.charging),
|
|
'text-secondary': !(state.connected || state.charging),
|
|
}"
|
|
v-bind:style="{width: '100%'}">{{state.charging ? "laden" : (state.connected ? "verbunden" : "getrennt")}}</div>
|
|
<div class="progress-bar" role="progressbar" v-else-if="state.socCharge > 9"
|
|
v-bind:class="{
|
|
'progress-bar-striped': state.charging,
|
|
'progress-bar-animated': state.charging,
|
|
'bg-primary': !state.charging && state.connected,
|
|
}"
|
|
v-bind:style="{width: state.socCharge+'%'}">{{state.socCharge}}%</div>
|
|
<div class="progress-bar" role="progressbar" v-else
|
|
v-bind:class="{
|
|
'progress-bar-striped': state.charging,
|
|
'progress-bar-animated': state.charging,
|
|
'bg-primary': !state.charging && state.connected,
|
|
}"
|
|
v-bind:style="{width: (state.socCharge<0) ? 0 : state.socCharge+'%'}"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-2 mt-3">
|
|
<div class="mb-2">Leistung</div>
|
|
<h2>
|
|
{{fmt(state.chargePower)}} <small class="text-muted">{{fmtUnit(state.chargePower)}}W</small>
|
|
<!-- <span class="text-muted">/</span>
|
|
{{fmt(state.chargeCurrent)}} <small class="text-muted">A</small> -->
|
|
</h2>
|
|
</div>
|
|
<div class="col-6 col-md-2 mt-3">
|
|
<div class="mb-2">Geladen</div>
|
|
<h2>
|
|
{{fmt(state.chargedEnergy)}} <small class="text-muted">{{fmtUnit(state.chargedEnergy)}}Wh</small>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-2 mt-3">
|
|
<div class="mb-2">Dauer</div>
|
|
<h2>
|
|
{{fmtShortDuration(state.chargeDuration)}} <small
|
|
class="text-muted">{{fmtShortDurationUnit(state.chargeDuration)}}</small>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-2 mt-3">
|
|
<div class="mb-2">Restzeit</div>
|
|
<h2>
|
|
{{fmtShortDuration(state.chargeEstimate)}} <small
|
|
class="text-muted">{{fmtShortDurationUnit(state.chargeEstimate)}}</small>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="config-template">
|
|
<div class="container">
|
|
<!-- <h1 class="display-4 pt-3 mx-auto text-center">Konfiguration</h1>
|
|
<p class="lead mx-auto text-center">Details der Fahrzeug-, Wallbox- und Zählerkonfiguration.</p> -->
|
|
|
|
<div class="row mt-4 border-bottom">
|
|
<div class="col-12">
|
|
<p class="h1">{{state.title||"Home"}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row h5">
|
|
<div class="col-md-4"></div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Netzzähler:
|
|
<span class="text-primary" v-if="state.gridMeter">✓</span>
|
|
<span class="text-primary" v-else>—</span>
|
|
</div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
PV Zähler:
|
|
<span class="text-primary" v-if="state.pvMeter">✓</span>
|
|
<span class="text-primary" v-else>—</span>
|
|
</div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Batteriezähler:
|
|
<span class="text-primary" v-if="state.batteryMeter">✓</span>
|
|
<span class="text-primary" v-else>—</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="(loadpoint,id) in state.loadpoints" v-bind:loadpoint="loadpoint" :id="'loadpoint-'+id">
|
|
|
|
<div class="row mt-4 border-bottom">
|
|
<div class="col-12">
|
|
<p class="h1">{{loadpoint.title||"Ladepunkt"}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row h5">
|
|
<div class="col-md-4"></div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Ladezähler:
|
|
<span class="text-primary" v-if="loadpoint.chargeMeter">✓</span>
|
|
<span class="text-primary" v-else>—</span>
|
|
</div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Phasen:
|
|
<span class="text-primary">{{loadpoint.phases}}p</span>
|
|
</div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Min. Strom:
|
|
<span class="text-primary">{{loadpoint.minCurrent}}A</span>
|
|
</div>
|
|
<div class="col-6 col-md-2 py-3">
|
|
Max. Strom:
|
|
<span class="text-primary">{{loadpoint.maxCurrent}}A</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row h5">
|
|
<div class="col-md-4"></div>
|
|
<div class="col-md-8 h2">
|
|
<div class="row py-3 h2 border-bottom">
|
|
<div class="col-12">
|
|
Fahrzeug
|
|
</div>
|
|
</div>
|
|
<div class="row h5">
|
|
<div class="col-6 py-3">
|
|
Modell:
|
|
<span class="text-primary">{{loadpoint.socTitle||"—"}}</span>
|
|
</div>
|
|
<div class="col-6 py-3">
|
|
Kapazität:
|
|
<span class="text-primary">{{loadpoint.socCapacity}}kWh</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</script>
|
|
|
|
<footer class="pt-4 pb-2 pt-md-5 pb-md-4 mt-3 mt-md-5 border-top">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<small class="text-muted">© 2020</small>
|
|
</div>
|
|
<div class="col-6 text-right">
|
|
<small class="text-muted"><< .Version>> << if ne .Version .Commit>>(<< .Commit>>)<< end>></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function routerLinks() {
|
|
return [
|
|
// << range $idx, $link := .Links >>
|
|
{
|
|
title: "<< $link.Title >>",
|
|
subtitle: "<< $link.Subtitle >>",
|
|
img: "<< $link.Img >>",
|
|
iframe: "<< $link.Iframe >>",
|
|
link: "<< $link.Link >>"
|
|
},
|
|
// << end >>
|
|
];
|
|
}
|
|
</script>
|
|
|
|
<script src="js/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|