remove date from charts

Updates

See merge request kelder/pannenkoekenwachtrij!1

.gitignore

@@ -1,3 +1,13 @@
 .idea/
-*.pyc
-venv/
+*.db
+
+# vlang
+main
+v
+*.exe
+*.exe~
+*.so
+*.dylib
+*.dll
+vls.log
+.env

README.md

@@ -2,4 +2,4 @@
 
 De pannenkoekenwachtrij voor wanneer er pannenkoeken worden gebakken in de kelder.
 
-Server opzetten doe je door `FLASK_APP=main.py flask run` te runnen.
+Server opzetten doe je door `v run .` te runnen.

main.py

@@ -1,74 +0,0 @@
-from flask import Flask, render_template, request, redirect, url_for
-
-app = Flask(__name__)
-
-
-class Person:
-    statusses = ["Pannenkoek besteld", "Pannenkoek aan het bakken", "Pannenkoek klaar", "Pannenkoek afgegeven"]
-
-    def __init__(self, name, remark=""):
-        self.name = name
-        self.remark = remark.strip()
-        self.status = 0
-
-    def getRemark(self):
-        return "({})".format(self.remark) if self.remark else self.remark
-
-    def getName(self):
-        return self.name
-
-    def __eq__(self, other):
-        return self.name.lower() == other.name.lower()
-
-    def getStatus(self):
-        return self.statusses[self.status]
-
-    def nextStatus(self):
-        return self.statusses[self.status + 1]
-
-    def __str__(self):
-        return "Persoon: {} met status: {}".format(self.name, self.status)
-
-    def __repr__(self):
-        return str(self)
-
-
-people = []
-
-
-@app.route("/")
-def home():
-    return render_template("home.html", people=people)
-
-
-@app.route("/statusUpdate", methods=["POST", "GET"])
-def statusUpdate():
-    if people and request.method == "POST":
-        result = request.form
-        if "index" in result:
-            index = int(request.form["index"])
-            people[index].status += 1
-            if people[index].status == 3:
-                people.remove(people[index])
-        if "name" in result:
-            index = people.index(Person(request.form["name"]))
-            print(index)
-            people[index].status += 1
-            if people[index].status == 3:
-                people.remove(people[index])
-    return redirect("/")
-
-
-@app.route("/addPerson", methods=["POST", "GET"])
-def addPerson():
-    if request.method == "POST":
-        result = request.form
-        if "name" in result:
-            newPerson = Person(result["name"], result["remark"])
-            if newPerson not in people:
-                people.append(newPerson)
-    return redirect("/")
-
-
-if __name__ == "__main__":
-    app.run()

requirements.txt

@@ -1 +0,0 @@
-flask

src/main.v

