Webserver/Templates/dashboard.html

@@ -7,17 +7,17 @@
 
     <style>
         @media screen and (min-width: 2051px){
-            #content{
+            #zones{
                 grid-template-rows: repeat( {{ (zoneManager.zones|length / 3) + 1  }} , minmax(150px, auto));
             }
         }
         @media screen and (max-width: 2050px) and (min-width: 1351px){
-            #content{
+            #zones{
                 grid-template-rows: repeat( {{ (zoneManager.zones|length / 2) + 1  }} , minmax(150px, auto));
             }
         }
         @media screen and (max-width: 1350px){
-            #content{
+            #zones{
                 grid-template-rows: repeat( {{ zoneManager.zones|length }} , minmax(150px, auto));
             }
         }
@@ -30,14 +30,41 @@
 
 
     <main>
-
+     
         <h2>{{ translater.getTranslation("Dashboard") }}</h2>
 
-        <div id="content">
+        
+        <h3>{{ translater.getTranslation("planed irrigationjobs") }}</h3>
+        <div id="pipeline">
+            <table>
+                <thead>
+                    <tr>
+                        <td>ID</td>
+                        <td>{{ translater.getTranslation("Zone") }}</td>
+                        <td>{{ translater.getTranslation("planed duration") }}</td>
+                    </tr>
+                    
+                </thead>
+
+                <tbody>
+                    {% for job in zoneManager.pipeLine %}
+                        <tr>
+                            <td>{{ job.id }}</td>
+                            <td>{{ job.zone.number|string + ": " + job.zone.name }}</td>
+                            <td>{{ ((job.duration/60)|int)|string + " " + translater.getTranslation("minutes")}}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+
+        <h3>{{ translater.getTranslation("irrigation zones") }}</h3>
+        <div id="zones">
             {% for zone in zoneManager.zones %}
                 <div id="zone_{{ zone.number }}" class="zone">
                     <a href="/zones/{{ zone.number}}">
-                        <h3>{{ zone.name }}</h3>
+                        <h4>{{ zone.name }}</h3>
                     </a>
                     <table>
                         <tbody>
@@ -48,7 +75,9 @@
                                     </span>
                                 </td>
                                 <td class="property">{{ translater.getTranslation("state") }}:</td>
-                                <td class="value">{{ translater.getTranslation("switched on") if zone.state else translater.getTranslation("switched off") }}</td>
+                                <td class="value">
+                                    {{ translater.getTranslation("switched on") if zone.state else translater.getTranslation("switched off") }}
+                                </td>
                                 <td>
                                     <select id="duration_zone_{{ zone.number }}">
                                         {% for option in zoneManager.systemSettings.webDurationOptions %}
@@ -59,6 +88,30 @@
                                 </td>
                                 
                             </tr>
+                            {% if (zone.setState == 1 or zone.setState == 2)  %}
+                                <tr>
+                                    <td></td>
+                                    <td></td>
+                                    <td>
+                                        {{translater.getTranslation("until") + zone.endTimeSetState|string}}
+                                    </td>
+                                    <td>
+                                        <button onclick="executeAction({{'"switch_zone_off"' if zone.state else '"switch_zone_on"'}},'{{ zone.number }}', -1)">{{ translater.getTranslation("cancel") }}</button>
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if zone.planedDuration > 0  %}
+                                <tr>
+                                    <td></td>
+                                    <td></td>
+                                    <td>
+                                        {{translater.getTranslation("irragation is planed for") + " " + ((zone.planedDuration/60)|int)|string + " " + translater.getTranslation("minutes") + "." }}
+                                    </td>
+                                    <td>
+                                        <button onclick="executeAction('delete_jobs_for_zone','{{ zone.number }}', 0)">{{ translater.getTranslation("delete") }}</button>
+                                    </td>
+                                </tr>
+                            {% endif %}
                             <tr>
                                 <td class="icon">
                                     <span class="outer_dot">

Webserver/static/Styles/dashboard.css

@@ -1,4 +1,4 @@
-#content{
+#zones{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* grid-template-rows: repeat( {{ zones|length  }} , minmax(150px, auto)); moved to content div to use jinja */
@@ -29,9 +29,10 @@
     100% {transform: scale3d(107%, 120%, 100%);}
 }
 
-.zone h3{
+.zone h4{
     padding-top: 25px;
     padding-bottom: 25px;
+    font-size: x-large;
 }
 .zone_number{
     position: absolute;
@@ -95,7 +96,7 @@ td.value{
 }
 
 @media screen and (max-width: 2050px) and (min-width: 1351px){
-    #content{
+    #zones{
         grid-template-columns: repeat(2, 1fr);
     }
     .zone:nth-child(4n){
@@ -107,7 +108,7 @@ td.value{
 }
 
 @media screen and (max-width: 1350px){
-    #content{
+    #zones{
         grid-template-columns: repeat(1, 1fr);
     }
     .zone{