[rg-router] Add router for taglist and catalog

app.tag

@@ -0,0 +1,28 @@
+<!--
+ Copyright (C) 2016  Jones Magloire @Joxit
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<app>
+  <catalog if="{!rg.router.current || rg.router.current.name == 'home'}"></catalog>
+  <taglist if="{rg.router.current.name == 'taglist'}"></taglist>
+  <script>
+
+  this.mixin('rg.router');
+  this.router.add({name: 'home', url: ''});
+  this.router.add({name: 'taglist', url: '/taglist/:repository/:image'});
+  
+this.router.start();
+  </script>
+</app>

catalog.tag

@@ -16,14 +16,14 @@
 -->
 <catalog>
   <!-- Begin of tag -->
-  <div id="catalog-tag" class="catalog" if="{ registryUI.content == 'catalog' }">
+  <div id="catalog-tag" class="catalog">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
         <h2 class="mdl-card__title-text">Repositories of { registryUI.url() }</h2>
       </div>
       <div id="catalog-spinner" style="{ catalog.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
       <ul class="mdl-list">
-        <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{ item in catalog.repositories }" onclick="registryUI.taglist.display('{item}');">
+        <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{ item in catalog.repositories }" onclick="catalog.go('{item}');">
           <span class="mdl-list__item-primary-content">
             <i class="material-icons mdl-list__item-icon">send</i>
             { item }
@@ -39,6 +39,7 @@
 
   <script>
     catalog.instance = this;
+    this.mixin('rg.router');
     catalog.display = function () {
       registryUI.content = 'catalog';
       var oReq = new XMLHttpRequest();
@@ -74,11 +75,17 @@
       oReq.open('GET', registryUI.url() + '/v2/_catalog');
       oReq.withCredentials = false;
       oReq.send();
-      riot.update();
     };
     this.on('updated', function () {
       componentHandler.upgradeElements(this['catalog-tag']);
     });
+    catalog.go = function (image) {
+      rg.router.go('taglist',
+      {
+        repository: image.split('/')[0],
+        image: image.split('/')[1]
+      });
+    };
     catalog.display();
   </script>
   <!-- End of tag -->

index.html

@@ -40,8 +40,7 @@
     </header>
     <main class="mdl-layout__content">
       <div class="page-content">
-        <catalog></catalog>
+        <app></app>
-        <taglist></taglist>
       </div>
     </main>
     <change></change>
@@ -61,7 +60,9 @@
   <script src="add.tag" type="riot/tag"></script>
   <script src="change.tag" type="riot/tag"></script>
   <script src="menu.tag" type="riot/tag"></script>
+  <script src="app.tag" type="riot/tag"></script>
   <script src="node_modules/riot/riot+compiler.min.js"></script>
+  <script src="node_modules/riotgear-router/dist/rg-router.min.js"></script>
   <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
   <script src="node_modules/material-design-lite/dist/material.min.js"></script>
   <script src="script.js"></script>

package.json

@@ -3,6 +3,7 @@
     "material-design-lite": "^1.1",
     "material-design-icons": "^2.2",
     "dialog-polyfill": "^0.4",
-    "riot": "^2.3"
+    "riot": "^2.3",
+    "riotgear-router": "^1.3.1"
   }
 }

script.js

@@ -57,3 +57,4 @@ riot.mount('taglist');
 riot.mount('add');
 riot.mount('change');
 riot.mount('menu');
+riot.mount('app');

taglist.tag

@@ -16,15 +16,15 @@
 -->
 <taglist>
   <!-- Begin of tag -->
-  <div id="taglist-tag" class="taglist" if="{ registryUI.content == 'taglist' }">
+  <div id="taglist-tag" class="taglist">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
-        <a href="#" onclick="catalog.display();">
+        <a href="#" onclick="registryUI.taglist.back();">
           <i class="material-icons mdl-list__item-icon">arrow_back</i>
         </a>
         <h2 class="mdl-card__title-text">Tags of { registryUI.url() + '/' + registryUI.taglist.name }</h2>
       </div>