@@ -0,0 +1,339 @@
+module main
+
+import vweb
+import db.sqlite
+import time
+import net.http
+import arrays
+import maps
+import math.stats
+
+const http_port = 8080
+
+enum Status {
+	besteld   = 0
+	bakken    = 1
+	klaar     = 2
+	afgegeven = 3
+}
+
+pub fn (s Status) str() string {
+	return match s {
+		.besteld { 'Pannenkoek besteld' }
+		.bakken { 'Pannenkoek aan het bakken' }
+		.klaar { 'Pannenkoek klaar' }
+		.afgegeven { 'Pannenkoek afgegeven' }
+	}
+}
+
+struct Person {
+	id            int       @[primary; sql: serial]
+	status        int
+	name          string
+	remark        string
+	order_time    time.Time
+	delivery_time time.Time
+}
+
+pub fn (p Person) str() string {
+	return 'Person[id:${p.id}, name: ${p.name}, status:${p.status}, time:${p.order_time}, end:${p.delivery_time}]'
+}
+
+pub fn (p Person) order_time_humanized() string {
+	return p.order_time.relative()
+}
+
+pub fn (p Person) remark() string {
+	return if p.remark.len > 0 {
+		'(${p.remark})'
+	} else {
+		''
+	}
+}
+
+pub fn (p Person) status_str() string {
+	unsafe {
+		s := Status(p.status)
+		return s.str()
+	}
+}
+
+// === Database ===
+
+pub fn create_db_connection() !sqlite.DB {
+	return sqlite.connect('pancakes.db')!
+}
+
+fn (mut app App) get_people() ![]Person {
+	status_filter := int(Status.afgegeven)
+	people := sql app.db {
+		select from Person where status < status_filter
+	}!
+	return people
+}
+
+fn (mut app App) get_finished_count() !int {
+	people := sql app.db {
+		select from Person where status == 3
+	}!
+	return people.len
+}
+
+struct PerHour {
+	t          time.Time
+	label      string
+	amount     int
+	percentage int
+	color      string
+}
+
+fn (mut app App) get_all() ![]Person {
+	return sql app.db {
+		select from Person order by id desc
+	}!
+}
+
+fn (mut app App) get_last_delivered() ![]Person {
+	return sql app.db {
+		select from Person order by delivery_time desc limit 1
+	}!
+}
+
+fn (mut app App) get_ordered_per_hour() ![]PerHour {
+	people := sql app.db {
+		select from Person
+	}!
+
+	grouped := arrays.group_by(people, fn (p Person) string {
+		return '${p.order_time.hour}:${int(p.order_time.minute / 30) * 30}'
+	})
+
+	max_per_hour := arrays.max(grouped.values().map(it.len)) or { 1 } + 10
+
+	mut grouped_arr := maps.to_array(grouped, fn [max_per_hour] (k string, v []Person) PerHour {
+		return PerHour{
+			t: v[0].order_time
+			label: k
+			amount: v.len
+			percentage: int(v.len * 100 / max_per_hour)
+			color: (if v[0].order_time.hour % 2 == 0 { 'green' } else { 'red' })
+		}
+	})
+	grouped_arr.sort(a.t < b.t)
+	return grouped_arr
+}
+
+fn (mut app App) get_finished_per_hour() ![]PerHour {
+	people := sql app.db {
+		select from Person where status == 3
+	}!
+
+	grouped := arrays.group_by(people, fn (p Person) string {
+		return '${p.order_time.hour}:${int(p.order_time.minute / 30) * 30}'
+	})
+
+	max_per_hour := arrays.max(grouped.values().map(it.len)) or { 1 } + 10
+
+	mut grouped_arr := maps.to_array(grouped, fn [max_per_hour] (k string, v []Person) PerHour {
+		return PerHour{
+			t: v[0].order_time
+			label: k
+			amount: v.len
+			percentage: int(v.len * 100 / max_per_hour)
+			color: (if v[0].order_time.hour % 2 == 0 { 'green' } else { 'red' })
+		}
+	})
+	grouped_arr.sort(a.t < b.t)
+	return grouped_arr
+}
+
+fn (mut app App) get_ppu() !f64 {
+	mut people := sql app.db {
+		select from Person where status == 3
+	}!
+	if people.len == 0 {
+		return 0
+	}
+	people.sort(a.order_time < b.order_time)
+	time_range := people.last().order_time - people.first().order_time
+	return people.len / time_range.hours()
+}
+
+fn (mut app App) get_mean_time_between_pannenkoeken() !time.Duration {
+	time_zero := time.Time{
+		unix: 0
+	}
+	mut people := sql app.db {
+		select from Person where (status == 3 && delivery_time > time_zero) order by delivery_time desc limit 10
+	}!
+	return stats.mean(arrays.window(people, size: 2).map(it[0].delivery_time - it[1].delivery_time))
+}
+
+fn (mut app App) get_last_done_person() ![]Person {
+	people := sql app.db {
+		select from Person where status == 3 order by delivery_time desc limit 1
+	}!
+	return people
+}
+
+fn (mut app App) get_next_person() ![]Person {
+	people := sql app.db {
+		select from Person where status < 3 order by id limit 1
+	}!
+	return people
+}
+
+fn (mut app App) do_status_update(user_id int) !Person {
+	people := sql app.db {
+		select from Person where id == user_id
+	}!
+	person := people.first()
+	sql app.db {
+		update Person set status = person.status + 1 where id == person.id
+	}!
+	if person.status == 2 {
+		sql app.db {
+			update Person set delivery_time = time.now() where id == person.id
+		}!
+	}
+	return person
+}
+
+fn (mut app App) do_add_person(name string, remark string) ! {
+	people := sql app.db {
+		select from Person where name == name && status < 3
+	}!
+
+	if people.len == 0 {
+		p := Person{
+			status: 0
+			order_time: time.now()
+			name: name
+			remark: remark
+		}
+		sql app.db {
+			insert p into Person
+		}!
+	}
+}
+
+// === WEB ===
+
+struct App {
+	vweb.Context
+mut:
+	db sqlite.DB
+}
+
+pub fn (mut app App) before_request() {
+	println('[Vweb] ${app.Context.req.method} ${app.Context.req.url}')
+}
+
+fn main() {
+	println('Start 🥞 webserver')
+	mut db := create_db_connection() or { panic(err) }
+
+	sql db {
+		create table Person
+	} or { panic('error on create table: ${err}') }
+
+	// db.close() or { panic(err) }
+
+	vweb.run(&App{
+		db: db
+	}, http_port)
+}
+
+@['/'; get]
+pub fn (mut app App) home() vweb.Result {
+	people := app.get_people() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	person_finished_count := app.get_finished_count() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	finished_per_hour := app.get_finished_per_hour() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	ordered_per_hour := app.get_ordered_per_hour() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	// pannenkoek per uur
+	ppu := app.get_ppu() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	all_people := app.get_all() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	mean_time := app.get_mean_time_between_pannenkoeken() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	mut last_delivered := app.get_last_delivered() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	if last_delivered.len == 0 {
+		last_delivered << Person{
+			delivery_time: time.now()
+		}
+	}
+	// Time to pannenkoek
+	time_since_last := (time.now() - last_delivered.first().delivery_time)
+	ttp := time.unix(i64(mean_time.seconds() - time_since_last.seconds())) - time.unix(0)
+
+	return $vweb.html()
+}
+
+@['/banner'; get]
+pub fn (mut app App) banner() vweb.Result {
+	last_done := app.get_last_done_person() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	next_person := app.get_next_person() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+	now := time.now()
+
+	return $vweb.html()
+}
+
+@['/status_update'; post]
+pub fn (mut app App) status_update() vweb.Result {
+	if person := app.do_status_update(app.form['id'].int()) {
+		if person.status == 1 {
+			spawn fn () {
+				http.post('http://10.1.0.224:8080/blink', '') or {}
+			}()
+			spawn fn (name string) {
+				http.post('http://10.1.2.3', 'ScrollingText >>> ${name} <<< Enjoy! ') or {}
+				http.post('http://10.1.2.3', 'Option text_trailingWhitespace 1') or {}
+			}(person.name)
+		}
+	}
+
+	return app.redirect('/')
+}
+
+@['/add_person'; post]
+pub fn (mut app App) add_person() vweb.Result {
+	name := app.form['name']
+	if name.len == 0 {
+		return app.redirect('/')
+	}
+
+	app.do_add_person(app.form['name'], app.form['remark']) or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
+
+	return app.redirect('/')
+}

