Implement edit mode

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)

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;
+}

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";
 

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">