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 {