added map

.codio

@@ -4,6 +4,7 @@
         "Run App": "cd /home/codio/workspace/location_app; . venv/bin/activate; flask run"
   },
   "preview": {
-        "URL": "http://{{domain3000}}/"
+        "Current File": "http://{{domain}}/{{filepath}}",
+        "URL": "https://{{domain3000}}/"
   }
 }

location_app/app/configuration.cfg

@@ -6,4 +6,5 @@ MQTT_TLS_ENABLED=True
 MQTT_TLS_INSECURE=True
 MQTT_TLS_CA_CERTS='mqtt.coventry.ac.uk.crt'
 MQTT_REFRESH_TIME=1.0
-TEMPLATES_AUTO_RELOAD=True
+TEMPLATES_AUTO_RELOAD=True
+SECRET_KEY='\xd3\x889_\xad\x05$\x0c\xe3\x8fn\xfa\xaeQ\n\xfb\xc1\xc8\x07>\xe9\x97\x07*\r\x12\xcd\x0b\xd8\xa3'

location_app/app/functions/data_tools/data_getter.py

@@ -45,7 +45,6 @@ def get_locations():
         res = cur.execute(f"SELECT DISTINCT * From Location ORDER BY tid, timestamp;")
         for tid, batt, lon, lat, city, road, tst, in res:
             rtst = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(tst))
-            locations.append([tid, batt, lon, lat, city, road, rtst])
-    print(locations)
+            locations.append([tid, batt, lon, lat, city, road, rtst.split(" ")[0], rtst.split(" ")[1]])
     return locations
 

location_app/app/routes/__init__.py

@@ -1,4 +1,7 @@
-from .login import main_bl
+from .main import main_bl
+from .map import map_bl
+
 
 def init_app(app):
-    app.register_blueprint(main_bl)
+    app.register_blueprint(main_bl)
+    app.register_blueprint(map_bl, url_prefix="/map")

location_app/app/routes/main.py

@@ -0,0 +1,9 @@
+from flask import Blueprint, render_template, request, url_for, escape, redirect, session
+from app.functions.auth import password_check
+from app.functions.data_tools import data_getter
+
+main_bl = Blueprint('main', __name__)
+
+@main_bl.route("/", methods = ["GET", "POST"])
+def index():
+    return render_template("main_index.html", locations = data_getter.get_locations(), username = session['username'])

location_app/app/routes/map.py

@@ -0,0 +1,8 @@
+from flask import Blueprint, render_template, request, session, url_for, escape, redirect
+from app.functions.data_tools import data_getter
+
+map_bl = Blueprint('map', __name__)
+
+@map_bl.route("/", methods = ["GET", "POST"])
+def index():
+    return render_template("map_index.html")

location_app/app/static/css/base.css

