mirror of
https://github.com/Joxit/docker-registry-ui.git
synced 2025-04-29 00:19:54 +03:00
Merge pull request #8 from Joxit/rg-router
Rg router Add router navigation for taglist and catalog. Route looks like http://mydomaine.com/#!/taglist// for a tag listing and http://mydomaine.com/#!/ for catalog
This commit is contained in:
Jones Magloire
commit
c51a659bcb
8 changed files with 124 additions and 65 deletions
1
add.tag
1
add.tag
|
|
@ -47,6 +47,7 @@
|
|||
registryUI.addServer(registryUI.addTag.addServer.value);
|
||||
}
|
||||
registryUI.addTag.addServer.value = '';
|
||||
rg.router.go('home');
|
||||
registryUI.addTag.dialog.close();
|
||||
};
|
||||
registryUI.addTag.close = function () {
|
||||
|
|
|
|||
41
app.tag
Normal file
41
app.tag
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!--
|
||||
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.on('go', state => {
|
||||
switch (state.name) {
|
||||
case 'taglist':
|
||||
if (registryUI.taglist.display) {
|
||||
registryUI.taglist.display();
|
||||
}
|
||||
break;
|
||||
case 'home':
|
||||
if (registryUI.catalog.display) {
|
||||
registryUI.catalog.display();
|
||||
}
|
||||
break;
|
||||
}
|
||||
})
|
||||
this.router.start();
|
||||
</script>
|
||||
</app>
|
||||
39
catalog.tag
39
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>
|
||||
<div id="catalog-spinner" style="{ registryUI.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 registryUI.catalog.repositories }" onclick="registryUI.catalog.go('{item}');">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i class="material-icons mdl-list__item-icon">send</i>
|
||||
{ item }
|
||||
|
|
@ -38,15 +38,15 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
catalog.instance = this;
|
||||
catalog.display = function () {
|
||||
registryUI.content = 'catalog';
|
||||
registryUI.catalog.instance = this;
|
||||
this.mixin('rg.router');
|
||||
registryUI.catalog.display = function () {
|
||||
var oReq = new XMLHttpRequest();
|
||||
catalog.createSnackbar = function (msg) {
|
||||
registryUI.catalog.createSnackbar = function (msg) {
|
||||
var snackbar = document.querySelector('#error-snackbar');
|
||||
catalog.error = msg;
|
||||
registryUI.catalog.error = msg;
|
||||
var data = {
|
||||
message: catalog.error,
|
||||
message: registryUI.catalog.error,
|
||||
timeout: 100000,
|
||||
actionHandler: function () {
|
||||
snackbar.classList.remove('mdl-snackbar--active');
|
||||
|
|
@ -57,29 +57,34 @@
|
|||
};
|
||||
oReq.addEventListener('load', function () {
|
||||
if (this.status == 200) {
|
||||
catalog.repositories = JSON.parse(this.responseText).repositories.sort();
|
||||
registryUI.catalog.repositories = JSON.parse(this.responseText).repositories.sort();
|
||||
} else if (this.status == 404) {
|
||||
catalog.createSnackbar('Server not found');
|
||||
registryUI.catalog.createSnackbar('Server not found');
|
||||
} else {
|
||||
catalog.createSnackbar(this.responseText);
|
||||
registryUI.catalog.createSnackbar(this.responseText);
|
||||
}
|
||||
});
|
||||
oReq.addEventListener('error', function () {
|
||||
catalog.createSnackbar('An error occured');
|
||||
registryUI.catalog.createSnackbar('An error occured');
|
||||
});
|
||||
oReq.addEventListener('loadend', function () {
|
||||
catalog.loadend = true;
|
||||
catalog.instance.update();
|
||||
registryUI.catalog.loadend = true;
|
||||
registryUI.catalog.instance.update();
|
||||
});
|
||||
oReq.open('GET', registryUI.url() + '/v2/_catalog');
|
||||
oReq.withCredentials = false;
|
||||
oReq.send();
|
||||
riot.update();
|
||||
};
|
||||
this.on('updated', function () {
|
||||
componentHandler.upgradeElements(this['catalog-tag']);
|
||||
});
|
||||
catalog.display();
|
||||
registryUI.catalog.go = function (image) {
|
||||
rg.router.go('taglist', {
|
||||
repository: image.split('/')[0],
|
||||
image: image.split('/')[1]
|
||||
});
|
||||
};
|
||||
registryUI.catalog.display();
|
||||
</script>
|
||||
<!-- End of tag -->
|
||||
</catalog>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
});
|
||||
registryUI.changeTag.show = function () {
|
||||
registryUI.changeTag.update();
|
||||
registryUI.changeTag.serverList.value = registryUI.url();;
|
||||
registryUI.changeTag.dialog.showModal();
|
||||
};
|
||||
registryUI.changeTag.change = function () {
|
||||
|
|
@ -49,6 +50,7 @@
|
|||
registryUI.changeServer(registryUI.changeTag.serverList.value);
|
||||
}
|
||||
registryUI.changeTag.serverList.value = '';
|
||||
rg.router.go('home');
|
||||
registryUI.changeTag.dialog.close();
|
||||
};
|
||||
registryUI.changeTag.close = function () {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,10 +48,9 @@ registryUI.changeServer = function(url) {
|
|||
}
|
||||
registryServer.splice(index, 1);
|
||||
registryServer = [url].concat(registryServer);
|
||||
registryUI.registryServer.servers = registryServer;
|
||||
localStorage.setItem('registryServer', JSON.stringify(registryServer));
|
||||
}
|
||||
var catalog = {};
|
||||
registryUI.catalog = {};
|
||||
registryUI.taglist = {};
|
||||
|
||||
riot.mount('catalog');
|
||||
|
|
@ -59,3 +58,4 @@ riot.mount('taglist');
|
|||
riot.mount('add');
|
||||
riot.mount('change');
|
||||
riot.mount('menu');
|
||||
riot.mount('app');
|
||||
|
|
|
|||
28
taglist.tag
28
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,12 +48,11 @@
|
|||
|
||||
<script>
|
||||
registryUI.taglist.instance = this;
|
||||
registryUI.taglist.instance.update();
|
||||
this.on('updated', function () {
|
||||
componentHandler.upgradeElements(this['taglist-tag']);
|
||||
})
|
||||
registryUI.taglist.display = function (name) {
|
||||
registryUI.content = 'taglist';
|
||||
registryUI.taglist.display = function () {
|
||||
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
|
||||
: '');
|
||||
var oReq = new XMLHttpRequest();
|
||||
registryUI.taglist.name = name;
|
||||
registryUI.taglist.createSnackbar = function (msg) {
|
||||
|
|
@ -88,8 +87,14 @@
|
|||
oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
|
||||
oReq.withCredentials = false;
|
||||
oReq.send();
|
||||
riot.update();
|
||||
}
|
||||
};
|
||||
registryUI.taglist.display();
|
||||
registryUI.taglist.instance.update();
|
||||
this.on('updated', function () {
|
||||
componentHandler.upgradeElements(this['taglist-tag']);
|
||||
});
|
||||
|
||||
registryUI.taglist.reverse = function (th) {
|
||||
if (th.className == 'mdl-data-table__header--sorted-ascending') {
|
||||
th.className = 'mdl-data-table__header--sorted-descending';
|
||||
|
|
@ -99,6 +104,9 @@
|
|||
registryUI.taglist.tags.reverse();
|
||||
registryUI.taglist.instance.update();
|
||||
};
|
||||
registryUI.taglist.back = function () {
|
||||
rg.router.go('home');
|
||||
};
|
||||
</script>
|
||||
<!-- End of tag -->
|
||||
</taglist>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue