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

Added Modal Update and settings with export

parent 65571363
No related branches found
No related tags found
No related merge requests found
Pipeline #120479 passed
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
public/demo/index.html
+ 1
− 24
View file @ ecc413d6
......@@ -9,6 +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>
</head>
<body>
<!--
......@@ -64,30 +65,6 @@
<div id="calendar"></div>
</div>
<div id="newEventModal">
<h2>New Event</h2>
<input id="eventTitleInput" placeholder="Event Title" />
<button id="saveButton">Save</button>
<button id="cancelButton">Cancel</button>
</div>
<div id="deleteEventModal">
<h2>Event</h2>
<p id="eventText"></p>
<button id="deleteButton">Delete</button>
<button id="closeButton">Close</button>
</div>
<div id="modalBackDrop"></div>
<script src="./script.js"></script>
</body>
</html>
public/demo/script.js
+ 92
− 12
View file @ ecc413d6
......@@ -21,12 +21,42 @@ let clicked = null;
let events = localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [];
const calendar = document.getElementById('calendar');
const newEventModal = document.getElementById('newEventModal');
const deleteEventModal = document.getElementById('deleteEventModal');
const backDrop = document.getElementById('modalBackDrop');
const eventTitleInput = document.getElementById('eventTitleInput');
const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
globalThis.modals = {};
class Modal {
constructor(opts) {
opts = { id: "", title: "", body: "", extrabutton: "", closebutton: "Close", "opener": false, ...opts };
if (opts.id == "" || opts.title == "") return;
let { id, title, body, extrabutton, closebutton, opener } = opts;
if (extrabutton != '') body += `<button id="${extrabutton.toLowerCase()}Button">${extrabutton}</button>`
let modalText = `<div id="${id}Modal" class="modal"><h2>${title}</h2>${body}<button id="${closebutton.toLowerCase()}Button">${closebutton}</button></div>`;
document.body.insertAdjacentHTML('beforeEnd', modalText);
this.element = document.querySelector(`#${id}Modal`);
if (opener) document.querySelector(opener).addEventListener('click', () => this.open());
this.element.querySelector(`#${closebutton.toLowerCase()}Button`)?.addEventListener('click', () => this.close());
}
open () {
this.element.style.display = 'block';
document.querySelector('#modalBackDrop').style.display = 'block';
}
close () {
this.element.style.display = 'none';
document.querySelector('#modalBackDrop').style.display = 'none';
}
}
window.modals['newEvent'] = new Modal({ id: "newEvent", title: "New Event", body: '<input id="eventTitleInput" placeholder="Event Title" />', extrabutton: "Save", closebutton: "Cancel" });
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" });
document.body.insertAdjacentHTML('beforeEnd', '<div id="modalBackDrop"></div>');
document.querySelector("#exportCalendar").addEventListener("click", () => ical_download());
const eventTitleInput = document.getElementById('eventTitleInput');
function openModal(date) {
clicked = date;
......@@ -34,12 +64,10 @@ function openModal(date) {
if (eventForDay) {
document.getElementById('eventText').innerText = eventForDay.title;
deleteEventModal.style.display = 'block';
window.modals['deleteEvent'].open();
} else {
newEventModal.style.display = 'block';
window.modals['newEvent'].open()
}
backDrop.style.display = 'block';
}
function load() {
......@@ -98,10 +126,8 @@ function load() {
}
function closeModal() {
eventTitleInput.classList.remove('error');
newEventModal.style.display = 'none';
deleteEventModal.style.display = 'none';
backDrop.style.display = 'none';
eventTitleInput?.classList?.remove('error');
Object.keys(window.modals).forEach((k) => window.modals[k].close());
eventTitleInput.value = '';
clicked = null;
load();
......@@ -184,6 +210,60 @@ if ( window.addEventListener ) {
}, true);
}
function ical_download(download=true){
var comp = new ICAL.Component(['vcalendar', [], []]);
comp.updatePropertyWithValue('prodid', '-//Plan2Go Calendar');
const events = JSON.parse(localStorage.events);
for (let i=0; i<events.length; i++) {
var vevent = new ICAL.Component('vevent'),
event = new ICAL.Event(vevent);
event.summary = events[i].title;
event.uid = 'abcdef...';
event.startDate = ICAL.Time.fromJSDate(new Date(events[i].date), false);
//event.startDate = ICAL.Time.now();
comp.addSubcomponent(vevent);
}
var iCalendarData = comp.toString();
/*
var jcalData = ICAL.parse(iCalendarData);
var vcalendar = new ICAL.Component(jcalData);
var vevent = vcalendar.getFirstSubcomponent('vevent');
var summary = vevent.getFirstPropertyValue('summary');
console.log('Summary: ' + summary);
*/
this.fileName = "my-event.ics";
this._save = function(fileURL){
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = this.fileName || 'unknown';
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
// for IE < 11
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, this.fileName || fileURL)
_window.close();
}
}
if (download) this._save( "data:text/calendar;charset=utf8," + escape(iCalendarData));
}
initButtons();
initDarkmode();
load();
public/demo/test.js
+ 0
− 96
View file @ ecc413d6
globalThis.modals = {};
class Modal {
constructor(opts) {
opts = { id: "", title: "", body: "", extrabutton: "", closebutton: "Close", "opener": false, ...opts };
if (opts.id == "" || opts.title == "") return;
let { id, title, body, extrabutton, closebutton, opener } = opts;
if (extrabutton != '') body += `<button id="${extrabutton.toLowerCase()}Button">${extrabutton}</button>`
let modalText = `<div id="${id}Modal" class="modal"><h2>${title}</h2>${body}<button id="${closebutton.toLowerCase()}Button">${closebutton}</button></div>`;
document.body.insertAdjacentHTML('beforeEnd', modalText);
this.element = document.querySelector(`#${id}Modal`);
if (opener) document.querySelector(opener).addEventListener('click', () => this.open());
this.element.querySelector(`#${closebutton.toLowerCase()}Button`)?.addEventListener('click', () => this.close());
}
open () {
this.element.style.display = 'block';
document.querySelector('#modalBackDrop').style.display = 'block';
}
close () {
this.element.style.display = 'none';
document.querySelector('#modalBackDrop').style.display = 'none';
}
}
window.modals['newEvent'] = new Modal({ id: "newEvent", title: "New Event", body: '<input id="eventTitleInput" placeholder="Event Title" />', extrabutton: "Save", closebutton: "Cancel" });
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" });
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 = [];
......@@ -126,58 +85,3 @@ const load2 = () => {
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', '-//Plan2Go Calendar');
const events = JSON.parse(localStorage.events);
for (let i=0; i<events.length; i++) {
var vevent = new ICAL.Component('vevent'),
event = new ICAL.Event(vevent);
event.summary = events[i].title;
event.uid = 'abcdef...';
event.startDate = ICAL.Time.fromJSDate(new Date(events[i].date), false);
//event.startDate = ICAL.Time.now();
comp.addSubcomponent(vevent);
}
var iCalendarData = comp.toString();
/*
var jcalData = ICAL.parse(iCalendarData);
var vcalendar = new ICAL.Component(jcalData);
var vevent = vcalendar.getFirstSubcomponent('vevent');
var summary = vevent.getFirstPropertyValue('summary');
console.log('Summary: ' + summary);
*/
this.fileName = "my-event.ics";
this._save = function(fileURL){
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = this.fileName || 'unknown';
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
// for IE < 11
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, this.fileName || fileURL)
_window.close();
}
}
if (download) this._save( "data:text/calendar;charset=utf8," + escape(iCalendarData));
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment