From feba294730de58197c830c7c72494ef2cba73bc6 Mon Sep 17 00:00:00 2001 From: Andre Beging Date: Mon, 8 Nov 2021 13:03:17 +0100 Subject: [PATCH] Loading overlay, reload functions, color fixes --- foodsharing_planner.user.js | 121 +++++++++++++++++++++++++++++++++--- 1 file changed, 114 insertions(+), 7 deletions(-) diff --git a/foodsharing_planner.user.js b/foodsharing_planner.user.js index 7120828..1952448 100644 --- a/foodsharing_planner.user.js +++ b/foodsharing_planner.user.js @@ -1,9 +1,9 @@ // ==UserScript== // @name Foodsharing Planner // @namespace http://tampermonkey.net/ -// @version 0.5 -// @updateURL https://github.com/TroogS/userscripts/blob/master/foodsharing_planner.user.js -// @downloadURL https://github.com/TroogS/userscripts/blob/master/foodsharing_planner.user.js +// @version 0.6 +// @updateURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js +// @downloadURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js // @description Generate a calendar like view as addition to the foodsharing website germany, austria and switzerland // @author A. Beging // @match https://foodsharing.de* @@ -42,13 +42,37 @@ var gFirstDayDate; CreateButton(); gFirstDayDate = GetFirstDay(); + var weekPanel = CreateElement("div", "week"); var mainPanel = CreateElement("div", "fspl d-none", weekPanel); + mainPanel.append(CreatingLoadingOverlay()); CreateNavigationButtons(mainPanel); document.querySelectorAll("body")[0].append(mainPanel); })(); +function CreatingLoadingOverlay() { + var loadingOverlay = CreateElement("div", "loading-overlay hidden"); + + var spinnerDiv = CreateElement("div"); + spinnerDiv.innerHTML = ''; + spinnerDiv.innerHTML += " Lade..."; + + loadingOverlay.append(spinnerDiv); + + return loadingOverlay; +} + +function ShowLoadingOverlay() { + var loadingOverlay = document.querySelectorAll(".fspl .loading-overlay")[0]; + loadingOverlay.classList.remove('hidden'); +} + +function HideLoadingOverlay() { + var loadingOverlay = document.querySelectorAll(".fspl .loading-overlay")[0]; + loadingOverlay.classList.add('hidden'); +} + GM_addStyle ( ` a.navbar-brand.brand span:first-child, @@ -82,11 +106,37 @@ a.navbar-brand.brand span:nth-child(2) span{ overflow-y: auto; } +.fspl .loading-overlay { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.fspl .loading-overlay.hidden { + display: none; +} + +.fspl .loading-overlay > div { + font-size: 2rem; +} + +.fspl .loading-overlay i { + animation: rotation 2s linear infinite; +} + .day { flex: 1; border: 1px solid #533a20; height: max-content; - min-height: 100%; + height: 100%; +} + +.day.today { + background-color: #ffeeba; } .day .day-title { @@ -103,6 +153,14 @@ a.navbar-brand.brand span:nth-child(2) span{ padding: 5px; } +.day .pickup.me { + background-color: #d8ffbe; +} + +.day .pickup > a { + color: #000; +} + .day .pickup.pickup-green { border-left-color: #64ae24; } @@ -153,6 +211,15 @@ a.navbar-brand.brand span:nth-child(2) span{ color: #533a20; } +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + ` ); async function LoadMe() { @@ -162,6 +229,8 @@ async function LoadMe() { } async function BuildPlannerAsync() { + ShowLoadingOverlay(); + var weekPanel = document.querySelectorAll(".fspl .week")[0]; weekPanel.innerHTML = ""; @@ -216,12 +285,15 @@ async function BuildPlannerAsync() { } } }); + + HideLoadingOverlay(); } function CreateNavigationButtons(mainPanel) { var navigationPanel = CreateElement("div", "fspl-nav text-center"); var prevButton = CreateElement("button", "button m-1"); + prevButton.setAttribute("title", "Vorherige Woche"); prevButton.innerHTML = ''; prevButton.addEventListener('click',function () { gFirstDayDate.setDate(gFirstDayDate.getDate() - 7); @@ -229,7 +301,26 @@ function CreateNavigationButtons(mainPanel) { }); navigationPanel.append(prevButton); + var todayButton = CreateElement("button", "button m-1"); + todayButton.setAttribute("title", "Heute"); + todayButton.innerHTML = ''; + todayButton.addEventListener('click',function () { + gFirstDayDate = GetFirstDay(); + BuildPlannerAsync(); + }); + navigationPanel.append(todayButton); + + var reloadButton = CreateElement("button", "button m-1"); + reloadButton.setAttribute("title", "Neu laden"); + reloadButton.innerHTML = ''; + reloadButton.addEventListener('click',function () { + gLoaded = false; + BuildPlannerAsync(); + }); + navigationPanel.append(reloadButton); + var nextButton = CreateElement("button", "button m-1"); + nextButton.setAttribute("title", "Nächste Woche"); nextButton.innerHTML = ''; nextButton.addEventListener('click',function () { gFirstDayDate.setDate(gFirstDayDate.getDate() + 7); @@ -267,7 +358,9 @@ function CreatePickupDiv(data) { var element = CreateElement("div", elementClass); - var headerSpan = CreateElement("div", "font-weight-bold", data.store.name); + var headerSpan = CreateElement("a", "font-weight-bold", data.store.name); + headerSpan.setAttribute("href", "https://foodsharing.de/?page=fsbetrieb&id=" + data.store.id); + headerSpan.setAttribute("target", "_blank"); element.append(headerSpan); var hours = (data.pickup.dateObj.getHours() < 10 ? '0' : '') + data.pickup.dateObj.getHours(); @@ -286,6 +379,10 @@ function CreatePickupDiv(data) { var imgUrl = 'https://' + window.location.hostname + '/images/mini_q_' + slot.profile.avatar; if(slot.profile.avatar.startsWith('/api/')) imgUrl = slot.profile.avatar + '?w=35&h=35'; + if(slot.profile.id == userId) { + element.classList.add("me"); + } + var imgClass = ""; if(!slot.isConfirmed) imgClass = "not-confirmed"; var imgDiv = CreateElement("div", imgClass); @@ -378,7 +475,10 @@ function CreateColumn(num, title) { titleDiv.innerHTML = titleDiv.innerHTML + "
" + GetDateText(displayDate); - var day = CreateElement("div", "day day-" + num, titleDiv); + var classes = "day day-" + num; + if(IsToday(displayDate)) classes += " today"; + + var day = CreateElement("div", classes, titleDiv); return day; } @@ -388,9 +488,16 @@ function GetTimeText(date) { } function GetDateText(date) { - return WithLeadingZeros(date.getDate(), 2) + "." + WithLeadingZeros(date.getMonth(), 2) + "." + WithLeadingZeros(date.getFullYear(), 4) + return WithLeadingZeros(date.getDate(), 2) + "." + WithLeadingZeros(date.getMonth() + 1, 2) + "." + WithLeadingZeros(date.getFullYear(), 4) } +const IsToday = (date) => { + const today = new Date() + return date.getDate() === today.getDate() && + date.getMonth() === today.getMonth() && + date.getFullYear() === today.getFullYear(); +}; + function WithLeadingZeros(number, length) { var stringNumber = number.toString();