felix/Kurswerkstatt-Pan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added schedule manager

Browse Source
This commit is contained in:
Felix Steghofer
2019-11-20 19:28:06 +01:00
parent 7ed00ab870
commit 77379f5520
5 changed files with 395 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
Impressum.html
View File

@@ -1,125 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Kurswerkstatt Pfarrkirchen</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom fonts for this template -->
<link
href="vendor/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
rel="stylesheet"
type="text/css"
/>
<!-- Plugin CSS -->
<link
href="vendor/magnific-popup/magnific-popup.css"
rel="stylesheet"
type="text/css"
/>
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"
>Kurswerkstatt</a
>
<button
class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
Menu <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#info"
>Info</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#aktuelles"
>Aktuelles</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#yoga"
>Yoga</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#mama"
>Mama/Baby</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#physio"
>Physio</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#team"
>Team</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead bg-primary text-white text-center">
<div class="container">
<img
class="img-fluid mb-0 d-block mx-auto"
src="img/white.png"
alt=""
height="30%"
width="30%"
/>
</div>
</header>
</body>
</html>

99
backend/api.py Normal file
View File

@@ -0,0 +1,99 @@
#!/usr/bin/env python3
"""
Very simple HTTP server in python for logging requests
Usage::
./server.py [<port>]
"""
from http.server import BaseHTTPRequestHandler, HTTPServer
import json
import logging
import os
import datetime
class S(BaseHTTPRequestHandler):
def do_OPTIONS(self):
self.send_response(200, "ok")
# TODO remove in production
self.send_header('Access-Control-Allow-Origin', '*')
# TODO remove in production
self.send_header('Access-Control-Allow-Methods', 'GET, OPTIONS')
# TODO remove in production
self.send_header("Access-Control-Allow-Headers", "X-Requested-With")
# TODO remove in production
self.send_header("Access-Control-Allow-Headers", "Content-Type")
self.end_headers()
def do_GET(self):
self.send_response(200)
self.send_header('Content-Type', 'application/json')
self.end_headers()
with open('schedule.json', 'r') as file:
schedule_string = json.load(file)
self.wfile.write(json.dumps(schedule_string).encode('utf-8'))
def do_POST(self):
self.send_response(200, "ok")
# TODO remove in production
self.send_header('Access-Control-Allow-Origin', '*')
# TODO remove in production
self.send_header('Access-Control-Allow-Methods', 'GET, OPTIONS')
# TODO remove in production
self.send_header("Access-Control-Allow-Headers", "X-Requested-With")
# TODO remove in production
self.send_header("Access-Control-Allow-Headers", "Content-Type")
self.end_headers()
content_length = int(self.headers['Content-Length'])
request_raw = self.rfile.read(content_length)
request_content = json.loads(request_raw)
schedule = request_content['schedule']
pw = request_content['pw']
caption = request_content['caption']
heading = request_content['heading']
if pw != '123':
self.send_response(401)
self.send_header('Content-Type', 'text/html')
self.end_headers()
self.wfile.write("Unauthorized".encode('utf-8'))
schedule_and_caption = {}
schedule_and_caption['schedule'] = schedule
schedule_and_caption['caption'] = caption
schedule_and_caption['heading'] = heading
now = datetime.datetime.now()
try:
os.rename('schedule.json', 'schedule_{}.json'.format(now.strftime("%Y%m%d")))
except Exception:
logging.info('Backup exists, did not backup..')
pass
with open('schedule.json', 'w') as file:
json.dump(schedule_and_caption, file)
self.send_response(200)
self.send_header('Content-Type', 'text/html')
self.end_headers()
self.wfile.write("New schedule set".encode('utf-8'))
def run(server_class=HTTPServer, handler_class=S, port=8080):
logging.basicConfig(level=logging.INFO)
server_address = ('', port)
httpd = server_class(server_address, handler_class)
logging.info('Starting httpd...\n')
try:
httpd.serve_forever()
except KeyboardInterrupt:
pass
httpd.server_close()
logging.info('Stopping httpd...\n')
if __name__ == '__main__':
from sys import argv
if len(argv) == 2:
run(port=int(argv[1]))
else:
run()

1
backend/schedule-example.json Normal file
View File

@@ -0,0 +1 @@
{"schedule": {"Montag": [{"from": "09:00", "to": "10:15", "title": "Hatha Joga"}, {"from": "10:30", "to": "11:45", "title": "Joga f\u00fcr Schwangere"}, {}, {"title": ""}, {"from": "", "to": "", "title": ""}, {}], "Dienstag": [{}, {}, {"from": "15:30", "to": "16:30", "title": "Musikgarten"}, {"from": "18:00", "to": "19:30", "title": "Hatha/Vinjasa Yoga"}, {}, {}], "Mittwoch": [{"from": "09:00", "to": "10:15", "title": "R\u00fcckbildung"}, {"from": "10:30", "to": "11:30", "title": "Fit f\u00fcr Dich"}, {}, {}, {}, {}], "Donnerstag": [{"from": "09:00", "to": "10:00", "title": "Babymassage"}, {"from": "10:00", "to": "11:15", "title": "R\u00fcckbildung"}, {}, {}, {}, {}], "Freitag": [{"from": "09:00", "to": "10:30", "title": "Stilltreff * 2 w\u00f6chentlich"}, {}, {"from": "16:00", "to": "19:00", "title": "Geburtsvorbereitung"}, {}, {}, {}], "Samstag": [{"from": "09:00", "to": "12:00", "title": "Geburtsvorbereitung"}, {}, {}, {}, {}, {}]}, "caption": "* mit Stillberaterin und Kinderkrankenschwester Rhianon Grill\nf\u00fcr mehr Angebote rund um Mama/Baby www.stillberatungimrottal.de"}

