adding a web frontend

9bdc9105 · Christian Wander · a219b691 · 9bdc9105 · 9bdc9105 · 9bdc9105
Commit 9bdc9105 authored Dec 22, 2020 by Christian Wander
--- a/pixelframe/controllers.py
+++ b/pixelframe/controllers.py
@@ -5,6 +5,7 @@ import pixelframe.pixel_service as pixel_service

 @app.route('/')
 def main_page():
+    return render_template('main.html')
    return "This is the main page"


@@ -12,12 +13,12 @@ def main_page():
 def hello_method():
    return render_template('hello.html', name="foo")

-@app.route('/start')
+@app.route('/start', methods=["POST"])
 def start_pixels():
    pixel_service.doit()
    return "Started work."

-@app.route('/stop')
+@app.route('/stop', methods=["POST"])
 def stop_pixels():
    pixel_service.stopit()
    return "Stopped work"
--- a/pixelframe/static/main.css
+++ b/pixelframe/static/main.css
+body {
+    background-color: black;
+    color:coral;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+h1 {
+    color: pink;
+}
\ No newline at end of file
--- a/pixelframe/static/main.js
+++ b/pixelframe/static/main.js
+console.log("hello")
+
+document.getElementById("buttonOne").onclick = function() {
+    console.log("button one clicked")
+
+    fetch('start', { method: 'POST'})
+        .then(r => {
+            console.log(`Status: ${r.status}, text: ${r.statusText}`)
+        })
+
+}
+
+document.getElementById("buttonTwo").onclick = function() {
+    console.log("button two clicked")
+
+    fetch('stop', { method: 'POST'})
+        .then(r => {
+            console.log(`Status: ${r.status}, text: ${r.statusText}`)
+        })
+        
+}
\ No newline at end of file
--- a/pixelframe/templates/main.html
+++ b/pixelframe/templates/main.html
+<!doctype html>
+<html>
+<head>
+    <link rel="stylesheet" href="static/main.css" />
+</head>
+<body>
+
+    <title>Pixelframe</title>
+    <h1>Pixelframe</h1>
+    
+    <p>This is some text and even more text</p>
+    
+    {% if name %}
+    <p>Hello {{ name }}!</p>
+    {% else %}
+    <p>Hello, World!</p>
+    {% endif %}
+    
+    <button type="button" id="buttonOne">Start</button>
+    <button type="button" id="buttonTwo">Stop</button>
+    
+    <script src="static/main.js"></script>
+    
+</body>
+</html>
\ No newline at end of file