Calendar integration

README.md

@@ -1,3 +1,16 @@
 # calendar-extension
 
 Denne chrome-extensionen legger dine online arrangementer rett inn i google calender ved påmelding. 
+
+
+## Litt om hvordan det fungerer
+
+
+### oauth.js
+Kjører i popup.html og hører etter trykk på knappene. Sender melding (gjennom chrome.runtime.sendMessage) når bruker skal autentiseres. Denne meldingen plukkes opp av background.js og bruker autentiseres så mot Google. 
+
+### background.js
+background.js kjører hele tiden når utvidelsen kjører.
+Denne håndterer messages mellom de ulike scriptsene. 
+
+Ved autentisering (se oauth.js) lagres key og token i localStorage, slik at background.js kan sende denne informasjonen til content script-et (foreløpig addEvent.js) når det skal postes et event til API-et

addEvent.js

@@ -1,14 +1,98 @@
-// Ved å legge til lenken: https://online.ntnu.no/events/*  under "content_scripts" i manifest.json, kan vi bestemme spesefike scripts og css-filer
-// som skal kjøres ved følgende url. * betyr at filene vi legger til vil kjøres på alt som oppfyller alt frem til stjernen og uansett hva som kommer etter.
+/* Denne filen blir insertet når man går til en online-side.
+Brukes så for å posteEvent()*/
 
-// Her legger vi til en eventlistener på siden vi befinner oss på.
-document.addEventListener("click", (e)=> {
+async function postEvent(event) {
+    /* Funksjon postEvent()
 
-    // her trekker vi ut teksten til knappen som ble klikket på, og sjekker om det samsvarer med den knappen vi ønsker å gi funksjonalitet til.
-    if (e.target.innerText == "Meld meg på") {
-        console.log("Du har nå blitt meldt på! ");
+    Resultat:
+    Legger til event til autentisert brukers kalender.
+
+    Beskrivelse:
+    Ytre funksjon som fetcher riktige credentials (fra background.js) og deretter
+    caller PostEventInner med disse og eventet.*/
+
+    // Brukes for å sende request til background.js
+    const extension_id = "elijkjhoojegfcnehlpgbkacplephicj"
+
+    // Sender requests til background.js etter credentials.
+    chrome.runtime.sendMessage(
+      extension_id,
+      { request: "credentials" },
+      async function (response) {
+        // Response er et objekt med verdiene API_KEY og token
+        await postEventInner(response, event)
+      }
+    )
+}
+
+
+async function postEventInner(credentials) {
+    /* Indre funksjon som blir callet fra postEvent() og gjør
+        selve POST-requesten til kalender-API-et.*/
+
+  const API_KEY = credentials.API_KEY
+  const token = credentials.token
+
+  let eventData = await getEventData()
+
+  chrome.storage.local.get(["online_calendar_id"], (result) => {
+    const online_calendar_id = result.online_calendar_id
+
+    /* Statisk HTTP-header som brukes for å poste event */
+    var init = {
+      method: "POST",
+      async: true,
+      headers: {
+        Authorization: "Bearer " + token,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(eventData),
     }
-    else if (e.target.innerText == "Meld meg på venteliste") {
-        console.log("Du har nå blitt satt på venteliste. Du er nummer # i køen");
+
+    // Poster event til kalender-API
+    fetch(
+      "https://www.googleapis.com/calendar/v3/calendars/" +
+      online_calendar_id + "/events?key=" + API_KEY,
+      init
+    )
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Test inni fetch")
+      console.log(data) // Respons fra event
+    })
+  })
+}
+
+// Returnerer et objekt med eventData som skal plasseres i body i postEvent
+async function getEventData() {
+  eventID = window.location.href.split("/")[4]
+  let response = await fetch('https://old.online.ntnu.no/api/v1/events/' + eventID + '/')
+  let data = await response.json()
+
+  let eventFull = data.max_capacity == data.number_of_seats_taken
+
+  return {
+    summary: "Online | " + data.title,
+    description: eventFull ? "OBS: Da du meldte deg på arrangementet, ble du lagt til i ventelista. \n---\n \n": "" + data.description,
+    location: data.location,
+    colorId: "9", // Blueberry: #3f51b5 | All colors: https://lukeboyle.com/blog/posts/google-calendar-api-color-id
+    start: {
+      dateTime: data.event_start,
+      timeZone: "Europe/Oslo"
+    },
+    end: {
+      dateTime: data.event_end,
+      timeZone: "Europe/Oslo"
     }
-})
+  }
+}
+
+
+document.addEventListener("click", (e) => {
+  /* Hører etter alle klikk og sjekker om det er riktig
+  knapp ved å sjekke objektets innerText */
+  if (e.target.innerText == "Meld meg på"
+    || e.target.innerText == "Meld meg på venteliste") {
+    postEvent();
+  }})