src/templates/banner.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.5">
+    <title>🥞wachtrij</title>
+    <link href="https://cdn.jsdelivr.net/npm/tuicss@@2.1.1/dist/tuicss.min.css" rel="stylesheet" />
+    <style>
+        .tui-window {
+            width: 100%;
+        }
+
+        .col {
+            width: 100%;
+        }
+
+        .row {
+            margin-bottom: 20px;
+        }
+
+        td,
+        th {
+            text-align: center;
+        }
+
+        .tui-table tbody tr td {
+            padding-bottom: 20px;
+        }
+    </style>
+    <script>
+        setInterval(function(){
+            location.reload()
+        }, 1000)
+    </script>
+</head>
+
+<body class="tui-bg-green-black">
+    <div style="margin: auto; width: 60%; margin-top: 40px;">
+        <div class="container" style="width: 100%">
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <h1>Previous pancake</h1>
+                            @if last_done.len > 0
+                                @{now - last_done[0].delivery_time}
+                            @else
+                                No pancakes done yet
+                            @end
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <h1>NEXT UP</h1>
+                            @if next_person.len > 0
+                                @{next_person[0].name}
+                            @else
+                                Nobody in the queue
+                            @end
+                        </fieldset>
+        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

src/templates/home.html

@@ -0,0 +1,270 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.5">
+    <title>🥞wachtrij</title>
+    <link href="https://cdn.jsdelivr.net/npm/tuicss@@2.1.1/dist/tuicss.min.css" rel="stylesheet" />
+    <style>
+        .tui-window {
+            width: 100%;
+        }
+
+        .col {
+            width: 100%;
+        }
+
+        .row {
+            margin-bottom: 20px;
+        }
+
+        td,
+        th {
+            text-align: center;
+        }
+
+        .tui-table tbody tr td {
+            padding-bottom: 20px;
+        }
+    </style>
+</head>
+
+<body class="tui-bg-green-black">
+    <div style="margin: auto; width: 60%; margin-top: 40px;">
+        <div class="container" style="width: 100%">
+            <div class="row">
+                <div class="col m6">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            Welkom bij de 🥞wachtrij
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="col m6">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            Er zijn al @person_finished_count 🥞 afgeleverd!
+                            <br />
+                            Dat is @{ppu:.2} 🥞/uur
+                            <br />
+                            Gemiddelde tijd tussen 🥞: @{mean_time.str()}
+                            <br/>
+                            <span id="ttp">
+                            TTP:
+                            @if ttp < 0
+                                Soon™
+                            @else
+                                @ttp
+                            @end
+                            </span>
+                            <script>
+                                function time_left_string(time_left) {
+                                    let minutes = Math.floor(time_left / 60000);
+                                    let seconds = Math.floor((time_left - minutes * 60000) / 1000);
+                                    if (seconds < 10) {
+                                        seconds = "0" + seconds;
+                                    }
+                                    return minutes + ":" + seconds + ".000";
+                                }
+
+                                let ttp = new Date(@ttp.milliseconds())
+                                console.log(ttp)
+                                if (ttp.getTime() > 0){
+                                    const ttp_span = document.getElementById('ttp')
+                                    console.log('sd')
+                                    setInterval(function(){
+                                        console.log(ttp.getTime())
+                                        ttp.setTime(ttp.getTime() - 1000)
+                                        console.log(ttp.getTime())
+                                        console.log('----')
+                                        if (ttp.getTime() <= 0) {
+                                            ttp_span.innerText = "TTP: Soon™"
+                                        } else {
+                                            ttp_span.innerText = "TTP: " + time_left_string(ttp)
+                                        }
+                                    }, 1000)
+                                }
+                                
+                            </script>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <form action="/add_person" method="POST">
+                                <div class="row">
+                                    <div class="col m12" style="display: inline-flex">
+                                        Naam van de volgende:
+                                        <input class="tui-input" type="text" id="name" name="name"
+                                            style="margin-left: 10px; flex: 1">
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col m12" style="display: inline-flex">
+                                        Specifieke opmerkingen:
+                                        <input class="tui-input" type="text" id="remark" name="remark"
+                                            style="margin-left: 10px; flex: 1">
+                                    </div>
+                                </div>
+                                <div class="row" style="margin-bottom: 10px">
+                                    <div class="col m12" style="display: inline-flex">
+                                        <input class="tui-button green-168" type="submit" value="Persoon toevoegen"
+                                            style="flex: 1; margin-bottom: 0px;">
+                                    </div>
+                                </div>
+                            </form>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+            @if people.len > 0
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <form action="/status_update" method="POST">
+                                <input type="hidden" name="id" value="@{people[0].id}">
+                                <input class="tui-button green-168" type="submit" value="Update First Person"
+                                    style="width: 100%">
+                            </form>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+            @end
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <h2>Zie hieronder de lijst van personen die een 🥞 willen</h2>
+                            <table class="tui-table" style="width: 100%">
+                                <tbody>
+                                    <tr>
+                                        <td colspan="4"
+                                            style="text-align:center; vertical-align:middle; padding-top: 20px">Volgende
+                                            persoon</td>
+                                    </tr>
+                                    @if people.len > 0
+                                    @for person in people[..1]
+                                    <tr>
+                                        <td>@person.name @person.remark()</td>
+                                        <td>@person.status_str()</td>
+                                        <td>@person.order_time_humanized()</td>
+                                        <td>
+                                            <form action="/status_update" method="POST">
+                                                <input type="hidden" name="id" value="@person.id">
+                                                <input class="tui-button green-168" type="submit" value="Update">
+                                            </form>
+                                        </td>
+                                    </tr>
+                                    @end
+                                    @end
+                                    <tr>
+                                        <td colspan="4" style='text-align:center; vertical-align:middle'>Andere personen
+                                        </td>
+                                    </tr>
+                                    @if people.len > 1
+                                    @for person in people[1..]
+                                    <tr>
+                                        <td>@person.name @person.remark()</td>
+                                        <td>@person.status_str()</td>
+                                        <td>@person.order_time_humanized()</td>
+                                        <td>
+                                            <form action="/status_update" method="POST">
+                                                <input type="hidden" name="id" value="@person.id">
+                                                <input class="tui-button green-168" type="submit" value="Update">
+                                            </form>
+                                        </td>
+                                    </tr>
+                                    @end
+                                    @end
+                                </tbody>
+                            </table>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col m12">
+                    <div class="tui-window red-168">
+                        <fieldset class="tui-fieldset">
+                            <h2>Aantal gebakken 🥞</h2>
+                            <div class="tui-chart-vertical" style="width: 100%; height: 200px;">
+                                <div class="tui-chart-display">
+                                    @for ph in finished_per_hour
+                                    <div class="tui-chart-value @ph.color-168" style="height: @{ph.percentage}%;">
+                                        @ph.amount</div>
+                                    @end
+                                </div>
+                                <!-- <div class="tui-chart-y-axis">
+                                    <div class="tui-chart-legend">100%</div>
+                                    <div class="tui-chart-legend">75%</div>
+                                    <div class="tui-chart-legend">50%</div>
+                                    <div class="tui-chart-legend">25%</div>
+                                </div> -->
+                                <div class="tui-chart-x-axis">
+                                    @for ph in finished_per_hour
+                                    <div class="tui-chart-legend">@ph.label</div>
+                                    @end
+                                </div>
+                            </div>
+                        </fieldset>
+                        <fieldset class="tui-fieldset">
+                            <h2>Aantal bestelde 🥞</h2>
+                            <div class="tui-chart-vertical" style="width: 100%; height: 200px;">
+                                <div class="tui-chart-display">
+                                    @for ph in ordered_per_hour
+                                    <div class="tui-chart-value @ph.color-168" style="height: @{ph.percentage}%;">
+                                        @ph.amount</div>
+                                    @end
+                                </div>
+                                <!-- <div class="tui-chart-y-axis">
+                                    <div class="tui-chart-legend">100%</div>
+                                    <div class="tui-chart-legend">75%</div>
+                                    <div class="tui-chart-legend">50%</div>
+                                    <div class="tui-chart-legend">25%</div>
+                                </div> -->
+                                <div class="tui-chart-x-axis">
+                                    @for ph in ordered_per_hour
+                                    <div class="tui-chart-legend">@ph.label</div>
+                                    @end
+                                </div>
+                            </div>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- <table class="container tui-window">
+            <thead>
+                <tr>
+                    <th>id</th>
+                    <th>name</th>
+                    <th>remark</th>
+                    <th>status</th>
+                    <th>order time</th>
+                    <th>delivery time</th>
+                </tr>
+            </thead>
+            <tbody>
+                @for p in all_people
+                <tr>
+                    <td>@p.id</td>
+                    <td>@p.name</td>
+                    <td>@p.remark</td>
+                    <td>@p.status</td>
+                    <td>@p.order_time</td>
+                    <td>@p.delivery_time</td>
+                </tr>
+                @end
+            </tbody>
+        </table> -->
+    </div>
+</body>
+
+</html>

