updated (see CHANGELOG.md)

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 13.08.2024
+- added notification thing on website for new updates
+
 ## 08.05.2024
 - added sexy sidebar to website (cooler updates soon, maybe)
 

dist/js/modules/Info.js

@@ -7,9 +7,11 @@ const jquery_1 = __importDefault(require("jquery"));
 const index_1 = __importDefault(require("../index"));
 const Info_1 = __importDefault(require("./Info"));
 const Utils_1 = __importDefault(require("./Utils"));
+const updateItemTemplate = (0, jquery_1.default)(".glu-update-item-template"), updateList = (0, jquery_1.default)(".glu-updates");
 exports.default = {
     accountStateFetched: false,
     autoFetchAccountInformation: false,
+    _uidInfo: null,
     AccountPermissions: {
         basic: { name: "Basic", color: "#698daf" },
         tester: { name: "Tester", color: "#ac4a4a" },
@@ -18,9 +20,28 @@ exports.default = {
     Init() {
         if (Info_1.default.autoFetchAccountInformation)
             Info_1.default.UpdateAccoutState();
-        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onOpenStart = (e) => {
+        fetch(`${index_1.default.options.api_url()}uid`, { credentials: "include" }).then(async (res) => {
+            if (!res.ok)
+                return console.error(res);
+            const uidInfo = await res.json();
+            (0, jquery_1.default)(".sidenav-openbtn").attr("notif-count", uidInfo.uN);
+            (0, jquery_1.default)(".updates-new-label").attr("notif-count", uidInfo.uN);
+        });
+        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onOpenStart = async (e) => {
             Info_1.default.UpdateStats();
             Info_1.default.UpdateAccoutState();
+            Info_1.default.UpdateChangeLog();
+            await fetch(`${index_1.default.options.api_url()}uid/update`, { credentials: "include", method: "POST" }).then(async (res) => {
+                if (!res.ok)
+                    return console.error(res);
+                const uidInfo = await res.json();
+                Info_1.default._uidInfo = uidInfo;
+                (0, jquery_1.default)(".sidenav-openbtn").attr("notif-count", uidInfo.uN);
+            });
+        };
+        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onCloseEnd = async () => {
+            if (Info_1.default._uidInfo)
+                (0, jquery_1.default)(".updates-new-label").attr("notif-count", Info_1.default._uidInfo.uN);
         };
         (0, jquery_1.default)(".account-login").on("click", async () => {
             (0, jquery_1.default)(".account-login").attr("disabled", "disabled");
@@ -35,6 +56,24 @@ exports.default = {
         });
         console.log(`[Client]: Loaded Info Modal (took ${new Date().getTime() - index_1.default.pageTime}ms).`);
     },
+    async UpdateChangeLog() {
+        await fetch(`${index_1.default.options.api_url()}api/uglifier/updatelog`).then(res => res.json()).then(res => {
+            Object.keys(res).forEach(date => {
+                const updateData = res[date], item = updateItemTemplate.contents().clone();
+                item.find(".glu-update-date").text(date);
+                updateData.forEach(updateContent => {
+                    const span = (0, jquery_1.default)(document.createElement("span")), tooltipContent = (0, jquery_1.default)(document.createElement("div"));
+                    tooltipContent.attr("id", "tooltip-content").html(updateContent).hide();
+                    span.addClass("glu-update-content").addClass("tooltipped");
+                    span.attr("data-tooltip-id", "tooltip-content").attr("data-position", "right");
+                    span.html(updateContent).attr("title", updateContent.replace(/\<\/?\w+>/gm, ""));
+                    item.find(".glu-update-content-list").append(span).append(tooltipContent);
+                    //M.Tooltip.init(span)
+                });
+                item.appendTo(updateList);
+            });
+        });
+    },
     async UpdateStats() {
         await fetch(`${index_1.default.options.api_url()}api/uglifier/stats`, { cache: "no-store" }).then(async (res) => {
             if (res.ok) {

dist/js/modules/Request.js

@@ -10,7 +10,7 @@ exports.default = {
     async new(func, code, options, uglifier_options, clientSession) {
         const start_tick = new Date().getTime();
         console.log(`new function request`, func);
-        return await fetch(`${options.api_url()}${func}`, { method: "POST", body: code, credentials: "include", headers: { "uglifier-options": JSON.stringify(uglifier_options), "uglifier-session": clientSession } }).catch(error => {
+        return await fetch(`${options.api_url()}uglify/${func}`, { method: "POST", body: code, credentials: "include", headers: { "uglifier-options": JSON.stringify(uglifier_options), "uglifier-session": clientSession } }).catch(error => {
             const _error = error;
             Editor_1.default.SetValue(Request_1.default.CreateResponseError("lua", _error.message, Editor_1.default.GetValue()));
             Editor_1.default.ToggleLoading();

index.html

@@ -40,7 +40,7 @@
         <div class="sidenav z-depth-5 leftmenu-sidebar" id="slide-out">
             <div class="user-view z-depth-2">
                 <div class="account-information">
-                    <div class="account-info-background background"><img src="images/code-background2.PNG"></div>
+                    <div class="account-info-background background"><img src="images/code-background2.PNG" loading="lazy"></div>
                     <div class="account-information-user">
                         <img src="" alt="avatar" id="discord-avatar">
                         <li>
@@ -66,15 +66,14 @@
                 <div class="glu-statistic tooltipped" data-tooltip="Total count of called functions." data-position="right"><span class="glu-statistic-name">Total Functions:</span><span id="total_functions_called" class="glu-statistic-value">Loading...</span></div>
             </div>
             <div class="seperator text tooltipped seperator-margin" data-position="right" data-tooltip="List of recent updates and changes.">
-                <span>Updates</span>
+                <span>Updates <span class="updates-new-label" notif-count="0"></span></span>
             </div>
             <div class="info-content glu-updates">
-                <small>Soon &trade;</small>
                 <template class="glu-update-item-template">
                     <div class="glu-update-item">
                         <span class="glu-update-date">xx.yy.zzzz</span>
                         <div class="glu-update-content-list">
-                            <span class="glu-update-content">N/A</span>
+                            <span class="glu-update-content hide">N/A</span>
                         </div>
                     </div>
                 </template>

index.ts

@@ -1,5 +1,6 @@
 // todo: fully move settings to automated thing so i dont have to copy paste elements everytime i wanna make a new setting
 
+import self from ".";
 import $ from "jquery";
 import Editor from "./modules/Editor";
 import Settings from "./modules/Settings";
@@ -112,4 +113,11 @@ export interface UglifierSettings {
 
     memoize_function_calls: boolean,
     no_decoder_functions: boolean
+}
+
+export interface UIDInfo {
+    uN: number,
+    sN: Array<number>,
+    lu: number,
+    uid: string
 }

modules/Info.ts

@@ -1,12 +1,17 @@
 import $ from "jquery";
-import index, { OAuthGetResponse, SessionInfo, UglifierStats } from "../index"
+import index, { OAuthGetResponse, SessionInfo, UglifierStats, UIDInfo } from "../index"
 import self from "./Info"
 import Utils from "./Utils"
 
+const updateItemTemplate = $(".glu-update-item-template"),
+    updateList = $(".glu-updates")
+
 export default {
     accountStateFetched: false,
     autoFetchAccountInformation: false,
 
+    _uidInfo: null,
+
     AccountPermissions: {
         basic: { name: "Basic", color: "#698daf" },
         tester: { name: "Tester", color: "#ac4a4a" },
@@ -16,9 +21,28 @@ export default {
     Init() {
         if (self.autoFetchAccountInformation) self.UpdateAccoutState()
 
-        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onOpenStart = (e) => {
+        fetch(`${index.options.api_url()}uid`, { credentials: "include" }).then(async res => {
+            if (!res.ok) return console.error(res)
+            const uidInfo: UIDInfo = await res.json()
+            $(".sidenav-openbtn").attr("notif-count", uidInfo.uN)
+            $(".updates-new-label").attr("notif-count", uidInfo.uN)
+        })
+
+        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onOpenStart = async (e) => {
             self.UpdateStats()
             self.UpdateAccoutState()
+            self.UpdateChangeLog()
+
+            await fetch(`${index.options.api_url()}uid/update`, { credentials: "include", method: "POST" }).then(async res => {
+                if (!res.ok) return console.error(res)
+                const uidInfo: UIDInfo = await res.json()
+                self._uidInfo = uidInfo
+                $(".sidenav-openbtn").attr("notif-count", uidInfo.uN)
+            })
+        }
+
+        M.Sidenav.getInstance(document.querySelector(".leftmenu-sidebar")).options.onCloseEnd = async () => {
+            if (self._uidInfo) $(".updates-new-label").attr("notif-count", self._uidInfo.uN)
         }
 
         $(".account-login").on("click", async () => {
@@ -37,6 +61,32 @@ export default {
         console.log(`[Client]: Loaded Info Modal (took ${new Date().getTime() - index.pageTime}ms).`)
     },
 
+    async UpdateChangeLog() {
+        await fetch(`${index.options.api_url()}api/uglifier/updatelog`).then(res => res.json()).then(res => {
+            Object.keys(res).forEach(date => {
+                const updateData: Array<string> = res[date],
+                    item = updateItemTemplate.contents().clone()
+                item.find(".glu-update-date").text(date)
+
+                updateData.forEach(updateContent => {
+                    const span = $(document.createElement("span")),
+                        tooltipContent = $(document.createElement("div"))
+
+                    tooltipContent.attr("id", "tooltip-content").html(updateContent).hide()
+                    span.addClass("glu-update-content").addClass("tooltipped")
+                    span.attr("data-tooltip-id", "tooltip-content").attr("data-position", "right")
+
+                    span.html(updateContent).attr("title", updateContent.replace(/\<\/?\w+>/gm, ""))
+                    item.find(".glu-update-content-list").append(span).append(tooltipContent)
+
+                    //M.Tooltip.init(span)
+                })
+
+                item.appendTo(updateList)
+            })
+        })
+    },
+
     async UpdateStats() {
         await fetch(`${index.options.api_url()}api/uglifier/stats`, { cache: "no-store" }).then(async (res: Response) => {
             if (res.ok) {

modules/Request.ts

@@ -8,7 +8,7 @@ export default {
         console.log(`new function request`, func);
 
         return await fetch(
-            `${options.api_url()}${func}`, { method: "POST", body: code, credentials: "include", headers: { "uglifier-options": JSON.stringify(uglifier_options), "uglifier-session": clientSession } }).catch(error => {
+            `${options.api_url()}uglify/${func}`, { method: "POST", body: code, credentials: "include", headers: { "uglifier-options": JSON.stringify(uglifier_options), "uglifier-session": clientSession } }).catch(error => {
                 const _error: Error = error
                 Editor.SetValue(Request.CreateResponseError("lua", _error.message, Editor.GetValue()))
                 Editor.ToggleLoading()

style.css

@@ -233,11 +233,7 @@ body.light~.select-dropdown {
     box-shadow: none;
 }
 
-.sidenav-openbtn[notif-count="0"]:before {
-    display: none !important;
-}
-
-.sidenav-openbtn::before {
+*[notif-count]::before {
     content: attr(notif-count);
     position: absolute;
     bottom: 0;
@@ -259,6 +255,29 @@ body.light~.select-dropdown {
     text-wrap: wrap;
 }
 
+*[notif-count="0"]:before,
+.updates-new-label[notif-count="0"] {
+    display: none !important;
+}
+
+.updates-new-label {
+    content: attr(notif-count);
+    background: #4caf50 !important;
+    border-radius: 3em;
+    width: 15px;
+    height: 15px;
+    font-size: 11px;
+    position: absolute;
+    margin-left: 5px;
+    transform: translateY(-5px);
+    text-align: center;
+    align-content: center;
+}
+
+.leftmenu-sidebar {
+    overflow-x: hidden !important;
+}
+
 .leftmenu-sidebar>.user-view {
     padding: 0 !important;
 }
@@ -613,7 +632,7 @@ code.multiline {
 }
 
 .glu-updates {
-    max-height: 25em;
+    max-height: 35%;
     padding: 10px;
     overflow: hidden auto;
 }
@@ -626,6 +645,7 @@ code.multiline {
     text-align: left;
     text-decoration: underline;
     margin-bottom: 10px;
+    margin-top: 10px;
     font-weight: bold;
 }