From 1e40ad66619eb5de48dc26b6bad8003ab94ef18c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Tue, 18 Jul 2017 13:23:02 +0200
Subject: [PATCH] Implement edit mode

---
 soundboard.py        |  8 +++++++-
 static/main.css      | 22 +++++++++++++++++++++-
 static/main.js       |  2 +-
 templates/index.html |  7 ++++++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/soundboard.py b/soundboard.py
index beb27be..81465de 100644
--- a/soundboard.py
+++ b/soundboard.py
@@ -12,6 +12,7 @@ app.jinja_env.lstrip_blocks = True
 processlist = []
 
 @app.route("/")
+@app.route("/edit")
 @app.route("/play/<sound>")
 @app.route("/say/", methods=["POST"])
 @app.route("/say/<text>")
@@ -48,4 +49,9 @@ def index(sound=None, text=None, video=None):
     if killvideo is not None and killvideo in ["1", "true", "yes"]:
         subprocess.Popen(["pkill", "-f", "omxplayer"])
 
-    return render_template("index.html", sounds=sounds)
+    if request.path == "/edit":
+        edit = True
+    else:
+        edit = False
+
+    return render_template("index.html", sounds=sounds, edit=edit)
diff --git a/static/main.css b/static/main.css
index 5dd5835..6cc1904 100644
--- a/static/main.css
+++ b/static/main.css
@@ -43,7 +43,7 @@ nav {
 	margin: 1em;
 }
 
-nav a {
+nav > a {
 	background-color: #eee;
 	border: 1px solid #000;
 	border-radius: 5px;
@@ -74,6 +74,22 @@ section {
 	cursor: pointer;
 }
 
+nav .extra {
+	position: absolute;
+	padding: 1em;
+	top: 1em;
+	right: 1em;
+}
+
+nav .extra > a {
+	background-color: #2ecc40;
+	border: 1px solid #000;
+	border-radius: 5px;
+	color: #333;
+	display: inline-block;
+	padding: 1em;
+}
+
 .sound {
 	display: inline-block;
 }
@@ -99,3 +115,7 @@ section {
 	background-color: #ff4136;
 	box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
 }
+
+.edit {
+	border: 1px dashed #eee;
+}
diff --git a/static/main.js b/static/main.js
index e2af0a3..ecf48b6 100644
--- a/static/main.js
+++ b/static/main.js
@@ -10,7 +10,7 @@ ready(function() {
 	hideSections();
 
 	var sections = document.querySelectorAll("section");
-	var nav = document.querySelectorAll("nav a");
+	var nav = document.querySelectorAll("nav > a");
 
 	sections[0].style.display = "block";
 
diff --git a/templates/index.html b/templates/index.html
index 9e7b804..5aa2897 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,12 +11,17 @@
 			<a href="#sounds">Sounds</a>
 			<a href="#youtube">YouTube</a>
 			<a href="#voice">Voice</a>
+			{% if not edit %}
+			<div class="extra"><a href="/edit">Edit</a></div>
+			{% else %}
+			<div class="extra"><a href="/">Done</a></div>
+			{% endif %}
 		</nav>
 		<content>
 			<section id="sounds">
 				<div><input type="text" id="search" /><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a href="{{ '/play/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound{{ ' edit' if edit }}"><a href="{{ '/' + ('edit' if edit else 'play') + '/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">