202
schedule.html Normal file
View File

@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- production version, optimized for size and speed -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<title>Stundenplan Pflege</title>
<style>
#editmode table, th, td {
border: 1px solid black;
}
#editmode input {
border: 0;
/* color: white;
background-color: #996861; */
}
#editmode #item-title textarea {
border: 1px dotted grey;
text-align: center;
}
#editmode #item-reset {
color: rgb(211, 206, 206);
}
#readonlydiv {
color: white;
background-color: #996861;
font-family: sans-serif;
font-size: large;
}
#readonly-heading {
font-size: x-large;
padding-left: 30px;
}
#readonly-table {
border:none;
border-collapse: collapse;
background-color: #996861;
}
#readonly-table th {
border-top: none;
border-bottom: 4px solid white;
border-left: 4px solid white;
border-right: 4px solid white;
padding: 15px;
}
#readonly-table td {
border-left: 4px solid white;
border-right: 4px solid white;
border-top: none;
border-bottom: none;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
#readonly-table th:first-child {
border-left: none;
}
#readonly-table th:last-child {
border-right: none;
}
#readonly-table td:first-child {
border-left: none;
}
#readonly-table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<div id="app">
<input type="button"
v-on:click="scheduleToImage()"
value="Bild speichern">
<div id="readonlydiv">
<p id="readonly-heading">{{heading}}</p>
<table id="readonly-table"
ref="table">
<tr>
<th v-for="day in Object.keys(scheduleData)">{{ day }}</th>
</tr>
<tr v-for="slot in amountSlots">
<td v-for="day in Object.keys(scheduleData)">
<div v-if="getSchuduleItem(day, slot).to">
<p id="item-time"><span>{{getSchuduleItem(day, slot).from}}</span> - <span>{{getSchuduleItem(day, slot).to}}</span></p>
<p id="item-title"><span style="white-space: pre-line;">{{getSchuduleItem(day, slot).title}}</span></p>
</div>
</td>
</tr>
</table>
<p style="text-align: center"><span style="white-space: pre-line;">{{caption}}</span></p>
</div>
<div id="editmode">
<input type="text"
v-model="heading">
<table id="table"
ref="table"
style="border: 1px solid">
<tr>
<th v-for="day in Object.keys(scheduleData)">{{ day }}</th>
</tr>
<tr v-for="slot in amountSlots">
<td v-for="day in Object.keys(scheduleData)">
<div>
<p id="item-time"><input id="item-from"
max="20:00"
min="09:00"
step="900"
type="time"
v-model="getSchuduleItem(day, slot).from"> - <input id="item-to"
max="20:00"
min="09:00"
step="900"
type="time"
v-model="getSchuduleItem(day, slot).to"></p>
<p id="item-title">
<textarea v-model="getSchuduleItem(day, slot).title"></textarea></p>
</div>Eingaben löschen
</td>
</tr>
</table><input style="border: 1px solid black"
type="text"
v-model="pw"
v-on:click="pw=undefined">
<textarea cols="50"
rows="4"
v-model="caption"></textarea> <input type="submit"
v-on:click="saveSchedule()"
value="Speichern"> <input type="button"
v-on:click="exportSchedule()"
value="Datei exportieren">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: () => {
return {
amountSlots: 6,
pw: "Passwort",
heading: "Stundenplan 2019",
caption: "* mit Stillberaterin und Kinderkrankenschwester Rhianon Grill\nf\u00fcr mehr Angebote rund um Mama/Baby www.stillberatungimrottal.de",
scheduleData:{"Montag": [{"from": "09:00", "to": "10:15", "title": "Hatha Joga"}, {"from": "10:30", "to": "11:45", "title": "Joga f\u00fcr Schwangere"}, {}, {"title": ""}, {"from": "", "to": "", "title": ""}, {}], "Dienstag": [{}, {}, {"from": "15:30", "to": "16:30", "title": "Musikgarten"}, {"from": "18:00", "to": "19:30", "title": "Hatha/Vinjasa Yoga"}, {}, {}], "Mittwoch": [{"from": "09:00", "to": "10:15", "title": "R\u00fcckbildung"}, {"from": "10:30", "to": "11:30", "title": "Fit f\u00fcr Dich"}, {}, {}, {}, {}], "Donnerstag": [{"from": "09:00", "to": "10:00", "title": "Babymassage"}, {"from": "10:00", "to": "11:15", "title": "R\u00fcckbildung"}, {}, {}, {}, {}], "Freitag": [{"from": "09:00", "to": "10:30", "title": "Stilltreff * 2 w\u00f6chentlich"}, {}, {"from": "16:00", "to": "19:00", "title": "Geburtsvorbereitung"}, {}, {}, {}], "Samstag": [{"from": "09:00", "to": "12:00", "title": "Geburtsvorbereitung"}, {}, {}, {}, {}, {}]}
}
},
methods: {
getSchuduleItem: function(day, slot) {
return this.scheduleData[day][slot-1];
},
resetScheduleItem: function(day, slot) {
this.scheduleData[day][slot-1].from = undefined;
this.scheduleData[day][slot-1].to = undefined;
this.scheduleData[day][slot-1].title = undefined;
},
saveSchedule: function() {
var xhr = new XMLHttpRequest();
// xhr.open("POST", "https://kurswerkstatt-pan.de/api/schedule", true);
xhr.open("POST", "http://localhost:8080", true);
xhr.setRequestHeader('Content-Type', 'application/html');
xhr.onload = function(e) {
alert("Gespeichert")
}
xhr.onerror = function(e) {
alert("Fehler: \"Datei exportieren\"-Button klicken und Datei Felix schicken")
}
xhr.send(JSON.stringify({
pw: this.pw,
schedule: this.scheduleData,
caption: this.caption,
heading: this.heading
}));
},
scheduleToImage: function () {
domtoimage.toJpeg(document.getElementById('readonlydiv'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'Stundenplan.jpg';
link.href = dataUrl;
link.click();
})
},
exportSchedule: function downloadObjectAsJson(){
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify({'schedule': this.scheduleData, 'caption': this.caption, heading: this.heading}));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", "Studenplan" + ".json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
}
})
</script>
</body>
</html>

