From b9ad3f84db97b0509b5f49bae4ac55092d673fe7 Mon Sep 17 00:00:00 2001
From: Jack Wilkinson <me@jackwilky.com>
Date: Mon, 20 Jan 2025 17:46:50 +0000
Subject: [PATCH] Improved ui

---
 .../assets/src/components/PluginUpdates.vue   | 130 +++++++++++++---
 .../updates/assets/src/components/Product.vue | 142 +++++++-----------
 2 files changed, 160 insertions(+), 112 deletions(-)

diff --git a/modules/system/controllers/updates/assets/src/components/PluginUpdates.vue b/modules/system/controllers/updates/assets/src/components/PluginUpdates.vue
index 5ea186c82..7505ad9a3 100644
--- a/modules/system/controllers/updates/assets/src/components/PluginUpdates.vue
+++ b/modules/system/controllers/updates/assets/src/components/PluginUpdates.vue
@@ -1,23 +1,7 @@
 <template>
-    <div>
-        <div class="row">
-            <div class="col-12 col-md-4">
-                <div class="btn-group" role="group" aria-label="...">
-                    <button type="button"
-                            :class="`btn btn-${active === 'popular' ? 'primary' : 'default'}`"
-                            @click="activePlugins = 'popular'; filter = null;"
-                    >Popular</button>
-                    <button type="button"
-                            :class="`btn btn-${active === 'featured' ? 'primary' : 'default'}`"
-                            @click="activePlugins = 'featured'; filter = null;"
-                    >Featured</button>
-                    <button type="button"
-                            :class="`btn btn-${active === 'all' ? 'primary' : 'default'}`"
-                            @click="activePlugins = 'all'; filter = null;"
-                    >All</button>
-                </div>
-            </div>
-            <div class="col-12 col-md-6">
+    <div class="container-fluid">
+        <div class="row mx-5">
+            <div class="col-12">
                 <div class="product-search">
                     <input
                         ref="search"
@@ -26,13 +10,25 @@
                         class="product-search-input search-input-lg typeahead"
                         :placeholder="searchString"
                         data-search-type="plugins"
-                        @keydown="filter = this.$refs.search.value; activePlugins = 'all';"
+                        v-model="filter"
+                        @keydown="activePlugins = 'all'"
                     />
                     <i class="icon icon-search"></i>
                     <i class="icon loading" style="display: none"></i>
                 </div>
             </div>
-            <div class="col-12 col-md-2">
+            <div class="col-12 btn-row">
+                <div class="btn-group" role="group" aria-label="...">
+                    <button type="button"
+                            :class="`btn btn-${active === 'popular' ? 'primary' : 'default'}`"
+                            @click="activePlugins = 'popular'; filter = null;"
+                    >Popular</button>
+                    <button type="button"
+                            :class="`btn btn-${active === 'featured' ? 'primary' : 'default'}`"
+                            @click="activePlugins = 'featured'; filter = null;"
+                    >Featured</button>
+                </div>
+
                 <button
                     type="button"
                     data-control="popup"
