Initial commit with action

data/chota.css

@@ -0,0 +1 @@
+/*! chota.css v0.8.1 | MIT License | github.com/jenil/chota */:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#14854f;--color-lightGrey:#d2d6dd;--color-grey:#747681;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}*{scrollbar-color:var(--color-lightGrey) var(--bg-primary);scrollbar-width:thin}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-lightGrey)}body{background-color:var(--bg-color);color:var(--font-color);font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family-sans);font-size:var(--font-size);line-height:1.6;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--color-primary);text-decoration:none}a:hover:not(.button){opacity:.75}button{font-family:inherit}p{margin-top:0}blockquote{background-color:var(--bg-secondary-color);border-left:3px solid var(--color-lightGrey);padding:1.5rem 2rem}dl dt{font-weight:700}hr{background-color:var(--color-lightGrey);height:1px;margin:1rem 0}hr,table{border:none}table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}table.striped tr:nth-of-type(2n){background-color:var(--bg-secondary-color)}td,th{padding:1.2rem .4rem;vertical-align:middle}thead{border-bottom:2px solid var(--color-lightGrey)}tfoot{border-top:2px solid var(--color-lightGrey)}code,kbd,pre,samp,tt{font-family:var(--font-family-mono)}code,kbd{border-radius:4px;color:var(--color-error);font-size:90%;padding:.2em .4em;white-space:pre-wrap}code,kbd,pre{background-color:var(--bg-secondary-color)}pre{font-size:1em;overflow-x:auto;padding:1rem}pre code{background:none;padding:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--color-lightGrey)}iframe{border:0}.container{margin:0 auto;max-width:var(--grid-maxWidth);padding:0 calc(var(--grid-gutter)/2);width:96%}.row{-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.row,.row.reverse{-webkit-box-orient:horizontal}.row.reverse{-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col{-webkit-box-flex:1;-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc(8.33333% - var(--grid-gutter));flex:0 0 calc(8.33333% - var(--grid-gutter));max-width:calc(8.33333% - var(--grid-gutter))}.col-1,.col-2{-webkit-box-flex:0}.col-2{-ms-flex:0 0 calc(16.66667% - var(--grid-gutter));flex:0 0 calc(16.66667% - var(--grid-gutter));max-width:calc(16.66667% - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc(25% - var(--grid-gutter));flex:0 0 calc(25% - var(--grid-gutter));max-width:calc(25% - var(--grid-gutter))}.col-3,.col-4{-webkit-box-flex:0}.col-4{-ms-flex:0 0 calc(33.33333% - var(--grid-gutter));flex:0 0 calc(33.33333% - var(--grid-gutter));max-width:calc(33.33333% - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc(41.66667% - var(--grid-gutter));flex:0 0 calc(41.66667% - var(--grid-gutter));max-width:calc(41.66667% - var(--grid-gutter))}.col-5,.col-6{-webkit-box-flex:0}.col-6{-ms-flex:0 0 calc(50% - var(--grid-gutter));flex:0 0 calc(50% - var(--grid-gutter));max-width:calc(50% - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc(58.33333% - var(--grid-gutter));flex:0 0 calc(58.33333% - var(--grid-gutter));max-width:calc(58.33333% - var(--grid-gutter))}.col-7,.col-8{-webkit-box-flex:0}.col-8{-ms-flex:0 0 calc(66.66667% - var(--grid-gutter));flex:0 0 calc(66.66667% - var(--grid-gutter));max-width:calc(66.66667% - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc(75% - var(--grid-gutter));flex:0 0 calc(75% - var(--grid-gutter));max-width:calc(75% - var(--grid-gutter))}.col-10,.col-9{-webkit-box-flex:0}.col-10{-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-11,.coLine truncated

data/data_export.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>”
+
+<head>
+    <link rel="stylesheet" href="/chota.css">
+
+    <script>
+        if (window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.body.classList.add('dark');
+        }
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <nav class="nav" style="margin-bottom: 50px;">
+            <div class="nav-left">
+                <a class="brand" href="#">Watermeter</a>
+                <div class="tabs">
+                    <a href="/">Status</a>
+                    <a href="/settings">Settings</a>
+                    <a class="active" href="/export">Data export</a>
+                </div>
+            </div>
+            <div class="nav-right">
+                <a class="button outline">Button</a>
+            </div>
+        </nav>
+
+        <div class="card">
+            <header>
+                <h4>JSON</h4>
+            </header>
+            Hello json
+        </div>
+
+        <div class="card">
+            <header>
+                <h4>MQTT</h4>
+            </header>
+            Hello mqtt
+        </div>
+
+        <div class="card">
+            <header>
+                <h4>Email alert</h4>
+            </header>
+            Hello json
+        </div>
+
+
+
+    </div>
+</body>
+
+<style>
+    .card {
+        margin-bottom: 10px;
+    }
+</style>

