Skip to content
Snippets Groups Projects
Commit 65571363 authored by Miniontoby's avatar Miniontoby :writing_hand_tone1:
Browse files

Update test files and some other things

parent 65cba32d
No related branches found
No related tags found
No related merge requests found
Pipeline #114582 passed
......@@ -84,6 +84,7 @@ nav i {
width: 100%;
display: flex;
color: #247BA0;
text-align: center;
}
#weekdays div {
width: 100px;
......@@ -109,7 +110,7 @@ nav i {
justify-content: space-between;
}
.day:hover { background-color: var(--background-day-hover); }
.day + #currentDay { background-color: var(--background-current-day); }
.day + #currentDay, .day#currentDay { background-color: var(--background-current-day); }
.event {
font-size: 10px;
padding: 3px;
......@@ -124,7 +125,8 @@ nav i {
background-color: var(--background-color) !important;
box-shadow: none !important;
}
#monthDisplay { width: 200px; }
#monthDisplay, #setting { width: 200px; }
#setting {direction: rtl;}
#newEventModal, #deleteEventModal, .modal {
display: none;
z-index: 20;
......@@ -135,7 +137,7 @@ nav i {
width: 350px;
top: 100px;
left: calc(50% - 175px);
position: absolute;
position: fixed;
font-family: sans-serif;
}
#eventTitleInput {
......
......@@ -9,7 +9,7 @@
<link rel="manifest" href="../manifest.json">
<meta name="theme-color" content="#264a8a"/>
<meta name="apple-touch-icon" content="../images/icon.png">
<script src="https://unpkg.com/ical.js"></script>
<script src="https://unpkg.com/ical.js"></script>
</head>
<body>
<!--
......@@ -52,17 +52,18 @@
</div>
</div>
<div id="weekdays">
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
<div>Sunday</div>
</div>
<div id="calendar"></div>
<table id="tableing">
<tr id="weekdays">
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
</tr>
<tr id="calendar"><noscript>You need JavaScript to use our Calendar</noscript></tr>
</table>
</div>
<script src="./test.js"></script>
......
......@@ -28,19 +28,109 @@ window.modals['newEvent'] = new Modal({ id: "newEvent", title: "New Event", body
window.modals['deleteEvent'] = new Modal({ id: "deleteEvent", title: "Event", body: '<p id="eventText"></p>', extrabutton: "Delete" });
window.modals['settings'] = new Modal({ id: "settings", title: "Settings", body: '<p>Needs to be done!</p><button id="exportCalendar">Export</button><br><br>', extrabutton: "Save", opener: "#setting > i" });
function closeModal2() {
Object.keys(window.modals).forEach((k) => window.modals[k].close());
closeModal();
}
setTimeout(() => {
var old_closeModal = closeModal;
closeModal = (arguments) => {
old_closeModal.apply(this, arguments);
Object.keys(window.modals).forEach((k) => window.modals[k].close());
};
}, 100)
document.body.insertAdjacentHTML('beforeEnd', '<div id="modalBackDrop"></div>');
document.querySelector("#exportCalendar").addEventListener("click", () => ical_download());
function getWeekDays(locale=undefined) {
const baseDate = new Date(Date.UTC(2017, 0, 2)); // just a Monday
const weekDays = [];
for(let i=0;i<7;i++) {
weekDays.push(baseDate.toLocaleDateString(locale, { weekday: 'long' }));
baseDate.setDate(baseDate.getDate() + 1);
}
return weekDays;
}
const load2 = () => {
const dt = new Date();
if (nav !== 0) dt.setMonth(new Date().getMonth() + nav);
const day = dt.getDate();
const month = dt.getMonth();
const year = dt.getFullYear();
const firstDayOfMonth = new Date(year, month, 1);
const daysInMonth = new Date(year, month + 1, 0).getDate();
const dateString = firstDayOfMonth.toLocaleDateString('en-us', {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
});
const paddingDays = weekdays.indexOf(dateString.split(', ')[0]);
document.getElementById('monthDisplay').innerText =
`${dt.toLocaleDateString(undefined, { month: 'long' })} ${year}`; // undefined = fallback to user language
document.getElementById('header').style.width = "780px"; // 800 - (10px margin * 2)
let calendar2 = document.querySelector("#tableing");
calendar2.innerHTML = '';
let tr = document.createElement("tr");
tr.id = 'weekdays';
tr.style.display = 'table-row';
getWeekDays().forEach((a) => {
let td = document.createElement("td");
td.innerText = a;
tr.appendChild(td);
})
calendar2.appendChild(tr);
let cal = document.createElement("tr");
let ins = 0;
for(let i = 1; i <= paddingDays + daysInMonth; i++) {
if (i > 1 && (ins % 7) == 0) {
calendar2.appendChild(cal);
cal = document.createElement("tr");
ins = 0;
}
const daySquare = document.createElement('div');
daySquare.classList.add('day');
const dayString = `${month + 1}/${i - paddingDays}/${year}`;
if (i > paddingDays) {
daySquare.innerText = i - paddingDays;
const eventForDay = events.find(e => e.date === dayString);
if (i - paddingDays === day && nav === 0) daySquare.id = 'currentDay';
if (eventForDay) {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event');
eventDiv.innerText = eventForDay.title;
daySquare.appendChild(eventDiv);
}
daySquare.addEventListener('click', () => openModal(dayString));
} else {
daySquare.classList.add('padding');
}
let td = document.createElement("td");
td.appendChild(daySquare);
cal.appendChild(td);
ins++;
}
calendar2.appendChild(cal);
};
setTimeout(() => {globalThis.load = () => load2(); load2()}, 0) // override the function after it has been declared (since this is loaded FIRST)
function ical_download(download=true){
var comp = new ICAL.Component(['vcalendar', [], []]);
comp.updatePropertyWithValue('prodid', '-//iCal.js Wiki Example');
comp.updatePropertyWithValue('prodid', '-//Plan2Go Calendar');
const events = JSON.parse(localStorage.events);
......@@ -91,4 +181,3 @@ function ical_download(download=true){
}
if (download) this._save( "data:text/calendar;charset=utf8," + escape(iCalendarData));
}
ical_download(false);
......@@ -27,17 +27,17 @@
"theme_color": "#264a8a",
"shortcuts": [
{
"name": "How's weather today?",
"name": "What's on my planning today?",
"short_name": "Today",
"description": "View weather information for today",
"url": "/plan2go/demo/today?source=pwa",
"description": "View planning for today",
"url": "/plan2go/demo/anyday.html?today&source=pwa",
"icons": [{ "src": "/plan2go/images/today.png", "sizes": "192x192" }]
},
{
"name": "How's weather tomorrow?",
"name": "What's on my planning tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/plan2go/demo/tomorrow?source=pwa",
"description": "View planning for tomorrow",
"url": "/plan2go/demo/anyday.html?tomorrow&source=pwa",
"icons": [{ "src": "/plan2go/images/tomorrow.png", "sizes": "192x192" }]
}
],
......
......@@ -99,7 +99,7 @@ self.addEventListener('notificationclick', event => {
clients[0].focus();
clients[0].postMessage('Push notification clicked!');
} else {
self.clients.openWindow('/');
self.clients.openWindow('/plan2go/');
}
}));
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment