Start simple UI

7 years ago · 9e8502e21a
3 changed files with 92 additions and 12 deletions
--- a/home.html
+++ b/home.html
@ -1,8 +0,0 @@
-<html>
-<header>
-    <title>Home</title>
-</header>    
-<body>
-    <h1>{{ query }}</h1>
-</body>
-</html>
--- a/html/home.html
+++ b/html/home.html
@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="IoT around the house">
+    <title>Life Around</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
+
+    <!--[if lte IE 8]>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
+  <![endif]-->
+    <!--[if gt IE 8]><!-->
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
+    <!--<![endif]-->
+
+
+    <!--[if lte IE 8]>
+      <link rel="stylesheet" href="/combo/1.18.13?/css/layouts/blog-old-ie.css">
+    <![endif]-->
+    <!--[if gt IE 8]><!-->
+    <link rel="stylesheet" href="http://hq.10ninox.com/styles/blog.css">
+    <!--<![endif]-->
+    <!--[if lt IE 9]>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
+  <![endif]-->
+  <style>
+      .dash {
+          padding: 1em;
+          font-size: 16px;
+      }
+      .dash-one {
+          text-align: center;
+          font-size: 1.2em;
+          background: #33333322;
+          padding: 10px;
+          overflow: wrap;
+      }
+      .dash-one h2 {
+          font-size: 1.1em;
+          margin: 2px 5px;
+      }
+  </style>
+</head>
+
+<body>
+<div id="layout" class="pure-g">
+<div class="sidebar pure-u-1 pure-u-md-1-4">
+    <ul class="device-list"></ul>
+</div>
+<div class="content pure-u-1 pure-u-md-3-4"></div>
+</div>
+<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+<script src="http://code.highcharts.com/highcharts.js"></script>
+<script>
+(function () {
+    var baseUrl = 'http://localhost:8000',
+        allUrl = baseUrl + '/all',
+        $sidebar = $('.sidebar'),
+        $list = $sidebar.find('.device-list'),
+        $content = $('.content');
+    
+    var addToList = function(item) {
+        $list.append(
+            `<li><a href="#${item['device']}">` +
+            `${item["device"]}</a></li>`);
+    };
+
+    var addEleToDashBoard = function(item) {
+        var data = item['data'];
+        var str = `<div class="pure-u-md-1-2 dash">` +
+            `<h1>${item['device']}</h1>` +
+            `<div class="pure-u-md-1-3 dash-one"><h2>Temp</h2>${data['temperature']}</div>` +
+            `<div class="pure-u-md-1-3 dash-one"><h2>Moisture</h2>${data['moisture']}</div>` +
+            `</div>`;
+        $content.append(str);
+    };
+
+    $.getJSON(allUrl, function(data, textStatus, xhr) {
+        for (var i=0; i<data.length; i++) {
+            addToList(data[i]);
+            addEleToDashBoard(data[i]);
+        }
+    });
+})(jQuery);
+</script>
+</body>
+</html>
--- a/read_item.go
+++ b/read_item.go
@ -3,7 +3,6 @@ package main
 import (
 	"encoding/json"
 	"fmt"
-	"html/template"
 	"net/http"
 	"os"

@ -16,7 +15,7 @@ import (
 	"github.com/labstack/echo/middleware"
 )

-var tplHome = pongo2.Must(pongo2.FromFile("home.html"))
+var tplHome = pongo2.Must(pongo2.FromFile("html/home.html"))
 var sess *session.Session
 var err error
 var svc *dynamodb.DynamoDB
@ -28,9 +27,8 @@ func indexHandler(c echo.Context) error {
 	out, err := tplHome.Execute(pongo2.Context{"query": "dddd"})
 	if err != nil {
 		return err
-		// http.Error(w, err.Error(), http.StatusInternalServerError)
 	}
-	return c.Render(http.StatusOK, "home", template.HTML(out))
+	return c.HTML(http.StatusOK, out)
 }

 func healthCheckHandler(c echo.Context) error {