Mithril-ize waypoints

main/index.html

@@ -17,18 +17,7 @@
           <!-- <div class="airspeed"></div>
           <div class="altimeter"></div> -->
         </div>
-        <div id="waypoints">
-          <div class="waypoint">1</div>
-          <div class="waypoint">2</div>
-          <div class="waypoint">3</div>
-          <div class="waypoint">4</div>
-          <div class="waypoint">5</div>
-          <div class="waypoint">6</div>
-          <div class="waypoint">7</div>
-          <div class="waypoint">8</div>
-          <div class="waypoint">9</div>
-          <div class="waypoint">10</div>
-        </div>
+        <div id="waypoints"></div>
     </div>
     <script src="../dist/bundle.js"></script>
   </body>

src/app.js

@@ -5,6 +5,7 @@ require("./components/map");
 var { ipcRenderer } = require("electron");
 var state = require("./state");
 var m = require("mithril");
+var Waypoints = require('./components/waypoints');
 
 m.render($('.buttons')[0], [
     m('button', { 
@@ -22,4 +23,6 @@ m.render($('.buttons')[0], [
             ipcRenderer.send("sendCommand", 20);
         }
     }, 'Return to Launch'),
-]);
+]);
+
+m.mount($('#waypoints')[0], Waypoints);

src/components/waypoints.js

@@ -0,0 +1,19 @@
+var m = require("mithril");
+
+var Waypoints = {
+    view() {
+        return [
+            m('div', {class: 'waypoint'}, '1'),
+            m('div', {class: 'waypoint'}, '2'),
+            m('div', {class: 'waypoint'}, '3'),
+            m('div', {class: 'waypoint'}, '4'),
+            m('div', {class: 'waypoint'}, '5'),
+            m('div', {class: 'waypoint'}, '6'),
+            m('div', {class: 'waypoint'}, '7'),
+            m('div', {class: 'waypoint'}, '8'),
+            m('div', {class: 'waypoint'}, '9'),
+        ];
+    }
+}
+
+module.exports = Waypoints;