-      <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
+      <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner section-centerd"></div>
       <table class="mdl-data-table mdl-js-data-table full-table" style="border: none;">
         <thead>
           <tr>
@@ -48,48 +48,52 @@
 
   <script>
     registryUI.taglist.instance = this;
+
     registryUI.taglist.instance.update();
     this.on('updated', function () {
       componentHandler.upgradeElements(this['taglist-tag']);
-    })
+      if (rg.router.current && rg.router.current.name == 'taglist') {
-    registryUI.taglist.display = function (name) {
+        name = rg.router.current.params.repository + (rg.router.current.params.image
-      registryUI.content = 'taglist';
+          ? '/' + rg.router.current.params.image
-      var oReq = new XMLHttpRequest();
+          : '');
-      registryUI.taglist.name = name;
+        registryUI.content = 'taglist';
-      registryUI.taglist.createSnackbar = function (msg) {
+        var oReq = new XMLHttpRequest();
-        var snackbar = document.querySelector('#error-snackbar');
+        registryUI.taglist.name = name;
-        registryUI.taglist.error = msg;
+        registryUI.taglist.createSnackbar = function (msg) {
-        var data = {
+          var snackbar = document.querySelector('#error-snackbar');
-          message: registryUI.taglist.error,
+          registryUI.taglist.error = msg;
-          timeout: 100000,
+          var data = {
-          actionHandler: function () {
+            message: registryUI.taglist.error,
-            snackbar.classList.remove('mdl-snackbar--active');
+            timeout: 100000,
-          },
+            actionHandler: function () {
-          actionText: 'Undo'
+              snackbar.classList.remove('mdl-snackbar--active');
+            },
+            actionText: 'Undo'
+          };
+          snackbar.MaterialSnackbar.showSnackbar(data);
         };
-        snackbar.MaterialSnackbar.showSnackbar(data);
+        oReq.addEventListener('load', function () {
-      };
+          if (this.status == 200) {
-      oReq.addEventListener('load', function () {
+            registryUI.taglist.tags = JSON.parse(this.responseText).tags.sort();
-        if (this.status == 200) {
+          } else if (this.status == 404) {
-          registryUI.taglist.tags = JSON.parse(this.responseText).tags.sort();
+            registryUI.taglist.createSnackbar('Server not found');
-        } else if (this.status == 404) {
+          } else {
-          registryUI.taglist.createSnackbar('Server not found');
+            registryUI.taglist.createSnackbar(this.responseText);
-        } else {
+          }
-          registryUI.taglist.createSnackbar(this.responseText);
+        });
-        }
+        oReq.addEventListener('error', function () {
-      });
+          registryUI.taglist.createSnackbar('An error occured');
-      oReq.addEventListener('error', function () {
+        });
-        registryUI.taglist.createSnackbar('An error occured');
+        oReq.addEventListener('loadend', function () {
-      });
+          registryUI.taglist.loadend = true;
-      oReq.addEventListener('loadend', function () {
+          registryUI.taglist.instance.update();
-        registryUI.taglist.loadend = true;
+        });
-        registryUI.taglist.instance.update();
+        oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
-      });
+        oReq.withCredentials = false;
-      oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
+        oReq.send();
-      oReq.withCredentials = false;
+      }
-      oReq.send();
+
-      riot.update();
+    });
-    }
     registryUI.taglist.reverse = function (th) {
       if (th.className == 'mdl-data-table__header--sorted-ascending') {
         th.className = 'mdl-data-table__header--sorted-descending';
@@ -99,6 +103,9 @@
       registryUI.taglist.tags.reverse();
       registryUI.taglist.instance.update();
     };
+    registryUI.taglist.back = function () {
+      rg.router.go('home');
+    };
   </script>
   <!-- End of tag -->
 </taglist>