Refactor index.html

src/server/public/index.html

@@ -22,11 +22,10 @@
 
       <hr>
 
-      <h4>Routes</h4>
       <p>
         Here are the resources that JSON Server has loaded:
       </p>
-      <ul id="resources">loading, please wait...</ul>
+      <div id="resources">loading, please wait...</div>
 
       <div id="custom-routes"></div>
 
@@ -63,33 +62,7 @@
       </p>
     </div>
 
-    <script
-      src="https://code.jquery.com/jquery-3.0.0.min.js"
-      integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
-    <script>
-      $(function() {
-        $.get('db').then(function(data) {
-          var el = $('#resources')
-
-          el.empty()
-
-          $.each(data, function(key, value) {
-            el.append('<li><a href="'+ key + '">' + key + '</a></li>')
-          })
-        })
-
-        $.get('__rules').then(function(data) {
-          var el = $('#custom-routes')
-
-          el.append('<p>And the custom routes:</p>')
-            .append('<ul id="custom-routes-list">')
-
-          var listEl = $('#custom-routes-list')
-          $.each(data, function(key, value) {
-            listEl.append('<li>' + key + ' → ' + value + '</li>')
-          })
-        })
-      })
-    </script>
+    <script src="https://unpkg.com/mithril/mithril.min.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

src/server/public/main.js

@@ -0,0 +1,40 @@
+// Resource list
+var resources = []
+
+m.request('db').then(function (data) {
+  resources = Object.keys(data)
+})
+
+m.mount(
+  document.getElementById('resources'),
+  {
+    view: function() {
+      return m('ul', resources.map(function (resource) {
+        return m('li',
+          m('a', { href: resource }, resource)
+        )
+      }))
+    }
+  }
+)
+
+// Custom routes
+var rules = {}
+
+m.request('__rules').then(function (data) {
+  rules = data
+})
+
+m.mount(
+  document.getElementById('custom-routes'),
+  {
+    view: function () {
+      return [
+        m('p', 'And the custom routes:'),
+        m('ul', Object.keys(rules).map(function (rule) {
+          return m('li', rule + ' → ' + rules[rule])
+        }))
+      ]
+    }
+  }
+)