implemented Toggle Switch
This commit is contained in:
parent
6fda077f9b
commit
b5d1637e0f
|
@ -114,10 +114,12 @@
|
|||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="icon">
|
||||
<span class="outer_dot">
|
||||
<p class="inner_icon">{{'A' if zone.autoMode else 'M'}}</p>
|
||||
</span>
|
||||
<td>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" {{ "checked" if zone.autoMode }} onchange="switchZoneMode(this.checked, {{ zone.number }})">
|
||||
<span class="slider"></span>
|
||||
<span class="labels" data-on="A" data-off="H"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="property">{{ translater.getTranslation("operating mode") }}:</td>
|
||||
<td class="value">{{translater.getTranslation("automatic mode") if zone.autoMode else translater.getTranslation("manual mode")}}</td>
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
<head>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/header.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/main.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/switch.css') }}">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="refresh" content="5" >
|
||||
|
||||
<script>
|
||||
function executeAction(command, index, value) {
|
||||
|
@ -13,6 +15,9 @@
|
|||
var value = document.getElementById(valueID).value * valueFactor;
|
||||
executeAction(command, index, value);
|
||||
}
|
||||
function switchZoneMode(autoMode, zone) {
|
||||
executeAction('switch_zone_mode' ,zone, (autoMode ? 'automatic' : 'manual'))
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -29,11 +34,11 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="heading">
|
||||
<a class="heading" href="{{ url_for('startPage')}}">
|
||||
<img src="{{ url_for('static', filename='img/header/wassertropfen.png') }}" alt="" class="title-img">
|
||||
|
||||
<h1>{{ translater.getTranslation("Irrigation") }}-<br>{{ translater.getTranslation("system") }}</h1>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<img src="{{ url_for('static', filename='img/header/blumenbeet.jpg') }}" alt="" class="header-img">
|
||||
|
||||
|
|
|
@ -46,6 +46,7 @@ nav ul li a:hover{
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
margin: 0px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.heading h1{
|
||||
|
|
|
@ -10,3 +10,8 @@ h2{
|
|||
text-transform: uppercase;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
Loading…
Reference in New Issue