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();