Display modals by clicking on grade and add Webpack!

.gitignore

@@ -146,4 +146,6 @@ dmypy.json
 .pytype/
 
 # Cython debug symbols
-cython_debug/
+cython_debug/
+
+node_modules/

files/js/grades.js

@@ -1,4 +1,5 @@
 // TODO: do Marcina z przyszłości od Marcina z przeszłości: MARCIN SKOŃCZ OCENY!!!
+var hash = require('object-hash');
 
 const grades_ = document.querySelector('#grades_');
 
@@ -16,8 +17,9 @@ const getGrades = () => {
           },
         body: cookies_data
     }).then(response => response.json()).then(data => {
-        allGrades = data.data.Oceny
+        const allGrades = data.data.Oceny
         const content = document.getElementById("content")
+        const container = document.getElementsByClassName("gradeModals")[0]
 
         allGrades.forEach((grade) => {
             const czastkowe = grade.OcenyCzastkowe
@@ -25,7 +27,7 @@ const getGrades = () => {
             czastkowe.forEach((czastkowa) => {
                 const gradeDiv = document.createElement("div")
                 gradeDiv.classList = "grade modal-trigger"
-                gradeDiv.href = "#modal1"
+                gradeDiv.dataset.target = `${hash.MD5(czastkowa)}`
                 gradeDiv.innerHTML = `${czastkowa.Wpis}`
 
                 switch (czastkowa.Wpis) {
@@ -50,8 +52,25 @@ const getGrades = () => {
                     default:
                         gradeDiv.style.background = "#607d8b"
                 }
+                const gradeModal = document.createElement("div")
+                gradeModal.id = `${hash.MD5(czastkowa)}`
+                gradeModal.classList = "modal"
+                gradeModal.innerHTML = `<div class="modal-content">
+                                            <h4>${grade.Przedmiot}</h4>
+                                            <p>A bunch of text</p>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <a href="#!" class="modal-close${hash.MD5(czastkowa)} waves-effect waves-green btn-flat">Agree</a>
+                                        </div>`
                 gradeDiv.addEventListener('click', () => {
                     console.log(`Nauczyciel: ${czastkowa.Nauczyciel}, Waga: ${czastkowa.Waga}, Data: ${czastkowa.DataOceny}, Przedmiot: ${grade.Przedmiot}`)
+                    gradeModal.style.display = 'block'
+                })
+
+               container.append(gradeModal)
+
+                document.getElementsByClassName(`modal-close${hash.MD5(czastkowa)}`)[0].addEventListener('click', () => {
+                    gradeModal.style.display = 'none'
                 })
 
                content.append(gradeDiv)

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "wulkanowy-web",
+  "version": "1.0.0",
+  "description": "🌋 Przeglądarkowy klient dzienniczka VULCAN UONET+ dla ucznia i rodzica",
+  "main": "index.js",
+  "browserslist": [
+     "defaults"
+  ],
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode productionSSSS"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wulkanowy/wulkanowy-web.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/wulkanowy/wulkanowy-web/issues"
+  },
+  "homepage": "https://github.com/wulkanowy/wulkanowy-web#readme",
+  "dependencies": {
+    "object-hash": "^2.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "webpack": "^5.13.0",
+    "webpack-cli": "^4.3.1"
+  }
+}

templates/content.html

@@ -7,7 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="{% static 'css/start.css' %}" type="text/css" />
   <script src="{% static 'js/start.js' %}" type="text/javascript" ></script>
-  <script src="{% static 'js/grades.js' %}" type="text/javascript" defer></script>
+  <script src="{% static 'js/dist/out-grades.js' %}" type="text/javascript" defer></script>
   <script src="{% static 'js/timetable.js' %}" type="text/javascript" defer></script>
   <script src="{% static 'js/exams.js' %}" type="text/javascript" defer></script>
   <script src="{% static 'js/notes.js' %}" type="text/javascript" defer></script>
@@ -31,6 +31,8 @@
 <body>
    <div data-v-cd2b8d62 data-v-09be56d6 id="container">
 
+       <div class="gradeModals"></div> <!-- please don't touch it for scraping, you have an api :D -->
+
      <nav>Wulkanowy web early access insider preview pre-alpha pre-beta alpha beta release canditate v. 0.0.1</nav>
 
      <ul id="slide-out" class="sidenav">

webpack.config.js

@@ -0,0 +1,37 @@
+const path = require("path");
+
+module.exports = {
+    entry: {
+        attedance : "./files/js/attendance.js",
+        exams : "./files/js/exams.js",
+        grades : "./files/js/grades.js",
+        homeworks : "./files/js/homeworks.js",
+        login : "./files/js/login.js",
+        messages : "./files/js/messages.js",
+        mobile_access : "./files/js/mobile_access.js",
+        notes : "./files/js/notes.js",
+        start : "./files/js/start.js",
+        timetable : "./files/js/timetable.js",
+    },
+    output: {
+        filename: "out-[name].js",
+        path: path.resolve(__dirname, "./files/js/dist")
+    },
+    watch: false,
+    mode: "development",
+    devtool: "source-map",
+    module: {
+        rules: [
+            {
+                test: /\.m?js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: ["@babel/preset-env"]
+                    }
+                }
+            }
+        ]
+    }
+}