Moodle events

tinwritescode · Jan 16, 2022 · 1be0775 · 1be0775
1 parent fc89b32
commit 1be0775
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 7 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,14 +1,15 @@
 {
   "name": "HCMUS Moodle Improved",
   "description": "",
-  "version": "1.2.0",
-  "manifest_version": 2,
+  "version": "1.3.4",
+  "manifest_version": 3,
   "permissions": [
     "storage"
   ],
-  "browser_action": {
+  "action": {
     "default_title": "Moodle settings",
-    "default_popup": "src/popup.html"
+    "default_popup": "src/popup.html?newtab",
+    "default_icon": "src/moodle-icon-5.jpg"
   },
   "content_scripts": [
     {
@@ -42,6 +43,17 @@
         "src/jquery.js",
         "src/home-page.js"
       ]
+    },
+    {
+      "matches": [
+        "https://*.facebook.com/*"
+      ],
+      "js": [
+        "src/jquery.js",
+        "src/facebook/injected.js",
+        "src/alpinejs.min.js"
+      ]
     }
+
   ]
 }
diff --git a/src/alpinejs.min.js b/src/alpinejs.min.js
diff --git a/src/facebook/injected.js b/src/facebook/injected.js
@@ -0,0 +1,165 @@
+let data = []
+let token = null
+let moodleLink = null
+
+chrome.storage.sync.get(["token", "moodleLink"], function (data) {
+  console.log("data", data)
+  token = data.token;
+  moodleLink = data.moodleLink;
+
+  if(token == null || moodleLink == null) {
+    return
+  }
+
+  class Moodle {
+    static async getEvents() {   
+      const res = await fetch(`https://fervent-albattani-056c21.netlify.app/.netlify/functions/server/get-events/?wwwroot=${moodleLink}&token=${token}`)
+
+      const data = await res.json()
+
+      return data
+    }
+  }
+
+  async function updateDialog() {
+    const dialog = document.querySelector(`[role="moodle-dialog"]`)
+
+    console.log(data)
+    if(!dialog || !data || data?.length == 0) return
+
+    const items = data.map((item) => {
+      return `
+      <div class="moodle-dialog-item" style="border-bottom: 1px #ccc solid; padding: .25rem; font-size: 1.1rem; width: 100%;">
+        <a href="${item.url}" target="_blank" style="">
+          <div class="moodle-dialog-item-title" style="grid-column: span 4 / span 4;"><span style="color:white!important">${item.name}</span></div>
+          <div class="moodle-dialog-item-date" style="grid-column: span 1 / span 1;"><span style="color:white!important">${item.formattedtime}</span></div>
+        </a>
+      </div>
+      `
+    })
+
+    dialog.innerHTML = `
+    <div style="border-radius: 1rem; background: black; color:white; max-width: 100%; min-width: 12rem; min-height: 14rem; max-height:100%; padding: 0.5rem; animation: fadeIn 0.4s ease; display: flex; flex-direction: column; justify-content: space-between;">
+      <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
+        <h2 style="text-align: center; color: white; font-weight: bold; font-size: 1.3rem">Moodle Events</h2>
+        ${items.join("")}
+      </div>
+
+      <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
+        <span>Bây giờ là: ${new Date().toLocaleString()}</span>
+        <p>Made by <a href="https://fb.com/npmrunstart" title="fb của Tín">Tín</a>, mình minh bạch tài khoản facebook chính chủ, đảm bảo không lấy cắp thông tin gì của bạn. </p>
+
+      </div>
+    </div>
+    `;
+  }
+  async function createDialog(relativeElement) {
+    const dialog = document.createElement("div")
+    dialog.setAttribute("role", "moodle-dialog") 
+    dialog.setAttribute("aria-label", "Moodle Dialog")
+    dialog.setAttribute("aria-modal", "true")
+    dialog.style.position = "absolute"
+    dialog.style.top = "3.25rem"
+    dialog.style.left = "-5rem"
+    dialog.style.right = "0"
+
+    dialog.innerHTML = `
+    <div style="border-radius: 1rem; background: black; color:white; height: 10rem; max-height:100%; padding: 0.5rem; animation: fadeIn 0.4s ease">
+      <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: white;">
+        Loading...
+      </div>
+    </div>
+    `;
+
+    //create style
+    const style = document.createElement("style")
+    style.innerHTML = `
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    `;
+
+    document.head.appendChild(style)
+
+
+    relativeElement.appendChild(dialog)
+
+    updateDialog()
+  }
+
+
+  //Load data
+  const loadData = () => Moodle.getEvents().then(function(res) {
+    data = res.events;
+
+    //TODO: handle data not valid, mean wrong user password
+
+    // console.log(data)
+    updateDialog()
+  });
+
+  setInterval(() => loadData(), 1000 * 60)
+  loadData()
+
+
+  setTimeout(async function() {
+    const target = document.querySelectorAll(`[role="navigation"]`)[1]
+
+    // get 2nd element
+    const element = target.children[1]
+
+    //clone it
+    const clone = element.cloneNode(true)
+
+    //append it
+    target.appendChild(clone)
+
+    //get svg and replace it
+    const svg = clone.querySelector("svg")
+    const newSvg = svg.cloneNode(true)
+    newSvg.setAttribute("viewBox", "1 8 20 10")
+    newSvg.innerHTML = `
+    <path d="M12 14l9-5-9-5-9 5 9 5z" />
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+    `
+
+    //get a tag
+    const link = clone.querySelector(`[role="link"]`)
+    link.setAttribute("href", "#");
+
+    console.log(link)
+
+    //on link click
+    link.addEventListener("click", function(e) {
+      e.preventDefault()
+      console.log("clicked")
+
+      new Promise(function(resolve, reject) {
+        updateDialog()
+        resolve()
+      });
+
+      // toggle display none
+      const dialog = document.querySelector(`[role="moodle-dialog"`);
+      if (dialog.style.display === "none") {
+        dialog.style.display = "block";
+      } else {
+        dialog.style.display = "none";
+      }
+
+      //open new tab
+    });
+
+    //replace svg with the clone
+    svg.parentNode.replaceChild(newSvg, svg)
+
+    //Dialog
+    createDialog(clone)
+  }, 2500);
+})
diff --git a/src/moodle-icon-5.jpg b/src/moodle-icon-5.jpg
diff --git a/src/popup.html b/src/popup.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="./jquery.js"></script>
+  <script src="./alpinejs.min.js" defer></script>
   <script src="./popup.js" defer></script>
   <link rel="stylesheet" href="./tailwind.min.css">
 
