[rg-router] Add router for taglist and catalog

This commit is contained in:
Joxit 2016-06-01 20:06:33 +02:00
parent a51845f0ef
commit 28649c6893
6 changed files with 92 additions and 47 deletions

28
app.tag Normal file
View file

@ -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>

View file

@ -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 -->

View file

@ -40,8 +40,7 @@
</header>
<main class="mdl-layout__content">
<div class="page-content">
<catalog></catalog>
<taglist></taglist>
<app></app>
</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>

View file

@ -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"
}
}

View file

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

View file

@ -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,11 +48,14 @@
<script>
registryUI.taglist.instance = this;
registryUI.taglist.instance.update();
this.on('updated', function () {
componentHandler.upgradeElements(this['taglist-tag']);
})
registryUI.taglist.display = function (name) {
if (rg.router.current && rg.router.current.name == 'taglist') {
name = rg.router.current.params.repository + (rg.router.current.params.image
? '/' + rg.router.current.params.image
: '');
registryUI.content = 'taglist';
var oReq = new XMLHttpRequest();
registryUI.taglist.name = name;
@ -88,8 +91,9 @@
oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
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>