From 6dbd602a501e942f30f0f1a237ff5e3b0e7c3b2e Mon Sep 17 00:00:00 2001
From: Daniel Bulant <admin@danbulant.eu>
Date: Tue, 14 Apr 2020 18:27:21 +0200
Subject: [PATCH] Show key icon

---
 static/index.html | 90 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 83 insertions(+), 7 deletions(-)

diff --git a/static/index.html b/static/index.html
index f596d33..0e14f8c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -72,6 +72,7 @@
             word-break: normal;
         }
 
+        .null,
         .key {
             width: 30px;
         }
@@ -80,7 +81,6 @@
             width: 35px;
         }
 
-        .null,
         .default {
             width: 50px;
         }
@@ -91,7 +91,7 @@
         }
     </style>
 
-    <!-- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+    <!-- 
     <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="24"
         width="24" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
         <g transform="translate(0 -1028.4)">
@@ -114,6 +114,28 @@
 
 
     <script>
+        function key(title, color, color2, color3) {
+            return `<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="24"
+        width="24" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+        <title>${title}</title>
+        <g transform="translate(0 -1028.4)">
+            <g transform="matrix(.70711 .70711 -.70711 .70711 740.06 298.16)">
+                <path
+                    d="m10.541 1028.9c-3.3134 0-5.9997 2.6-5.9997 6 0 3.3 2.6863 6 5.9997 6 3.314 0 6-2.7 6-6 0-3.4-2.686-6-6-6zm0 2c1.105 0 2 0.9 2 2s-0.895 2-2 2c-1.1042 0-1.9997-0.9-1.9997-2s0.8955-2 1.9997-2z"
+                    fill="${color}" />
+                <g fill="${color2}">
+                    <path
+                        d="m10 0c-3.3137 0-6 2.6863-6 6s2.6863 6 6 6c3.314 0 6-2.6863 6-6s-2.686-6-6-6zm0 2c1.105 0 2 0.8954 2 2s-0.895 2-2 2c-1.1046 0-2-0.8954-2-2s0.8954-2 2-2z"
+                        transform="translate(0 1028.4)" />
+                    <rect height="2" width="6" y="1039.4" x="7" />
+                    <path d="m8 13v9l2 2 2-2v-1l-2-1 2-1v-1l-1-1 1-1v-3z" transform="translate(0 1028.4)" />
+                </g>
+                <path d="m11 1041.4v4l1-1v-3h-1zm0 4v2.5l1-0.5v-1l-1-1zm0 3.5v2.5l1-1v-1l-1-0.5z" fill="${color3}" />
+                <path d="m9 1041.4v10l1 1v-4-7h-1z" fill="${color3}" />
+            </g>
+        </g>
+    </svg>`;
+        }
         const app = document.getElementById("app");
 
         function htmlToElement(html) {
@@ -181,9 +203,9 @@
                     app.appendChild(comment);
                 } catch (e) {}
 
