inkuinfo2/index.js at master · inkubio/inkuinfo2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
const api_key = "AIzaSyBHi1Wmyer2F6uyFS7fdTQiVAOYEEbr0ew"
const calendar_id = "c_971e17b8671a195c1685202eb6c52d54bf2617755521c0b832b8960c598756bf@group.calendar.google.com"

const monthNames = ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu",
                    "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu"];
const weekdays = ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"];

const updateEvents = new Event('updateEvents');

let state = {
    _data: {},
    set data(val) {
        //let valueChanged = JSON.stringify(this._data) !== JSON.stringify(val)
        this._data = val
        window.dispatchEvent(updateEvents)
    },
    get data() {
        return this._data
    },
}

let start_date = Date.now()

async function loadEvents() {
    let calendar_url = new URL("https://www.googleapis.com/calendar/v3/calendars/" + calendar_id + "/events")
    let minDate = new Date(start_date);
    minDate.setHours(0);
    minDate.setMinutes(0);
    minDate.setSeconds(0);
    let params = {
        key: api_key,
        timeMin: minDate.toISOString(),
        maxResults: 6,
        orderBy: "startTime",
        singleEvents: true,
    }
    calendar_url.search = new URLSearchParams(params).toString()
    try {
        const data = await fetch(calendar_url)

        if (!data.ok) {
            console.log("Response failed", data)
            return
        }

        state.data = await data.json().then(res => res["items"])

    } catch (err) {
        console.log(err)
    }
}
function updateCalendar() {
    if ('content' in document.createElement('template')) {
        let calendar_items = state.data;

        let events = ["#event1", "#event2", "#event3", "#event4", "#event5", "#event6"];
        events.forEach((e, i) => {
            let event = document.querySelector(e);
            event.innerHTML = "";

            let template = document.querySelector("#event");

            let clone = template.content.cloneNode(true);

            let month = clone.querySelector(".month");
            let day = clone.querySelector(".day");
            let weekday = clone.querySelector(".weekday");

            let start_time = clone.querySelector(".start_time_field");
            let end_time = clone.querySelector(".end_time_field");

            let name = clone.querySelector(".name");
            let location = clone.querySelector(".location");

            let item = calendar_items[i]

            // If calendar item does not exist return
            if (item == null) {
                return
            }

            let start_date = new Date(item.start.dateTime || item.start.date)
            let end_date = new Date(item.end.dateTime || item.end.date)

            month.textContent = monthNames[start_date.getMonth()];

            // If this field exist, it is a whole day event (no time defined)
            let isWholeDay = !!item.start.date;

            // Formatting time and day differently depending if it is a whole day event
            if (isWholeDay) {
                day.textContent = (end_date.getTime() - start_date.getTime() === 24*60*60*1000) ? start_date.getDate()
                    : start_date.getDate() + " - " + (end_date.getDate()-1);
                start_time.textContent = "";
                end_time.textContent = "";
            } else {
                day.textContent = start_date.getDate() === end_date.getDate() ? start_date.getDate()
                    : start_date.getDate() + " - " + end_date.getDate();
                start_time.textContent = ("0" + start_date.getHours()).slice(-2) + ":"
                    + ("0" + start_date.getMinutes()).slice(-2) + " - ";

                end_time.textContent = ("0" + end_date.getHours()).slice(-2) + ":"
                    + ("0" + end_date.getMinutes()).slice(-2)
            }

            weekday.textContent = weekdays[start_date.getDay()]

            name.textContent = item["summary"]
            location.textContent = item["location"]?.split(",")[0]

            // Update with new data
            event.appendChild(clone);
        })

    } else {
        console.log("HTML Templates not supported")
    }
}

function updateClock() {
    let clock = document.querySelector("#clock")
    let date = new Date(Date.now())
    clock.textContent = ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2)
}

window.addEventListener('DOMContentLoaded', loadEvents)
window.addEventListener('updateEvents', updateCalendar)

setInterval(updateClock, 1000)
setInterval(loadEvents, 10*1000)