Merge pull request #677 from uccser/fsa-light-refactor

Refactor fsa-light interactive.
uccser · Jul 13, 2018 · b04af53 · b04af53
2 parents 5fd2eb8 + 1ee251a
commit b04af53
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 90 deletions.
diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml
@@ -47,7 +47,7 @@ frequency-analysis:
 fsa-box:
   name: FSA Box
 fsa-light:
-  name: fsa-light (broken)
+  name: FSA Light
 fsa-washing-machine:
   name: FSA Washing Machine
 hex-background-colour:

diff --git a/csfieldguide/static/interactives/fsa-light/config/example-1.json b/csfieldguide/static/interactives/fsa-light/config/example-1.json
diff --git a/csfieldguide/static/interactives/fsa-light/css/fsa-light.css b/csfieldguide/static/interactives/fsa-light/css/fsa-light.css
@@ -19,7 +19,7 @@
 #interactive-fsa-light-bulb-on.hide-bulb {
   opacity: 0;
 }
-#interactive-fsa-light a.btn {
+#interactive-fsa-light button.btn {
   text-transform: none;
   margin: 0.5em;
 }

diff --git a/csfieldguide/static/interactives/fsa-light/index.html b/csfieldguide/static/interactives/fsa-light/index.html
diff --git a/csfieldguide/static/interactives/fsa-light/js/fsa-light.js b/csfieldguide/static/interactives/fsa-light/js/fsa-light.js
@@ -1,8 +1,7 @@
-var fsa_light_config;
-
 $(document).ready(function() {
-  var config_name = getUrlParameter('config') || 'example-1';
-  loadConfig(config_name);
+
+  setupInterface();
+  updateInterface();
 
   // When state button is clicked
   $('#interactive-fsa-light-buttons').on('click', '.btn', function(event) {
@@ -18,30 +17,13 @@ $(document).ready(function() {
   });
 });
 
-function loadConfig(config_name) {
-  var config_path = 'config/' + config_name + '.json'
-  $.ajax({
-    dataType: "json",
-    url: config_path,
-    success: function(config_data) {
-      fsa_light_config = config_data;
-      setupInterface();
-      updateInterface();
-    },
-    error: function() {
-      alert('Config file not found!');
-    },
-    timeout: 3000
-  })
-}
-
 
 function setupInterface() {
   var button_container = $('#interactive-fsa-light-buttons');
   var available_buttons = fsa_light_config['available_buttons'];
   for (var i = 0; i < available_buttons.length; i++) {
-    var button = document.createElement('a');
-    button.className = 'btn waves-effect waves-light blue';
+    var button = document.createElement('button');
+    button.className = 'btn btn-primary btn-lg';
     button.innerHTML = available_buttons[i];
     button_container.append(button);
   }

diff --git a/csfieldguide/templates/interactives/fsa-light.html b/csfieldguide/templates/interactives/fsa-light.html
@@ -0,0 +1,60 @@
+{% extends interactive_mode_template %}
+
+{% load i18n %}
+{% load static %}
+
+{% block html %}
+  <div class="container">
+    <div id="interactive-fsa-light" data-iframe-height>
+
+      <div id="interactive-fsa-light-state-text" class="text-center">
+        {% trans 'Current state: <span id="interactive-fsa-light-current-state-text"></span>' %}
+      </div>
+
+      <div id="interactive-fsa-light-images" class="text-center">
+        <img id="interactive-fsa-light-bulb-off" src="{% static 'interactives/fsa-light/img/lightbulb-off.png' %}">
+        <img id="interactive-fsa-light-bulb-on" src="{% static 'interactives/fsa-light/img/lightbulb.png' %}">
+      </div>
+
+      <div id="interactive-fsa-light-buttons" class="text-center"></div>
+
+      <div class="text-center">
+        <button id="interactive-fsa-light-reset" class="btn btn-danger">{% trans "Reset to start state" %}</button>
+      </div>
+    </div>
+  </div>
+{% endblock html %}
+
+{% block css %}
+  <link rel="stylesheet" href="{% static 'interactives/fsa-light/css/fsa-light.css' %}">
+{% endblock css %}
+
+{% block js %}
+  <script type="text/javascript">
+    var fsa_light_config = {
+      "available_buttons": ["a"],
+      "initial_state": "1",
+      "states": {
+        "1": {
+          "light": "On",
+          "destinations": {
+            "a": "2"
+          }
+        },
+        "2": {
+          "light": "Off",
+          "destinations": {
+            "a": "3"
+          }
+        },
+        "3": {
+          "light": "Off",
+          "destinations": {
+            "a": "1"
+          }
+        }
+      }
+    };
+  </script>
+  <script type="text/javascript" src="{% static 'interactives/fsa-light/js/fsa-light.js' %}"></script>
+{% endblock js %}