finished update of state.

components/toolbar.html

@@ -7,9 +7,7 @@
             <span id="watching" class="ask-opt"> watching </span>, refreshing every <span isoption="true" contenteditable="true" id="watch-frequency" class="ask-opt"></span>
             seconds, and, when questions are available, will
             <span id="alert-sounds">
-                <span id="one" class="ask-opt">rick roll</span>
-                <span id="two" class="ask-opt">softly chirp</span>
-                <span class="ask-opt">beep beep</span>
+
             </span>
             <span isoption="true" contenteditable="true" id="alert-frequency" class="ask-opt"></span> times per minute.
         </span>

script_background.js

@@ -10,6 +10,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse)=>{
     console.log(request);
     flag = request.message.flag;
     switch (flag) {
+        case "alertList":
+            sendResponse(alert_manager.alertList)
+            break;
         case "alert":
             console.log('alert request')
             alert_manager.handleAlert(request.message.options);

script_foreground.js

@@ -3,7 +3,6 @@ let state = {
     "sound-select":"rick roll",
     "watch-frequency": 5,
     alertList: [],
-    
     loadState: function(){
         if(JSON.parse(localStorage.getItem('config'))){
             saveData=JSON.parse(localStorage.getItem('config'))
@@ -12,8 +11,8 @@ let state = {
             state["alert-frequency"] = saveData["alert-frequency"] || "1"
             state["watch-frequency"] = saveData["watch-frequency"] || "5"
         } 
+        this.render["sound-select"]();
         this.render.fields();
-        this.render.soundToggle;
     },
     
     set: function(property, value){
@@ -28,7 +27,8 @@ let state = {
             }
             console.log('saving settings ', saveData)
             localStorage.setItem('config',JSON.stringify(saveData))
-            state.render[property];
+            console.log(`attempting to render ${property}`)
+            if(property=="sound-select"){state.render["sound-select"]()};
         } 
         else { 
             console.log (`error: ${property} is not a known configuration property`)
@@ -39,7 +39,7 @@ let state = {
     render : {
         fields: function(){
             console.log('rendering editable fields');
-            document.querySelectorAll("[isOption]").forEach(function(el){
+            document.querySelectorAll("[isoption]").forEach(function(el){
                 console.log('setting ', el);
                 el.innerHTML = state[el.id];
                 // approximate on('change') which does not appear to work
@@ -57,19 +57,49 @@ let state = {
                 });
             });
         },
-        soundToggle: function(){
-            console.log('render sound toggle WIP');
-
+        "alert-frequency": function(){this.fields()},
+        "watch-frequency": function(){this.fields()},
+        "sound-select": function(){
+            console.log('rendering sound toggle')
+            let alertContainer = document.querySelector('#alert-sounds');
+            alertContainer.innerHTML = '';
+            state.alertList.forEach(function({name}){
+                console.log(`adding ${name} to soundToggle`)
+                let alertEl = document.createElement('span')
+                let alertState = (name==state["sound-select"]) ? "displayed-alert" : "hidden-alert";
+                alertEl.innerHTML = name;
+                alertEl.classList.add('ask-opt', alertState);
+                alertEl.addEventListener('click', function(e){
+                    let curAlert = e.target.innerHTML;
+                    state.alertList.forEach(function(alert, i){
+                        console.log(`(${alert.name} == ${curAlert}) : ${( alert.name == curAlert)}`);
+                        if( alert.name == curAlert){
+                            console.log(`i ${i} >= list length ${state.alertList.length} is ${i+1>=state.alertList.length}`)
+                            if( i+1>=state.alertList.length ){
+                                console.log("alert to 0")
+                                state.set('sound-select', state.alertList[0].name)
+                            } else {
+                                console.log("alert to", i+2)
+                                state.set('sound-select', state.alertList[i+1].name)
+                            }   
+                        }
+                    })
+                })
+                alertContainer.append(alertEl);
+            })    
         }
     }
 }
 
-
-
-
-
-
 function appendTool(html){
+    // fetch the list of possible alerts from the background script
+    chrome.runtime.sendMessage(
+        {message:
+            {flag:"alertList"}
+        }, function(res){
+            state.alertList = res;
+            console.log('alert list fetched from background');
+    })
     // fetch the plugin components from the background script...
     chrome.runtime.sendMessage(
         {message:
@@ -107,10 +137,10 @@ function appendTool(html){
             watchBrach.style.display = "none";
             clearInterval(timer);   
         });
-        document.querySelectorAll("[optField='true']").forEach(function(el){
+        document.querySelectorAll("[isoption]").forEach(function(el){
             // approximate on('change') which does not appear to work
             function handleChange(e){
-                saveConfig();
+                state.set(e.target.id, e.target.innerHTML)
             }
             el.addEventListener("blur", handleChange);
             el.addEventListener("input", handleChange);

styles.css

@@ -24,12 +24,6 @@
     min-width:10px;
     height: 32.5px;
 }
-#alert-sounds>*{
-    display:none;
-}
-#alert-sounds>*:first-child{
-    display:inline-block;
-}
 #waiting{
     cursor: pointer;
     color: #DC5960;
@@ -70,5 +64,12 @@
     height:25px;
 }
 
+.displayed-alert{
+    display: inline-block;
+} 
+.hidden-alert{
+    display: none;
+}
+