emhass 0.10.5__py3-none-any.whl → 0.11.0__py3-none-any.whl

emhass/static/style.css

@@ -1,3 +1,4 @@
+/*! EMHASS Style Sheet */
 /*! style.css v1.0.0 (modified version) | ISC License | https://github.com/ungoldman/style.css */
 
 /* color reference css */
@@ -570,6 +571,8 @@ button,
 .mystyle,
 .alert,
 .info,
+.section-card,
+select,
 table {
   border-radius: 7px;
   /* overflow: visible; */
@@ -578,6 +581,7 @@ table {
 button,
 .alert,
 .info,
+.section-card,
 select {
   text-transform: none;
   border-width: 1px;
@@ -599,6 +603,8 @@ select {
 
 h2 {
   margin-bottom: .3em;
+  margin-right: .3em;
+  margin-left: .3em;
 }
 
 .table_div h4 {
@@ -747,12 +753,12 @@ tr:hover td:last-child {
   margin-right: 13px;
 }
 
-#loader {
+/* #loader {
   min-width: 3.5em;
   min-height: 3.5em;
   width: 3.5em;
   height: 3.5em;
-}
+} */
 
 .loading {
   /* loading animation  */
@@ -787,7 +793,7 @@ tr:hover td:last-child {
 
 .tick {
   /* tick symbol  */
-  color: #158b00;
+  color: #bfebbc;
   vertical-align: text-top;
   font-size: 4.0em;
   animation-name: fadeInOpacity;
@@ -798,7 +804,7 @@ tr:hover td:last-child {
 
 .cross {
   /* cross symbol  */
-  color: #a71515;
+  color: #e3b7b7;
   vertical-align: text-top;
   font-size: 4.0em;
   animation-name: fadeInOpacity;
@@ -941,7 +947,8 @@ select,
 
 
 .input-list input,
-.input-box textarea {
+.input-box textarea,
+#config-box {
   border-collapse: collapse;
   border-radius: 7px;
   border-style: solid;
@@ -970,7 +977,229 @@ select,
   margin: 0;
 }
 
-/* */
+/* config page */
+#configuration-container {
+  border: 1px solid;
+  border-width: 1px 0px;
+}
+
+#configuration-container,
+.header-footer {
+  margin-bottom: 5px;
+  padding: 20px 0px;
+  border-radius: 7px;
+  max-width: 90%;
+  margin: auto;
+}
+
+
+.header-footer {
+  background-color: #0000;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-footer h4,
+.header-footer div,
+.header-footer a {
+  line-height: 0;
+  margin: auto 0;
+
+}
+
+/* loading icons */
+.header-footer p {
+  margin: 20px 0;
+}
+
+
+.header-footer h4 {
+  color: darkblue;
+}
+
+.header-footer .feather {
+  height: 3em !important;
+  stroke-width: 3 !important;
+}
+
+#save,
+#json {
+  min-width: 15%;
+  height: auto;
+  display: block;
+  min-height: fit-content;
+  margin-left: auto;
+}
+
+/* configuration list page */
+
+.section-card {
+  max-width: 99%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1vh;
+}
+
+.section-card h4 {
+  margin-top: 5px;
+  background-color: #0000 !important;
+}
+
+.section-card-header {
+  background-color: #e1e1e15e;
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.355);
+  /* justify-content: center; */
+}
+
+.section-body {
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switch,
+.section-card-header input {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 27px;
+  margin-left: auto;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: calc(27px - 7px);
+  width: calc(27px - 7px);
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: darkblue;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.slider,
+.slider:before {
+  border-radius: 7px
+}
+
+/* param container and content styling  */
+.param {
+  text-align: left;
+  padding: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.355);
+  transition: 1s;
+}
+
+.param input,
+.section-card-header input {
+  background-color: #ffffff11;
+  border-radius: 7px;
+  border: solid 1px;
+  color: #181818;
+  min-width: 40%;
+  max-width: 70%;
+}
+
+
+.section-card-header input {
+  min-width: calc(27px - 7px);
+}
+
+.param p,
+.param i {
+  font-size: .7em;
+  margin-top: 4px;
+}
+
+.param i {
+  font-size: .7em;
+  margin-bottom: 5px;
+}
+
+.param p {
+  padding-right: 5px;
+  max-width: 777px;
+}
+
+.param h5 {
+  font-size: 1em;
+}
+
+.param h5,
+p {
+  margin: 5px;
+  margin-left: 0px;
+  margin-bottom: 0px;
+}
+
+.param button {
+  width: 20px;
+  height: 20px;
+  line-height: 0;
+  padding: 1px;
+  box-shadow: none;
+  margin-bottom: 5px;
+}
+
+.param-input {
+  display: block;
+  float: left;
+  min-width: 100%;
+}
+
+.param-input input {
+  min-width: 70%;
+}
+
+.param-input input[type="time"] {
+  min-width: 35%;
+}
+
+/* when requirement param is not met */
+.requirement-disable {
+  pointer-events: none;
+  filter: opacity(25%);
+}
+
+/* configuration box page */
+
+#config-box {
+  min-width: 100%;
+  min-height: 85vh;
+}
+
+
 
 
 /* mobile only changes */
@@ -989,6 +1218,9 @@ select,
   }
 }
 
+
+
+
 /* Dark Theme Support */
 @media (prefers-color-scheme: dark) {
   html.adaptive {
@@ -1031,6 +1263,9 @@ select,
   }
 
   h2,
+  h3,
+  h4,
+  .header-footer h4,
   kbd,
   a {
     background-color: #111111;
@@ -1094,7 +1329,8 @@ select,
   }
 
   .input-list input,
-  .input-box textarea {
+  .input-box textarea,
+  #config-box {
     background-color: #282928;
     border-color: #e1e1e1;
     color: #e1e1e1
@@ -1110,5 +1346,28 @@ select,
     border-top: 16px solid #ccf3ff;
   }
 
+  input:checked+.slider {
+    background-color: #ccf3ff;
+  }
 
-}
+  .param {
+    border-color: rgba(255, 255, 255, 0.355);
+  }
+
+  .param input,
+  .section-card-header input {
+    color: #e1e1e1;
+  }
+
+  .section-card-header {
+    background-color: #ffffff11;
+  }
+
+
+  #configuration-container {
+    background-color: #ffffff07;
+    border: 0;
+  }
+
+
+}

emhass/templates/configuration.html

@@ -0,0 +1,75 @@
+<!-- Configuration page html -->
+<!DOCTYPE html>
+<html class="adaptive">
+
+<head>
+  <title>EMHASS: Energy Management Optimization for Home Assistant</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="static/style.css?version=1">
+  <link rel="icon" type="image/x-icon" href="static/img/emhass_logo_short.svg">
+  <script src="static/configuration_script.js"></script>
+</head>
+
+<body style="margin: auto; align-items:center; text-align:center;">
+
+  <div>
+    <!-- Icons by feather https://github.com/feathericons/feather -->
+    <div id="top-links">
+      <!-- index page  -->
+      <a href="index" title="Home" style="margin-right: 12px; cursor: pointer; z-index: 1">
+        <svg class="feather">
+          <use class="feather" href="static/img/feather-sprite.svg#home" />
+        </svg>
+      </a>
+      <a href="https://emhass.readthedocs.io/en/latest/">
+        <svg class="feather" title="EMHASS Docs" style="margin-right: 12px;" ;>
+          <use class="feather" href="static/img/feather-sprite.svg#book" />
+        </svg>
+      </a>
+      <a href="https://github.com/davidusb-geek/emhass" target="_blank" rel="noopener noreferrer">
+        <svg class="feather" title="EMHASS Git repo" style="margin-right: 0px;">
+          <use class="feather" href="static/img/feather-sprite.svg#git-branch" />
+        </svg>
+      </a>
+    </div>
+
+    <!-- Title -->
+    <img src="static/img/emhass_icon.png" alt="">
+    <h2>EMHASS: Energy Management Optimization for Home Assistant</h2>
+  </div>
+  <div class="header-footer">
+    <h4>Configuration:</h4>
+    <a id="json-toggle" title="List and Box view toggle">
+      <svg id="json" class="feather" class="header-footer-button">
+        <use class="feather" href="static/img/feather-sprite.svg#code" />
+      </svg>
+    </a>
+  </div>
+
+  <!-- parameter list/box elements section -->
+  <div id=configuration-container>
+  </div>
+  <!-- configuration buttons (defaults, save, yaml) -->
+  <div class="save_button header-footer">
+    <button style="margin-right: 5px;" type="button" id="yaml" title="Convert yaml to json" class="">YAML</button>
+    <button type="button" id="defaults" title="Restore to default parameter values" class="">Defaults</button>
+    <button type="button" id="save" title="Save Config to EMHASS" class="">Save</button>
+    <div class="loading-div"> <!-- dynamic tick/cross element -->
+      <div id=loader></div> 
+    </div>
+  </div>
+  <!-- alert box -->
+  <div style="display: none;" id="alert" class="alert">
+    <div>
+      <span onclick="this.parentElement.parentElement.style.display='none';">&times;</span>
+      <p id="alert-text"></p>
+    </div>
+  </div>
+  <footer class="footer">
+    <p style="margin-top:10px; text-align:center;">&copy; MIT License | Copyright (c) 2021-2023 David
+      HERNANDEZ</p>
+  </footer>
+  </div>
+</body>
+
+</html>

emhass/templates/index.html

@@ -1,10 +1,11 @@
+<!-- Index page html -->
 <!DOCTYPE html>
 <html class="adaptive">
 
 <head>
     <title>EMHASS: Energy Management Optimization for Home Assistant</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="static/style.css?version=1"> <!-- change version on stylesheet changes  -->
+    <link rel="stylesheet" type="text/css" href="static/style.css?version=1">
     <link rel="icon" type="image/x-icon" href="static/img/emhass_logo_short.svg">
     <script src="static/script.js"></script>
 </head>
@@ -14,19 +15,25 @@
     <div>
         <!-- Icons by feather https://github.com/feathericons/feather -->
         <div id="top-links">
+            <!-- configuration page  -->
+            <a href="configuration" title="Configuration Page" style="margin-right: 12px; cursor: pointer; z-index: 1">
+                <svg class="feather">
+                    <use class="feather" href="static/img/feather-sprite.svg#settings" />
+                </svg>
+            </a>
             <!-- advanced or basic page switch -->
-            <a id="basicOrAdvanced" style="margin-right: 24px; cursor: pointer; z-index: 1">
+            <a id="basicOrAdvanced" title="Advanced Toggle" style="margin-right: 24px; cursor: pointer; z-index: 1">
                 <svg class="feather">
                     <use class="feather" href="static/img/feather-sprite.svg#tool" />
                 </svg>
             </a>
             <a href="https://emhass.readthedocs.io/en/latest/">
-                <svg class="feather" style="margin-right: 12px;";>
+                <svg class="feather" title="EMHASS Docs" style="margin-right: 12px;" ;>
                     <use class="feather" href="static/img/feather-sprite.svg#book" />
                 </svg>
             </a>
             <a href="https://github.com/davidusb-geek/emhass" target="_blank" rel="noopener noreferrer">
-                <svg class="feather" style="margin-right: 0px;" >
+                <svg class="feather" title="EMHASS Git repo" style="margin-right: 0px;">
                     <use class="feather" href="static/img/feather-sprite.svg#git-branch" />
                 </svg>
             </a>
@@ -39,18 +46,18 @@
 
     <div class="center">
         <div id=TabSelection class="form">
-            <!-- Basic and Advance pages will be loaded here  -->
+            <!-- Basic and Advance pages will be dynamically loaded here  -->
         </div>
     </div>
-    <!-- alert box element (for json parse issue) -->
+    <!-- alert box element -->
     <div style="display: none;" id="alert" class="alert">
         <div>
             <span onclick="this.parentElement.parentElement.style.display='none';">&times;</span>
             <p id="alert-text"></p>
         </div>
     </div>
-    <!-- -->
     <br>
+
     <!-- dynamic table/diagram elements section -->
     </div>
     <div id="template"> <!-- table/diagram container element  -->
@@ -60,7 +67,7 @@
         </div>
         {% endfor %}
         <div>
-            <!-- -->
+
             <footer class="footer">
                 <p style="margin-top:10px; text-align:center;">&copy; MIT License | Copyright (c) 2021-2023 David
                     HERNANDEZ</p>