From fa502203a1c91b7d21203a01be355225e362f721 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Wed, 10 Apr 2019 18:46:32 +0200
Subject: [PATCH] Generate overview of all audio files

---
 www/css/styles.css       |  7 +++++++
 www/index.html           |  1 +
 www/js/hugvey_console.js | 29 ++++++++++++++++++++++++++++-
 www/scss/styles.scss     |  9 +++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/www/css/styles.css b/www/css/styles.css
index 34752ba..c9ed21d 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -33,6 +33,13 @@ img.icon {
   flex-direction: row;
   height: 100vh;
   width: 100vw; }
+  #interface #audioFiles {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    bottom: 10%;
+    background: #ccc; }
 
 #status {
   display: flex;
diff --git a/www/index.html b/www/index.html
index 72e4aab..6eec7a0 100644
--- a/www/index.html
+++ b/www/index.html
@@ -73,6 +73,7 @@
 				<div id="btn-save" class="btn">Save</div>
 				<div id="btn-addMsg" class="btn">Create message</div>
 				<div id="btn-diversions" class="btn">View Diversions</div>
+				<div id="btn-audio" class="btn">View Audio Files</div>
 			</div>
 			<div id="msg"></div>
 			<svg id='graph' viewbox="-640 -512 1280 1024"
diff --git a/www/js/hugvey_console.js b/www/js/hugvey_console.js
index a7d0322..85826e4 100644
--- a/www/js/hugvey_console.js
+++ b/www/js/hugvey_console.js
@@ -123,7 +123,7 @@ class Panopticon {
                     	}, 500);
                     	
                     	console.log(startDate, endDate);
-                    	setInterval(function(){panopticon.timeline.moveTo(new Date());}, 1000);
+                    	this.timelineInterval = setInterval(function(){panopticon.timeline.moveTo(new Date());}, 1000);
                     }
                     break;
 
@@ -346,6 +346,7 @@ class Graph {
         document.getElementById( 'btn-save' ).addEventListener( 'click', function( e ) { graph.saveJson(); } );
         document.getElementById( 'btn-addMsg' ).addEventListener( 'click', function( e ) { graph.createMsg(); } );
         document.getElementById( 'btn-diversions' ).addEventListener( 'click', function( e ) { graph.showDiversions(); } );
+        document.getElementById( 'btn-audio' ).addEventListener( 'click', function( e ) { graph.showAudioFiles(); } );
     }
 
     clickMsg( msg ) {
@@ -579,6 +580,32 @@ class Graph {
         msgEl.appendChild(divEl);
     }
 
+    showAudioFiles( ) {
+    	let audioFilesEl = crel('div',{
+	    		'id':'audioFiles'
+	    	},
+    		crel(
+    			'div',
+    			{
+    				'class':'btn btn-close',
+    				'on': {
+    					'click': function() {
+    						audioFilesEl.parentNode.removeChild(audioFilesEl)
+    					}
+    				}
+    			},
+    			'close'
+    		));
+    	for(let msg of panopticon.graph.messages) {
+    		audioFilesEl.appendChild(crel(
+    				'audio',
+    				{'controls':'controls'},
+    				crel('source', {'src': msg['audio'] ? msg['audio']['file'] : panopticon.graph.getAudioUrlForMsg(msg)})
+    		))
+    	}
+    	document.getElementById("interface").appendChild(audioFilesEl);
+    }
+
     showMsg( msg ) {
         let msgEl = document.getElementById( 'msg' );
         msgEl.innerHTML = "";
diff --git a/www/scss/styles.scss b/www/scss/styles.scss
index bed82d9..15a03a6 100644
--- a/www/scss/styles.scss
+++ b/www/scss/styles.scss
@@ -47,6 +47,15 @@ img.icon{
 	
 	&.showStatus{
 	}
+
+	#audioFiles {
+	    position: absolute;
+	    top: 10%;
+	    left: 10%;
+	    right: 10%;
+	    bottom: 10%;
+	    background: #ccc;
+	}
 }
 
 #status{