-                function addField(fieldName) {
+                function addField(fieldName, rename = fieldName) {
                     return fieldsIgnored.includes(fieldName.toLowerCase()) ? "" :
-                        `<th class='${fieldName.toLowerCase()}'>${fieldName}</th>`;
+                        `<th class='${fieldName.toLowerCase()}'>${rename}</th>`;
                 }
 
                 var head = htmlToElement(`
@@ -191,7 +213,7 @@
                     ${addField("Field")}
                     ${addField("Type")}
                     ${addField("Collation")}
-                    ${addField("Null")}
+                    ${addField("Null", "NN")}
                     ${addField("Key")}
                     ${addField("Default")}
                     ${addField("Extra")}
@@ -215,18 +237,72 @@
                             case "null":
                                 let cb = document.createElement("input");
                                 cb.type = "checkbox";
-                                cb.checked = column[field] === "YES";
+                                cb.checked = column[field] === "NO";
                                 cb.disabled = true;
                                 column[field] = cb;
+                                break;
+                            case "key":
+                                switch(column[field]) {
+                                    case "PRI":
+                                        column[field] = htmlToElement(key("Primary key", "#f39c12", "#f1c40f", "#f39c12"));
+                                        break;
+                                    case "MUL":
+                                        column[field] = htmlToElement(`<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="22.000000pt" height="24.000000pt" viewBox="0 0 1113.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<title>Multi key</title>
+<path d="M3130 12789 c-1268 -111 -2354 -895 -2856 -2061 -328 -763 -361
+-1656 -90 -2445 377 -1097 1288 -1932 2415 -2213 146 -37 372 -76 491 -85 140
+-10 128 3 114 -122 -97 -823 340 -1627 1086 -1999 266 -132 520 -196 840 -211
+l145 -6 113 -146 c62 -80 188 -237 280 -348 l167 -202 50 -6 c190 -26 347
+-142 400 -295 39 -110 39 -273 1 -417 l-14 -51 47 -7 c243 -34 450 -220 517
+-466 23 -83 23 -269 1 -359 -8 -36 -15 -66 -14 -66 1 -1 45 -16 97 -34 132
+-43 213 -91 296 -174 124 -125 170 -252 161 -452 l-5 -121 242 -151 c320 -200
+580 -354 583 -345 12 39 98 449 117 560 l25 142 -110 243 c-105 230 -455 1008
+-796 1768 -191 425 -623 1377 -690 1521 l-50 105 73 97 c134 178 234 369 304
+580 18 54 34 96 36 94 3 -2 -7 -41 -21 -87 -15 -45 -24 -84 -21 -87 3 -4 53 6
+110 21 l105 27 173 -119 c95 -66 261 -177 367 -246 182 -118 197 -126 230
+-119 20 4 74 7 121 7 186 -1 326 -87 404 -249 42 -86 65 -179 73 -291 5 -73 8
+-84 22 -78 32 13 183 16 244 4 34 -6 98 -29 142 -49 215 -101 341 -287 376
+-554 l12 -94 121 -6 c210 -10 343 -63 457 -185 69 -74 132 -196 150 -292 19
+-106 14 -101 130 -131 412 -107 823 -209 826 -205 9 8 -18 420 -37 572 -17
+136 -22 161 -43 183 -141 153 -741 829 -1763 1987 -243 274 -532 600 -643 724
+-123 138 -200 231 -197 240 3 8 22 65 44 125 226 626 105 1343 -316 1884 -182
+233 -441 439 -722 573 -158 75 -403 146 -593 173 -48 6 -49 7 -43 38 31 179
+41 617 18 822 -70 615 -281 1173 -630 1660 -542 757 -1386 1271 -2297 1399
+-249 35 -549 45 -775 25z m516 -559 c490 -39 946 -195 1354 -464 913 -602
+1398 -1656 1264 -2746 -26 -210 -12 -187 -139 -220 -479 -122 -894 -417 -1168
+-829 -62 -94 -197 -353 -197 -378 0 -5 -39 -20 -86 -31 -185 -47 -410 -148
+-579 -259 -282 -186 -487 -412 -670 -737 l-27 -49 -122 7 c-579 33 -1110 227
+-1581 580 -147 110 -420 381 -526 521 -336 443 -528 922 -584 1457 -136 1303
+625 2523 1859 2982 366 137 804 197 1202 166z m2326 -4146 c7 -7 -67 -142
+-139 -254 -46 -71 -182 -260 -187 -260 -16 0 -199 40 -203 44 -4 3 -1 38 6 77
+34 185 171 334 354 384 52 14 159 20 169 9z m438 -466 c0 -72 -24 -167 -59
+-236 -52 -101 -49 -99 -109 -62 -29 17 -52 34 -52 36 0 2 24 37 53 77 29 41
+75 111 102 155 28 45 53 82 57 82 5 0 8 -24 8 -52z m-1507 -623 c26 -9 47 -20
+47 -24 0 -8 -163 -103 -260 -151 -103 -52 -217 -99 -323 -136 -113 -38 -111
+-41 -56 73 54 113 176 210 310 248 68 19 215 14 282 -10z m313 -562 c-4 -21
+-22 -70 -41 -109 -58 -119 -189 -224 -316 -253 -105 -25 -266 -7 -341 37 -28
+17 -37 32 -17 32 47 0 495 203 639 289 36 22 69 40 74 40 4 1 5 -16 2 -36z"/>
+</g>
+</svg>`);
+                                        break;
+                                    case "UNI":
+                                        column[field] = htmlToElement(key("Unique key", "#bfbfbf", "#dbdbdb", "#808080"));
+                                        break;
+                                }
                             case "extra":
                                 if (column[field] === "auto_increment") {
                                     column[field] = "AI";
                                     td.title = "Auto increment";
                                 }
+                                break;
                         }
 
                         if (column[field]) {
-                            if (column[field] instanceof HTMLElement) {
+                            if (column[field] instanceof HTMLElement || column[field] instanceof SVGElement) {
                                 td.appendChild(column[field]);
                             } else {
                                 td.innerText = column[field];