Add functionality for new tag history view

src/tags/app.tag

@@ -24,6 +24,7 @@
     <main>
         <catalog if="{route.routeName == 'home'}"></catalog>
         <taglist if="{route.routeName == 'taglist'}"></taglist>
+        <tag-history if="{route.routeName == 'taghistory'}"></tag-history>
         <change></change>
         <add></add>
         <remove></remove>
@@ -31,7 +32,8 @@
     </main>
     <footer>
         <material-footer>
-      <a class="material-footer-logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI %%GULP_INJECT_VERSION%%</a>
+            <a class="material-footer-logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI
+                %%GULP_INJECT_VERSION%%</a>
             <ul class="material-footer-link-list">
                 <li>
                     <a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a>
@@ -46,7 +48,7 @@
     <script>
 
         registryUI.appTag = this;
-    route.base('#!')
+        route.base('#!');
         route('', function () {
             route.routeName = 'home';
             if (registryUI.catalog.display) {
@@ -57,16 +59,31 @@
         });
         route('/taglist/*', function (image) {
             route.routeName = 'taglist';
-      registryUI.taglist.name = image
+            registryUI.taglist.name = image;
             if (registryUI.taglist.display) {
                 registryUI.taglist.loadend = false;
                 registryUI.taglist.display();
             }
             registryUI.appTag.update();
         });
+        route('/taghistory/image/*/tag/*', function (image, tag) {
+            console.log("Welcome to the tag history");
+            console.log("Image='" + image + "' with tag='" + tag + "'");
+            route.routeName = 'taghistory';
+
+            registryUI.taghistory.image = image;
+            registryUI.taghistory.tag = tag;
+
+            if (registryUI.taghistory.display){
+                console.log("Displaying Tag History");
+                registryUI.taghistory.loadend = false;
+                registryUI.taghistory.display();
+            }
+            registryUI.appTag.update();
+        });
         registryUI.home = function () {
             if (route.routeName == 'home') {
-        registryUI.catalog.display();
+                registryUI.catalog.display;
             } else {
                 route('');
             }

src/tags/tag-history-button.tag

@@ -0,0 +1,29 @@
+<!--
+Copyright (C) 2016-2018 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/>.
+-->
+<tag-history-button>
+    <a href="#" title="This will show the history of given tag" onclick="registryUI.taghistory.go('{ opts.image.name }', '{ opts.image.tag }');">
+        <i class="material-icons">history</i>
+    </a>
+
+    <script>
+        registryUI.taghistory.instance = this;
+        registryUI.taghistory.go = function (image, tag) {
+            route('taglist/joxit/docker-registry-ui');
+        };
+    </script>
+
+</tag-history-button>

src/tags/tag-history.tag

@@ -15,7 +15,75 @@
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <tag-history>
- <a href="#" title="This will show the history of given tag" onclick="">
+    <material-card ref="tag-history-tag" class="tag-history">
-  <i class="material-icons">history</i>
+        <div class="material-card-title-action">
- </a>
+            <h2>History of { registryUI.taghistory.image }:{ registryUI.taghistory.tag }</h2>
+        </div>
+        <div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper">
+            <material-spinner></material-spinner>
+        </div>
+
+        <table show="{ registryUI.taghistory.loadend }" style="border: none;">
+            <thead>
+            <tr>
+                <th class="material-card-th-left">One</th>
+                <th>Two</th>
+                <th>Three</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr each="{ historyelement in registryUI.taghistory.elements }">
+                <td class="material-card-th-left">
+                    { historyelement.v1Compatibility }
+                </td>
+                <td class="copy-to-clipboard">
+                </td>
+                <td>
+
+                </td>
+            </tr>
+            </tbody>
+        </table>
+
+    </material-card>
+
+    <script>
+        console.log("taghistory script area");
+
+        registryUI.taghistory.instance = this;
+        registryUI.taghistory.display = function () {
+            var oReq = new Http();
+            registryUI.taghistory.instance.update();
+            oReq.addEventListener('load', function () {
+                console.log("taghistory addEventListener::load");
+                registryUI.taghistory.elements = [];
+                if (this.status == 200) {
+                    var history = JSON.parse(this.responseText).history || [];
+
+                    for(historyElement in history){
+                        historyElement
+                    }
+
+                } else if (this.status == 404) {
+                    registryUI.snackbar('Manifest could not be fetched', true);
+                } else {
+                    registryUI.snackbar(this.responseText);
+                }
+            });
+            oReq.addEventListener('error', function () {
+                registryUI.snackbar(this.getErrorMessage(), true);
+                registryUI.taghistory.elements = [];
+            });
+            oReq.addEventListener('loadend', function () {
+                registryUI.taghistory.loadend = true;
+                registryUI.taghistory.instance.update();
+            });
+            console.log("Trying to create GET call with image='" + registryUI.taghistory.image + "' and tag='" + registryUI.taghistory.tag + "'")
+            oReq.open('GET', registryUI.url() + '/v2/' + registryUI.taghistory.image + '/manifests/' + registryUI.taghistory.tag);
+            oReq.send();
+        };
+
+        registryUI.taghistory.display();
+        registryUI.taghistory.instance.update();
+    </script>
 </tag-history>