93
view-schedule.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- production version, optimized for size and speed -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<title>Stundenplan Generator</title>
<style>
body {
color: white;
background-color: #996861;
font-family: sans-serif;
font-size: large;
}
#heading {
font-size: x-large;
padding-left: 30px;
}
table {
border:none;
border-collapse: collapse;
background-color: #996861;
}
table th {
border-bottom: 4px solid white;
border-left: 4px solid white;
border-right: 4px solid white;
padding: 15px;
}
table td {
border-left: 4px solid white;
border-right: 4px solid white;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
table th:first-child {
border-left: none;
}
table th:last-child {
border-right: none;
}
table td:first-child {
border-left: none;
}
table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<div id="app">
<p id="heading">{{heading}}</p>
<table id="table"
ref="table">
<tr>
<th v-for="day in Object.keys(scheduleData)">{{ day }}</th>
</tr>
<tr v-for="slot in amountSlots">
<td v-for="day in Object.keys(scheduleData)">
<div v-if="getSchuduleItem(day, slot).to">
<p id="item-time"><span>{{getSchuduleItem(day, slot).from}}</span> - <span>{{getSchuduleItem(day, slot).to}}</span></p>
<p id="item-title"><span style="white-space: pre-line;">{{getSchuduleItem(day, slot).title}}</span></p>
</div>
</td>
</tr>
</table>
<p style="text-align: center"><span style="white-space: pre-line;">{{caption}}</span></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: () => {
return {
amountSlots: 6,
caption: "* mit Stillberaterin und Kinderkrankenschwester Rhianon Grill\nf\u00fcr mehr Angebote rund um Mama/Baby www.stillberatungimrottal.de",
heading: "Stundenplan 2019",
scheduleData:{"Montag": [{"from": "09:00", "to": "10:15", "title": "Hatha Joga"}, {"from": "10:30", "to": "11:45", "title": "Joga f\u00fcr \nSchwangere"}, {}, {"title": ""}, {"from": "", "to": "", "title": ""}, {}], "Dienstag": [{}, {}, {"from": "15:30", "to": "16:30", "title": "Musikgarten"}, {"from": "18:00", "to": "19:30", "title": "Hatha/Vinjasa Yoga"}, {}, {}], "Mittwoch": [{"from": "09:00", "to": "10:15", "title": "R\u00fcckbildung"}, {"from": "10:30", "to": "11:30", "title": "Fit f\u00fcr Dich"}, {}, {}, {}, {}], "Donnerstag": [{"from": "09:00", "to": "10:00", "title": "Babymassage"}, {"from": "10:00", "to": "11:15", "title": "R\u00fcckbildung"}, {}, {}, {}, {}], "Freitag": [{"from": "09:00", "to": "10:30", "title": "Stilltreff * 2 w\u00f6chentlich"}, {}, {"from": "16:00", "to": "19:00", "title": "Geburtsvorbereitung"}, {}, {}, {}], "Samstag": [{"from": "09:00", "to": "12:00", "title": "Geburtsvorbereitung"}, {}, {}, {}, {}, {}]}
}
},
methods: {
getSchuduleItem: function(day, slot) {
return this.scheduleData[day][slot-1];
}
}
})
</script>
</body>
</html>