From 7163150cf53f8fa60680f02e8ca25677fe1dec5a Mon Sep 17 00:00:00 2001
From: Lennart Blom <lennart@blom.de>
Date: Thu, 6 Dec 2018 22:01:35 +0100
Subject: [PATCH] Optimize GUI elements and HTTP logic for content preperation

---
 src/style.css            | 12 +++++----
 src/tags/tag-history.tag | 57 ++++++++++++++++++++--------------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/style.css b/src/style.css
index ff5f595..2e7d2f0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -337,14 +337,16 @@ select {
   cursor: pointer;
 }
 
+material-card.tag-history{
+  margin-bottom: 0;
+}
 .tag-history-element {
-  padding: 15px;
-  margin: 5px;
-  max-width: 100%;
+  margin-top:5px;
+  margin-bottom: 0;
 }
 
 .tag-history-element > div {
-  padding: 10px;
+  padding: 20px;
   min-width: 100px;
 }
 
@@ -400,7 +402,7 @@ select {
   background-size: 35px auto;
   background-image: url("images/docker-logo.svg");
   background-repeat: no-repeat;
-  background-position: 7px 10px;
+  background-position: 11px 20px;
 }
 
 .tag-history-element > div {
diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag
index 60e74be..0947b80 100644
--- a/src/tags/tag-history.tag
+++ b/src/tags/tag-history.tag
@@ -24,26 +24,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         History of { registryUI.taghistory.image }:{ registryUI.taghistory.tag } <i class="material-icons">history</i>
       </h2>
     </div>
-    <div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper">
-      <material-spinner></material-spinner>
+
+    <div class="material-card-title-action">
+      <p>Nested v1Compatibility history elements:</p>
     </div>
+  </material-card>
+  <div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper">
+    <material-spinner></material-spinner>
+  </div>
 
-    <div show="{ registryUI.taghistory.loadend }">
-      <div class="material-card-title-action">
-        <p>Nested v1Compatibility history elements:</p>
-      </div>
-      <material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element">
-        <div each="{ entry in guiElement }" class="{ entry.key }">
-          <div class="headline"><i class="material-icons"></i>
-            <p>{ entry.key }</p></div>
-          <div class="value"> { entry.value }</div>
-        </div>
-
-      </material-card>
+  <material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element">
+    <div each="{ entry in guiElement }" class="{ entry.key }">
+      <div class="headline"><i class="material-icons"></i>
+        <p>{ entry.key }</p></div>
+      <div class="value"> { entry.value }</div>
     </div>
 
   </material-card>
 
+
   <script type="text/javascript">
 
     registryUI.taghistory.instance = this;
@@ -53,32 +52,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       oReq.addEventListener('load', function() {
         registryUI.taghistory.elements = [];
 
-        function modifySpecificAttributeTypes(value) {
-          if (attribute === "created") {
-            var date = new Date(value);
-            value = date.toLocaleString();
-          } else if (attribute === "container_config" || attribute === "config") {
-            value = "";
+        function modifySpecificAttributeTypes(attribute, value) {
+          switch (attribute) {
+            case "created":
+              return new Date(value).toLocaleString();
+            case "container_config":
+            case "config":
+              return "";
           }
           return value;
         }
 
-        if (this.status == 200) {
-          let elements = JSON.parse(this.responseText).history || [];
-          for (var index in elements) {
-            let parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {});
+        if (this.status === 200) {
+          const elements = JSON.parse(this.responseText).history || [];
+          for (const index in elements) {
+            const parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {});
 
             let guiElements = [];
             let guiElement = {};
 
-            for (var attribute in parsedNestedElements) {
+            for (const attribute in parsedNestedElements) {
               if (parsedNestedElements.hasOwnProperty(attribute)) {
-                let value = parsedNestedElements[attribute];
+                const value = parsedNestedElements[attribute];
 
-                value = modifySpecificAttributeTypes(value);
                 guiElement = {
                   "key": attribute,
-                  "value": value
+                  "value": modifySpecificAttributeTypes(attribute, value)
                 };
                 guiElements.push(guiElement);
               }
@@ -87,7 +86,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
             registryUI.taghistory.elements.push(guiElements);
           }
-        } else if (this.status == 404) {
+        } else if (this.status === 404) {
           registryUI.snackbar('Manifest could not be fetched', true);
         } else {
           registryUI.snackbar(this.responseText);