@@ -81,15 +77,101 @@ export default {
         this.$request('onGetMarketplacePlugins', {
             success: (response) => {
                 this.plugins = response.result;
+
+                if (localStorage.winterInstalling) {
+                    const installing = JSON.parse(localStorage.winterInstalling);
+                    if (installing.length > 0) {
+                        this.displayInstall(installing[installing.length - 1]);
+                    }
+                }
             }
         });
+    },
+    methods: {
+        displayInstall(installKey) {
+            $.popup({
+                size: 'large installer-popup',
+                content: `
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                        <h4 class="modal-title">Installing...</h4>
+                    </div>
+                    <div class="modal-body"></div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
+                    </div>
+                `
+            });
+
+            const popup = document.querySelector('.installer-popup .modal-body');
+
+            const prepareMessage = (str) => {
+                return `<div class="install-message">${
+                    str.split("\n").filter((line) => line.indexOf('FINISHED:') === 0 ? false : !!line).map((line) => {
+                        ['INFO', 'ERROR'].forEach((status) => {
+                            if (line.indexOf(status) === 0) {
+                                line = `<span class="message-${status.toLowerCase()}">${status}</span> ${line.substring(status.length + 1)}`;
+                            }
+                        });
+
+                        let search;
+
+                        if (search = line.match(/^[\d].*:\ /)) {
+                            line = `<span class="message-version">${search[0].replace(':', '').trim()}</span>:${line.substring(search[0].length + 1)}`;
+                        }
+
+                        if (search = line.match(/\.*?[\d][\w]*DONE$/)) {
+                            line = `${line.substring(0, line.length - search[0].length)} <span class="message-done">${search[0].match(/\.*?[\d][\w]*DONE$/)[0].replace(/\.*/, '').replace('DONE', '')}</span>`;
+                        }
+
+                        return `<pre>${line}</pre>`;
+                    }).join("\n")
+                }</div>`;
+            };
+
+            const checkStatus = () => {
+                this.$request('onInstallProductStatus', {
+                    data: {
+                        install_key: installKey
+                    },
+                    success: (statusResponse) => {
+                        popup.innerHTML = prepareMessage(statusResponse.data);
+
+                        if (!statusResponse.done) {
+                            return setTimeout(checkStatus, 500);
+                        }
+
+                        const store = JSON.parse(localStorage.winterInstalling);
+                        store.splice(store.indexOf(installKey), 1);
+                        localStorage.winterInstalling = JSON.stringify(store);
+                    }
+                })
+            };
+            checkStatus();
+        }
     }
 };
 </script>
 <style>
-.typeahead {
-    height: 36px;
-    font-size: 18px;
+.mt-lg-3 {
+    margin-top: 15px;
+}
+@media (min-width: 992px) {
+    .text-md-right {
+        text-align: right;
+    }
+    .mt-lg-3 {
+        margin-top: 0;
+    }
+}
+.btn-row {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin: auto auto 15px auto;
+}
+.mx-5 {
+    margin: auto 5rem;
 }
 .products {
     display: flex;
diff --git a/modules/system/controllers/updates/assets/src/components/Product.vue b/modules/system/controllers/updates/assets/src/components/Product.vue
index 53ceb7bd7..2c95a555e 100644
--- a/modules/system/controllers/updates/assets/src/components/Product.vue
+++ b/modules/system/controllers/updates/assets/src/components/Product.vue
@@ -1,25 +1,24 @@
 <template>
     <div class="product-card p-2 mb-1">
         <div class="product-body">
-            <div class="product-row relative">
+            <div class="product-row">
                 <div class="product-image">
                     <img :src="product.icon" :alt="product.name">
                 </div>
-                <div class="product-description">
-                    <div>
-                        <p class="product-name">{{product.name}}</p>
-                        <p>{{product.description}}</p>
-                    </div>
-                </div>
-                <div class="absolute">
-                    <button v-if="!product.installed && !installing"
-                            class="btn btn-info"
-                            @click="install()"
-                    >Install</button>
-                    <div v-if="installing" class="installing"></div>
-                    <p v-if="product.installed" class="text-muted">This {{type}} is installed.</p>
+                <div>
+                    <p class="product-name">{{product.name}}</p>
+                    <p>{{product.description}}</p>
                 </div>
             </div>
+
+            <div class="install-container">
+                <button v-if="!product.installed && !installing"
+                        class="btn btn-info"
+                        @click="install()"
+                >Install</button>
+                <div v-if="installing" class="installing"></div>
+                <p v-if="product.installed" class="text-muted">This {{type}} is installed.</p>
+            </div>
         </div>
         <div class="product-footer">
             <div class="product-footer-item">
@@ -60,58 +59,14 @@ export default {
                     package: this.product.package
                 },
                 success: (response) => {
-                    $.popup({
-                        size: 'installer-popup',
-                        content: `
-                            <div class="modal-header">
-                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                <h4 class="modal-title">Installing ${this.product.name}</h4>
-                            </div>
-                            <div class="modal-body"></div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
-                                <button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
-                            </div>
-                        `
-                    });
-
-                    const popup = document.querySelector('.size-installer-popup .modal-body');
-
-                    const prepareMessage = (str) => {
-                        return `<div class="install-message">${
-                            str.split("\n").filter((line) => line.indexOf('FINISHED:') === 0 ? false : !!line).map((line) => {
-                                ['INFO', 'ERROR'].forEach((status) => {
-                                    if (line.indexOf(status) === 0) {
-                                        line = `
-                                            <div class="message-line">
-                                                <span class="message-${status.toLowerCase()}">${status}</span> <pre>${line.substring(status.length + 1)}</pre>
-                                            </div>
-                                        `;
-                                    }
-                                });
-
-                                return line;
-                            }).join("\n")
-                        }</div>`;
-                    };
-
-                    const checkStatus = () => {
-                        this.$request('onInstallProductStatus', {
-                            data: {
-                                install_key: response.install_key
-                            },
-                            success: (statusResponse) => {
-                                popup.innerHTML = prepareMessage(statusResponse.data);
+                    this.$parent.displayInstall(response.install_key);
 
-                                if (!statusResponse.done) {
-                                    return setTimeout(checkStatus, 500);
-                                }
-
-                                this.installing = false;
-                            }
-                        })
-                    };
-                    checkStatus();
+                    let store = [];
+                    if (localStorage.winterInstalling) {
+                        store = JSON.parse(localStorage.winterInstalling);
+                    }
+                    store.push(response.install_key);
+                    localStorage.winterInstalling = JSON.stringify(store);
                 }
             });
         }