@@ -1,3 +1,17 @@
+* {
+    margin: 0;
+    padding: 0;
+}
 body {
-    background-color: red;
+    background-image: url('../img/earth.jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    font-family: Gill Sans, sans-serif;
+    font-variant: small-caps;
+    display: grid;
+    grid-template-columns: 0.5fr 9fr 0.5fr;
+    grid-template-rows: 1fr;
+    grid-template-areas:
+        '. container .';
 }

location_app/app/static/css/main_index.css

@@ -0,0 +1,69 @@
+.container {
+    background-color: white;
+    grid-area: container;
+    display: grid;
+    grid-template-columns: 1fr 4fr 4fr 4fr 4fr 1fr;
+    grid-template-rows: 1.5fr auto 1.5fr 5fr 1.5fr auto 1.5fr;
+    grid-template-areas:
+        '. . . . . .'
+        '. title title title title .'
+        '. . . . . .'
+        '. b_prof b_map b_test b_logo .'
+        '. . . . . .'
+        '. c_main c_main c_main c_main .'
+        '. . . . . .';
+}
+.title {
+    grid-area: title;
+    display: grid;
+}
+.title_text {
+    margin: 20px;
+    justify-self: center;
+    align-self: center;
+    text-shadow: 0 1px 0 #ccc,
+               0 2px 0 #c9c9c9,
+               0 3px 0 #bbb,
+               0 4px 0 #b9b9b9,
+               0 5px 0 #aaa,
+               0 6px 1px rgba(0,0,0,.1),
+               0 0 5px rgba(0,0,0,.1),
+               0 1px 3px rgba(0,0,0,.3),
+               0 3px 5px rgba(0,0,0,.2),
+               0 5px 10px rgba(0,0,0,.25),
+               0 10px 10px rgba(0,0,0,.2),
+               0 20px 20px rgba(0,0,0,.15);
+    font-size: 7vw;
+}
+.button_main {
+    text-align: center;
+    display: grid;
+}
+.button_main button {
+    justify-self: center;
+    align-self: center;
+    width: 80%;
+    font-size: 2vw;
+    border-radius: 10em;
+}
+.button_profile {
+    grid-area: b_prof;
+}
+.button_map {
+    grid-area: b_map;
+}
+.button_3 {
+    grid-area: b_test;
+}
+.button_logout {
+    grid-area: b_logo;
+}
+.content_main {
+    grid-area: c_main;
+}
+tr:nth-child(even) {
+    background-color: #00f0f0;
+}
+.table_main {
+    width: 100%;
+}

location_app/app/static/js/test.js

@@ -0,0 +1,45 @@
+var map;
+var mapLat = 52.407633; 
+var mapLng = -1.496947; 
+var mapDefaultZoom = 12;
+
+function initialize_map() {
+    map = new ol.Map({
+        target: "map",
+        layers: [
+                new ol.layer.Tile({
+                                source: new ol.source.OSM({
+                                    url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                                    })
+                                  })
+                ],
+        view: new ol.View({
+            center: ol.proj.fromLonLat([mapLng, mapLat]),
+            zoom: mapDefaultZoom
+
+           })
+       });
+    }
+
+function add_map_point() {
+    for (i=0; i<lat.length; i++) 
+    {
+        var vectorLayer = new ol.layer.Vector({
+            source:new ol.source.Vector({
+                features: [new ol.Feature({
+                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng[i]), parseFloat(lat[i])], 'EPSG:4326', 'EPSG:3857')),
+                })]
+             }),
+            style: new ol.style.Style({
+                image: new ol.style.Icon({
+                    anchor: [0.5, 0.5],
+                    anchorXUnits: "fraction",
+                    anchorYUnits: "fraction",
+                    src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg" //get an image for our red dot
+                    })
+                })
+            });
+
+        map.addLayer(vectorLayer);
+    }
+}

location_app/app/templates/base.html

@@ -6,13 +6,12 @@
     <meta charset="utf-8">
     <meta name="description" content="">
     <meta name="author" content="">
+    {% block js %}{% endblock %}
     <title>{% block title %}{% endblock %}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
+    <link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet" />
     {% block css %}{% endblock %}
 </head>
 
-<body>
-    {% block body %}{% endblock %}
-</body>
+{% block body %}{% endblock %}
 
 </html>

location_app/app/templates/main_index.html

@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+
+{% block title %} Main {% endblock %} 
+
+{% block css %}
+
+<link href="{{ url_for('static', filename='css/main_index.css') }}" rel="stylesheet" />
+
+{% endblock %}
+
+{% block body %}
+<body>
+    <div class="container">
+        <div class="title">
+            <p class="title_text">Trackmaster</p>
+        </div>
+        <div class="button_main button_profile">
+            <button class="main_button">Profile</button>
+        </div>
+        <div class="button_main button_map">
+            <button class="main_button">Map</button>
+        </div>
+        <div class="button_main button_3">
+            <button class="main_button">Test</button>
+        </div>
+        <div class="button_main button_logout">
+            <button class="main_button">Logout</button>
+        </div>
+        <div class="content_main">
+            <table class="table_main">
+                <caption class="table">Locations</caption>
+                <tr>
+                    <th>ID</th>
+                    <th>Battery</th>
+                    <th>Longitude</th>
+                    <th>Latitude</th>
+                    <th>City</th>
+                    <th>Road</th>
+                    <th>Date</th>
+                    <th>Time</th>
+                </tr>
+                {% for item in locations %} {% if item[0] == username %}
+                <tr>
+                    <td>{{ item[0] }}</td>
+                    <td>{{ item[1] }} %</td>
+                    <td>{{ item[2] }}</td>
+                    <td>{{ item[3] }}</td>
+                    <td>{{ item[4] }}</td>
+                    <td>{{ item[5] }}</td>
+                    <td>{{ item[6] }}</td>
+                    <td>{{ item[7] }}</td>
+                </tr>
+                {% endif %}{% endfor %}
+            </table>
+        </div>
+    </div>
+</body>
+
+
+{% endblock %}
+
+