@@ -22,16 +23,31 @@
 </head>
 
 <body>
-  <div class="rounded bg-white [ flex flex-col gap-2 ] shadow-xl justify-center h-52 p-2 border-2 border-green-400">
+  <div class="rounded bg-white [ flex flex-col gap-2 ] shadow-xl rounded justify-center p-2 border-2 ">
     <h1 class="text-2xl">HCMUS Moodle Improved</h1>
-    <p class="text-sm">Nhập thông tin tự động đăng nhập moodle:</p>
+    <p class="text-sm">Nhập thông tin đăng nhập:</p>
+    <label class="text-sm">Link moodle:</label>
+    <input class="p-2 ring-1 ring-lime-200" type="text" placeholder="Moodle link" id="moodleLink" value="https://courses.ctda.hcmus.edu.vn">
+    <label class="text-sm">Tên đăng nhập:</label>
     <input class="p-2 ring-1 ring-lime-200" type="text" placeholder="Username" id="username">
+    <label for="password" class="text-sm">Password</label>
     <input class="p-2 ring-1 ring-lime-200" type="password" placeholder="Password" id="password">
+    <button class="self-center px-6 rounded-md p-2 bg-yellow-500 hover:bg-opacity-80 text-white" role="loginButton">
+      Đăng nhập
+    </button>
+
+    <input class="p-2 ring-1 ring-lime-200" type="hidden" placeholder="Token" id="token">
+
+    <h1 class="text-2xl">Log</h1>
+    <div contenteditable="true" class="p-2 border-1 border-green-300 rounded ring-1 text-sm" role="editableLog" style="min-height: 6rem">
+
+    </div>
 
     <!-- label with input type check -->
+    <h1 class="text-2xl">Các tính năng</h1>
     <label class="flex items-center">
       <input type="checkbox" class="form-checkbox" id="autoLogin">
-      <span class="ml-2">Tự động đăng nhập với thông tin trên</span>
+      <span class="ml-2">Đăng nhập tự động</span>
     </label>
 
 

diff --git a/src/popup.js b/src/popup.js
@@ -1,6 +1,10 @@
 const username = $("#username");
 const password = $("#password");
 const autoLogin = $("#autoLogin");
+const token = $("#token");
+const moodleLink = $("#moodleLink")
+const loginButton = $(`[role="loginButton"]`);
+const editableLog = $(`[role="editableLog"]`);
 
 const STORAGE_SELECTOR = "[id]";
 let debounceTimer;
@@ -42,3 +46,32 @@ function collectData() {
     data[el.id] = el.type === "checkbox" ? el.checked : el.value;
   return data;
 }
+
+//
+loginButton.click(onLoginButtonClick);
+
+async function onLoginButtonClick() {
+  // get token
+  const res = await fetch(`${moodleLink.val()}/login/token.php?username=${username.val()}&password=${password.val()}&service=moodle_mobile_app`)
+  const data = await res.json()
+
+  if(!data?.token) {
+    appendToEditableLog(`Login failed`)
+    appendToEditableLog(`${data}`)
+    return
+  }
+
+  token.val(data.token)
+  //append log to editable log
+  appendToEditableLog(`Get token thành công: ${data.token}, token đã được lưu`)
+  //tính năng lấy event ở trang fb đã hoạt động
+  appendToEditableLog(`<strong>Tính năng lấy event ở trang fb đã hoạt động</strong>`)
+
+  // alert(JSON.stringify(data))
+  doSave();
+}
+
+//append to editableLog
+function appendToEditableLog(text) {
+  editableLog.append(`${new Date().toLocaleString()} - ${text} <br>`)
+}