data/settings.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>”
+
+<head>
+  <link rel="stylesheet" href="/chota.css">
+
+  <script>
+    if (window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.body.classList.add('dark');
+    }
+  </script>
+</head>
+
+<body>
+  <div class="container">
+    <nav class="nav" style="margin-bottom: 50px;">
+      <div class="nav-left">
+        <a class="brand" href="#">Watermeter</a>
+        <div class="tabs">
+          <a href="/">Status</a>
+          <a class="active" href="/settings">Settings</a>
+          <a href="/export">Data export</a>
+        </div>
+      </div>
+      <div class="nav-right">
+        <a class="button outline">Button</a>
+      </div>
+    </nav>
+
+
+    <fieldset id="form-settings">
+      <legend>Settings</legend>
+      <p>
+        <label for="input__text">Sensor max height (e.g. 4m)</label>
+        <input id="input__text" type="number" placeholder="Text Input">
+      </p>
+      <p>
+        <label for="input__password">Water max height</label>
+        <input id="input__password" type="number">
+      </p>
+      <p>
+        <label for="input__webaddress">Water min height</label>
+        <input id="input__webaddress" type="number">
+      </p>
+      <p>
+        <label for="input__emailaddress">Email Address</label>
+        <input id="input__emailaddress" type="number">
+      </p>
+
+      <p>
+        <button class="button primary" style="width: 100%;">Submit</button>
+      </p>
+    </fieldset>
+
+    <form action="/update_wifi_credentials" method="post">
+      <fieldset id="form-settings">
+        <legend>WiFi Settings</legend>
+        <p>
+          <label for="ssid">SSID</label>
+          <input id="ssid" name="ssid" type="text">
+        </p>
+        <p>
+          <label for="wifi_password">Password</label>
+          <input id="wifi_password" name="wifi_password" type="password">
+        </p>
+
+        <p>
+          <button class="button primary" style="width: 100%;">Submit</button>
+        </p>
+      </fieldset>
+    </form>
+
+
+
+
+
+
+  </div>
+</body>

data/status.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+
+<head>
+  <link rel="stylesheet" href="/chota.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+
+</head>
+
+<body>
+  <div class="container">
+    <nav class="nav" style="margin-bottom: 50px;">
+      <div class="nav-left">
+        <a class="brand" href="#">Watermeter</a>
+        <div class="tabs">
+          <a class="active" href="/">Status</a>
+          <a href="/settings">Settings</a>
+          <a href="/export">Data export</a>
+        </div>
+      </div>
+      <div class="nav-right">
+        <a class="button outline">Button</a>
+      </div>
+    </nav>
+
+    <div class="row">
+      <div class="col-12 col-3-lg">
+        <!--Sensor card-->
+        <div class="card">
+          <header>
+            <h4>Sensor information</h4>
+          </header>
+          <table class="tg">
+            <thead></thead>
+            <tbody>
+              <tr>
+                <td>Voltage: </td>
+                <td>12.12V</td>
+              </tr>
+              <tr>
+                <td>Current: </td>
+                <td>10 mA</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--ESP Infor card-->
+        <div class="card">
+          <header>
+            <h4>ESP information</h4>
+          </header>
+          <table class="tg">
+            <thead></thead>
+            <tbody>
+              <tr>
+                <td>Uptime: </td>
+                <td>132d</td>
+              </tr>
+              <tr>
+                <td>FW version: </td>
+                <td>0.2</td>
+              </tr>
+              <tr>
+                <td>Time/Date: </td>
+                <td>1.1.202022</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--WIFI card-->
+        <div class="card">
+          <header>
+            <h4>Connection Info</h4>
+          </header>
+          <table class="tg">
+            <thead></thead>
+            <tbody>
+              <tr>
+                <td>Type: </td>
+                <td>WiFi</td>
+              </tr>
+              <tr>
+                <td>IP: </td>
+                <td>127.0.0.1</td>
+              </tr>
+              <tr>
+                <td>RSSI: </td>
+                <td>good</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="col-12 col-7-lg">
+
+        <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
+
+      </div>
+      <div class="col-12 col-2-lg">
+
+        <div class="outer-wrapper">
+          <div class="column-wrapper">
+            <div class="column"></div>
+          </div>
+          <div class="percentage">25%</div>
+          <div class="value">2500 / 10000</div>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>
+
+
+</body>
+
+<style>
+  .outer-wrapper {
+    display: inline-block;
+    margin: 5px 15px;
+    padding: 25px 15px;
+    background: #eee;
+    min-width: 50px;
+  }
+
+  .column-wrapper {
+    height: 400px;
+    width: 20px;
+    background: #CFD8DC;
+    transform: rotate(180deg);
+    margin: 0 auto;
+  }
+
+  .column {
+    width: 20px;
+    height: 25%;
+    background: #1900ff;
+  }
+
+  .percentage,
+  .value {
+    margin-top: 10px;
+    padding: 5px 10px;
+    color: #FFF;
+    background: #263238;
+    position: relative;
+    border-radius: 4px;
+    text-align: center;
+  }
+
+  .value {
+    background: #7986CB;
+  }
+
+  .card {
+    margin-bottom: 10px;
+  }
+</style>
+
+<script>
+var xValues = [1,60,70,80,90,100,110,120,130,140,150];
+var yValues = [7,8,8,9,9,9,10,11,14,14,15];
+
+new Chart("myChart", {
+  type: "line",
+  data: {
+    labels: xValues,
+    datasets: [{
+      backgroundColor: "rgba(0,0,0,1.0)",
+      borderColor: "rgba(0,0,0,0.1)",
+      data: yValues
+    }]
+  },
+  options:{}
+});
+
+
+</script>