Add admin page

This commit is contained in:
Ceda EI 2020-12-19 19:24:35 +05:30
parent e055e70778
commit 46fc7a7a63
2 changed files with 74 additions and 3 deletions

10
app.py
View File

@ -1,17 +1,17 @@
import json import json
from flask import Flask, jsonify, request from flask import Flask, jsonify, request, render_template
app = Flask(__name__) app = Flask(__name__)
with open("data.json") as f: with open("data.json") as f:
data = json.load(f) data = json.load(f)
@app.route('/all/') @app.route("/all/")
def get_all(): def get_all():
return jsonify(data) return jsonify(data)
@app.route('/data/<data_id>', methods=["POST"]) @app.route("/data/<data_id>", methods=["POST"])
def set_data_point(data_id): def set_data_point(data_id):
try: try:
value = request.json["value"] value = request.json["value"]
@ -22,3 +22,7 @@ def set_data_point(data_id):
with open("data.json", "w") as f: with open("data.json", "w") as f:
json.dump(data, f) json.dump(data, f)
return jsonify({"success": True}) return jsonify({"success": True})
@app.route("/admin/")
def admin():
return render_template("admin.html", data=data)

67
templates/admin.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Car API Admin</title>
<style type="text/css" media="screen">
body {
margin: 5em;
}
h1 {
text-align: center;
}
table {
width: 100%;
text-align: center;
margin-top: 1em;
}
table, tr, td {
border: black 1px solid;
border-collapse: collapse;
}
.change {
width: 100%;
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<h1>Mock Data API</h1>
<div class="change">
<input type="text" name="key" id="key" placeholder="Key">
<input type="text" name="value" id="value" placeholder="Valid JSON values">
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
</div>
<table>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
{% for key, value in data.items() %}
<tr>
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</table>
<script charset="utf-8">
function updateData() {
const key = document.querySelector("#key").value;
const value = document.querySelector("#value").value;
fetch(`/data/${key}`, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({value: JSON.parse(value)})
}).then(() => window.location.reload(true));
}
</script>
</body>
</html>