@@ -122,7 +77,7 @@ export default {
 .product-card {
     flex: 1 1 500px;
     box-sizing: border-box;
-    margin: 1rem .25em;
+    margin: 1.5em .5em;
 }
 
 @media screen and (min-width: 40em) {
@@ -142,7 +97,7 @@ export default {
     text-wrap: wrap;
 }
 .product-body {
-    border: 2px solid #cdcdcd;
+    border: 2px solid #eaeaea;
     border-bottom: 0;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
@@ -151,23 +106,11 @@ export default {
     align-items: stretch;
     min-height: 82%;
     text-wrap: wrap;
-}
-.product-description {
-    margin-left: 10px;
-}
-.product-body .relative {
     position: relative;
-    display: block;
-    text-wrap: wrap;
-}
-.product-body .absolute {
-    position: absolute;
-    right: 5px;
-    top: 5px;
 }
 .product-footer {
-    background: #ececec;
-    border: 2px solid #cdcdcd;
+    background: #f9f9f9;
+    border: 2px solid #eaeaea;
     border-top: 0;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -176,12 +119,6 @@ export default {
     justify-content: space-between;
     gap: 15px;
 }
-.product-image {
-    width: 35%;
-    border-radius: 6px;
-    margin: 10px;
-    overflow: hidden;
-}
 .product-image img {
     width: -webkit-fill-available;
 }
@@ -190,7 +127,17 @@ export default {
 }
 .product-row {
     display: flex;
+    justify-content: left;
     align-self: stretch;
+    gap: 25px;
+    flex-wrap: nowrap;
+}
+.product-image {
+    width: 20%;
+}
+.product-row .product-image img {
+    min-width: 100%;
+    border-radius: 6px;
 }
 .product-footer-item {
     display: flex;
@@ -199,22 +146,35 @@ export default {
     color: white;
     padding: 6px;
     border-radius: 6px;
+    cursor: pointer;
 }
 .product-footer .stars .product-badge {
     background: #f0ad4e;
+    opacity: 0.7;
 }
 .product-footer .downloads .product-badge {
     background: #183638;
+    opacity: 0.7;
 }
 .product-footer .github .product-badge {
     background: #010409;
+    opacity: 0.7;
 }
 .product-footer .packagist .product-badge {
     background: #f28d1a;
+    opacity: 0.7;
+}
+.product-footer .product-badge:hover {
+    opacity: 1;
 }
 .product-footer .stars, .product-footer .github {
     margin-right: 7px;
 }
+.install-container {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+}
 .installing:after {
     content: ' ';
     display: block;
@@ -228,7 +188,7 @@ export default {
     margin: 0;
 }
 .install-message span, .install-message pre {
-    display: inline;
+    margin: auto;
     text-wrap: wrap;
 }
 .install-message .message-info {
@@ -248,4 +208,10 @@ export default {
 .message-line {
     margin-bottom: 5px;
 }
+.message-done {
+    color: #ead707;
+}
+.message-version {
+    color: #04a3a8;
+}
 </style>