templates/home.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <style>
-        body {
-        background-color: #303030;
-        color: white;
-        }
-    </style>
-    <meta charset="UTF-8">
-    <title>Pannenkoekenwachtrij</title>
-</head>
-<body>
-<header>
-    <h1>Welkom bij de pannenkoekenwachtrij</h1>
-
-    <form action="/addPerson" method="POST">
-        <p>Naam van de volgende <input type="text" name="name"></p>
-        <p>Specifieke opmerkingen <input type="text" name="remark"></p>
-        <p><input type="submit" value="Persoon toevoegen"></p>
-    </form>
-
-    <form action="/statusUpdate" method="POST">
-        <input type="hidden" name="index" value="0">
-        <p><input type="submit" value="Update First Person"></p>
-    </form>
-
-    <h2>Zie hieronder de lijst van personen die een pannenkoek willen</h2>
-    <h3>Volgende Persoon:</h3>
-        {% if people %}
-        <tr>
-           <th>{{ people[0].getName() + people[0].getRemark() + ": " }}</th>
-           <td>{{ "Huidige status: " + people[0].getStatus() }}</td>
-        </tr>
-        {% endif %}
-    <h3>Andere Personen:</h3>
-    <table>
-        {% for person in people[1:] %}
-            <tr>
-                <td>
-                    <form action="/statusUpdate" method="POST">
-                        <input type="hidden" name="name" value="{{ person.getName() }}">
-                        <input type="submit" value="Update">
-                    </form>
-                </td>
-                <th>{{ person.getName() + person.getRemark() + ": " }}</th>
-                <td>{{ "Huidige status: " + person.getStatus() }}</td>
-            </tr>
-        {% endfor %}
-    </table>
-</header>
-</body>
-</html>

v.mod

@@ -0,0 +1,8 @@
+Module {
+	name: 'pannenkoekenwachtrij'
+	description: 'pannenkoekenvvachtrij'
+	version: '2.0.0'
+	license: 'MIT'
+	repo_url: 'https://git.zeus.gent/Kelder/pannenkoekenwachtrij'
+	dependencies: []
+}