From 477e87a2f422baed93864ddeaf8ff34fbd12827e Mon Sep 17 00:00:00 2001 From: BlasenhauerJ Date: Tue, 13 Dec 2022 14:30:42 +0100 Subject: [PATCH] news script + multiples groups => news render on client side => add multList logic to handle differents groups of multiple settings --- src/ui/static/js/global.js | 118 ++++++++++++++++++++++--- src/ui/templates/news.html | 33 +------ src/ui/templates/settings_plugins.html | 31 +++++-- 3 files changed, 127 insertions(+), 55 deletions(-) diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js index 6421826cb..e42945138 100644 --- a/src/ui/static/js/global.js +++ b/src/ui/static/js/global.js @@ -21,21 +21,107 @@ class Menu { class News { constructor() { - this.sidebarEl = document.querySelector("[sidebar-info]"); - this.openBtn = document.querySelector("[sidebar-info-open]"); - this.closeBtn = document.querySelector("[sidebar-info-close]"); - this.openBtn.addEventListener("click", this.open.bind(this)); - this.closeBtn.addEventListener("click", this.close.bind(this)); + this.BASE_URL = "https://www.staging.bunkerweb.io/"; + this.init(); } - open() { - this.sidebarEl.classList.add("translate-x-0"); - this.sidebarEl.classList.remove("translate-x-90"); + init() { + window.addEventListener("load", async () => { + try { + const res = await fetch( + "https://www.staging.bunkerweb.io/api/posts/0/2", + { + headers: { + method: "GET", + }, + } + ); + return await this.render(res); + } catch (err) { + console.log(err); + } + }); } - close() { - this.sidebarEl.classList.add("translate-x-90"); - this.sidebarEl.classList.remove("translate-x-0"); + async render(lastNews) { + const newsContainer = document.querySelector("[news-container]"); + //remove default message + newsContainer.textContent = ""; + //render last news + lastNews.forEach((news) => { + //get info + const slug = news.slug; + const img = news.photo.url; + const excerpt = news.excerpt; + const tags = news.tags; + const date = news.date; + const lastUpdate = news.lastUpdate; + //create html card from infos + const cardHTML = this.template( + slug, + img, + excerpt, + tags, + date, + lastUpdate + ); + //add to DOM + document + .querySelector("[news-container]") + .insertAdjacentHTML("afterbegin", cardHTML); + }); + } + + template(slug, img, excerpt, tags, date, lastUpdate) { + //loop on tags to get list + let tagList = ""; + tags.forEach((tag) => { + tagList += ` + ${tag.name} + `; + }); + //create card + const card = ` +
+
+ image +

{{ post['title'] }}

+
+
+
+ ${excerpt} +
+
+ ${tagList} +
+ +
+ Posted on : ${date} + {% if post["updatedAt"] %} + Last update : ${lastUpdate} + {%endif%} +
+
+
`; + return card; } } @@ -102,7 +188,6 @@ class darkMode { class FlashMsg { constructor() { - this.delayBeforeRemove = 8000; this.openBtn = document.querySelector("[flash-sidebar-open]"); this.flashCount = document.querySelector("[flash-count]"); this.isMsgCheck = false; @@ -112,7 +197,7 @@ class FlashMsg { init() { //animate message button if message + never opened window.addEventListener("load", (e) => { - if (this.flashCount.textContent > 0) this.animeBtn(); + if (Number(this.flashCount.textContent) > 0) this.animeBtn(); }); //stop animate if clicked once this.openBtn.addEventListener("click", (e) => { @@ -193,12 +278,17 @@ class Loader { const setLoader = new Loader(); const setMenu = new Menu(); -const setNews = new News(); +const setNewsSidebar = new Sidebar( + "[sidebar-info]", + "[sidebar-info-open]", + "[sidebar-info-close]" +); const setFlashSidebar = new Sidebar( "[flash-sidebar]", "[flash-sidebar-open]", "[flash-sidebar-close]" ); +const setNews = new News(); const setDarkM = new darkMode(); const setCheckbox = new Checkbox("[sidebar-info]"); const setFlash = new FlashMsg(); diff --git a/src/ui/templates/news.html b/src/ui/templates/news.html index ef50a4e1e..76f62d195 100644 --- a/src/ui/templates/news.html +++ b/src/ui/templates/news.html @@ -56,43 +56,12 @@ /> -
- {% if posts %} {% for post in posts %} - - -
-

{{ post['title'] }}

- - image -
- {{ post['description'] }} -
-
- -
- {{ post['date'] }}{{ post['reading_time'] }} read -
- - - {% endfor %} {% else %} +

Impossible to connect to blog news.

- {% endif %}
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html index 17fa4d071..4f92eb1c7 100644 --- a/src/ui/templates/settings_plugins.html +++ b/src/ui/templates/settings_plugins.html @@ -221,25 +221,38 @@
+ + {# get number of multiple groups for the plugin #} + {%set multList = []%} + {% for setting, value in plugin["settings"].items() %} + {% if current_endpoint + == "global-config" and value['context'] == "global" and value['multiple'] and not value['multiple'] in multList or current_endpoint == + "services" and value['context'] == "multisite" and value['multiple'] and not value['multiple'] in multList %} + {% set multList = multList.append(value['multiple']) %} + {%endif%} + {%endfor%} - - {% if not plugin['multiple'] %} + {%for multiple in multList %} +
- {{plugin['name']}} + {{multiple}}
-
-