background.js

@@ -1,4 +1,137 @@
+// NOTE: Vurder å bruke chrome.storage.sync i stedet for chrome.storage.local
 
+async function addCalendarAndStoreCalendarId(token) {
+  console.log("token: " + token)
+  data = await addNewSecondaryCalendar(token)
+  calendarId = data.id
+  console.log("Fra autorisering, id: " + calendarId)
+  chrome.storage.local.set({ online_calendar_id: calendarId })
+  // localStorage.setItem("online_calendar_id", calendarId)
+}
 
+// Returnerer id-en til opprettet kalender.
+async function addNewSecondaryCalendar(token) {
+  // Returnerer id-en til opprettet kalender basert på token.
+  console.log("Adding new secondary calendar")
+  var init = {
+    method: "POST",
+    async: true,
+    headers: {
+      Authorization: "Bearer " + token,
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: "{'summary': 'Extension-test'}",
+  }
 
+  response = await fetch(
+    "https://www.googleapis.com/calendar/v3/calendars?alt=json&key=" + API_KEY,
+    init
+  )
+  data = await response.json()
+  return data
+}
 
+function check_if_calendar_exists(data, calendar_id) {
+  /* Itererer over listen over kalendre for å se om extensionkalenderen finnes*/
+
+  for (var i = 0; i < data.items.length; i++) {
+    console.log(data.items[i].id)
+    if (data.items[i].id == calendar_id) {
+      return true
+    }
+  }
+  return false
+}
+
+// Lager en ny kalender for brukeren, og lagrer id-en til kalenderen i chrome.storage.local
+async function doAuth() {
+  /* Autentiserer bruker mot Google Calendar-API og får
+  tilbake credentials (token) som lagres i storage.local for å */
+
+  chrome.storage.local.get(["online_calendar_id"], (result) => {
+    // Henter ID-en til kalender
+    const online_calendar_id = result.online_calendar_id
+
+    /* getAuthToken åpner interaktivt vindu hvor man logger inn med
+    Google-bruker. */
+    chrome.identity.getAuthToken({ interactive: true }, function (token) {
+
+      // Lagrer API_KEY og token for senere bruk.
+      let API_KEY = "AIzaSyCL3vj18BOFVjgfPjHUEMxYfcxqwKZOpss"
+      chrome.storage.local.set({ API_KEY: API_KEY })
+      chrome.storage.local.set({ token: token })
+
+      // Statiske headers som brukes for GET-request 
+      var init = {
+        method: "GET",
+        async: true,
+        headers: {
+          Authorization: "Bearer " + token,
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        contentType: "json",
+      }
+
+      // Fetcher liste over alle kalendere i Google for bruker
+      fetch(
+        "https://www.googleapis.com/calendar/v3/users/me/calendarList",
+        init
+      )
+        .then((response) => response.json()) // Gjør response til json
+        .then(function (data) {
+          console.log(data)
+
+          online_calendar_exists = false
+          if (online_calendar_id) {
+            if (check_if_calendar_exists(data, online_calendar_id)) {
+              console.log("Calendar already exists")
+              online_calendar_exists = true
+            } else {
+              console.log("Calendar does not exist")
+            }
+          } else {
+            console.log("No calendarID in chrome.storage")
+          }
+
+          if (!online_calendar_exists) {
+            // CREATE NEW CALENDAR
+            addCalendarAndStoreCalendarId(token)
+          }
+        })
+    })
+  })
+}
+
+
+chrome.runtime.onMessage.addListener(
+  /* Handler alle incoming messages fra andre filer som
+  må handles her grunnet API-restriksjoner */
+  function (request, sender, sendResponse) {
+
+  if (request.request === "oauth") {
+    /* Kjøres når den får melding fra popup.js om å
+    autentisere. */
+    doAuth()
+    return true
+  }
+
+  if (request.request === "credentials") {
+    /* Kjøres når content-scriptet (addEvent.js) brukes 
+    for å poste events. */
+    chrome.storage.local.get(["token"], (result) => {
+      const token = result.token
+      chrome.storage.local.get(["API_KEY"], (result) => {
+        const API_KEY = result.API_KEY
+
+        // Sender API-key og token 
+        sendResponse({
+          API_KEY: API_KEY,
+          token: token,
+        })
+      })
+    })
+    return true
+  }
+})

manifest.json

@@ -4,13 +4,25 @@
     "version": "0.1",
     "manifest_version": 3,
     "action": {
-        "default_title": "Test"
+        "default_title": "Test",
+        "default_popup": "popup.html"
     },
+    "background": {
+        "service_worker": "background.js"
+    }, 
     "permissions": [
+        "identity",
         "activeTab",
-        "scripting"
+        "scripting",
+        "storage"
     ],
-
+    "oauth2": {
+        "client_id": "680508743663-kl9g5s3u3kcu3a7ftr3jkkpvn54o59ev.apps.googleusercontent.com",
+        "scopes": ["https://www.googleapis.com/auth/userinfo.email",
+                    "https://www.googleapis.com/auth/calendar"]
+    },
+    "host_permissions": ["https://www.googleapis.com/*"],
+    "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApx6EaRGuiqJlc7BMYtXqxX80Vly9RjMIKtkzT/IvLklLYrPOJsJZWRQJqXG+Eu8AKG3PTT7lBEq3n7Ze8Qh2zt7hQPLRKksowIcxPDlZQ1T/xiJ4qNEoj6hfiBv2lN93QOdZMQykZoP5VI4FphmEuMq4QcPR1o3YMwj1oaBk8dnh16331h78c5RdWK6/HOqK7afD/JeaniRSN99FLvI0WSR/cgVRP5+cTTbz95T4ApNGnn8u7Cbg5LWFL+wfoLaWAtco6QVcwCvCu45x94CG5q5mBI4V5qyJ80wgxpu+ecvABeOlgXBKWZaoFpaeXibDaGXTuE4whhwGe6pAtof16QIDAQAB",
     "content_scripts": [
         {
           "matches": ["https://online.ntnu.no/events/*"],

popup.html

@@ -4,10 +4,13 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="popup.css" />
+    <link rel="stylesheet" href="popup.css">
+    <script type="text/javascript" src="popup.js"></script>
     <title>Online i Google Calendar</title>
   </head>
   <body>
+    <button id="gammel-knapp">Logg inn med Google</button>
+
     <footer>
       <img
         src="media/logo_hvit.png"
@@ -16,5 +19,6 @@
         id="footer-logo"
       />
     </footer>
+    <!-- <script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script> -->
   </body>
 </html>

popup.js

@@ -0,0 +1,13 @@
+window.onload = function () {
+    /* Registrerer klikk på Logg inn-knapp og
+    sender melding til background.js som gjør autentisering
+    mot Googles API. */
+  document
+    .getElementById("gammel-knapp")
+    .addEventListener("click", function () {
+      chrome.runtime.sendMessage({ request: "oauth" }, () => {
+        console.log("Authorized user")
+      })
+    })
+}
+