Merge pull request #3 from wulkanowy/feature/finish_grades

Feature/finish grades

.gitignore

@@ -147,3 +147,5 @@ dmypy.json
 
 # Cython debug symbols
 cython_debug/
+
+node_modules/

files/js/grades.js

@@ -1,4 +1,4 @@
-// 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 +16,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,33 +26,69 @@ 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) {
                     case "6" || "6-":
+                        czastkowa.Kolor = "#3dbbf5"
                         gradeDiv.style.background = "#3dbbf5"
                         break;
                     case "5" || "5-" || "5+":
+                        czastkowa.Kolor = "#4caf50"
                         gradeDiv.style.background = "#4caf50"
                         break;
                     case "4" || "4-" || "4+":
+                        czastkowa.Kolor = "#a0c431"
                         gradeDiv.style.background = "#a0c431"
                         break;
                     case "3" || "3-" || "3+":
+                        czastkowa.Kolor = "#ffb940"
                         gradeDiv.style.background = "#ffb940"
                         break;
                     case "2" || "2-" || "2+":
+                        czastkowa.Kolor = "#ff774d"
                         gradeDiv.style.background = "#ff774d"
                         break;
                     case "1" || "1+":
+                        czastkowa.Kolor = "#d43f3f"
                         gradeDiv.style.background = "#d43f3f"
                         break;
                     default:
+                        czastkowa.Kolor = "#607d8b"
                         gradeDiv.style.background = "#607d8b"
                 }
+                const gradeModal = document.createElement("div")
+                gradeModal.id = `${hash.MD5(czastkowa)}`
+                gradeModal.classList = "modal"
+                gradeModal.style.marginTop = "15rem"
+                gradeModal.innerHTML = `<div class="modal-content">
+                                            <h4>${grade.Przedmiot}</h4>
+                                            <h5>${czastkowa.KodKolumny} - ${czastkowa.NazwaKolumny}</h5>
+                                            
+                                            <div style="float: right; background: ${czastkowa.Kolor}; width: 60px;  height: 70px; text-align: center;"><h1>${czastkowa.Wpis}</h1></div>
+                                            
+                                            <span class="teacher" style="font-size: 16px;">Nauczyciel</span>
+                                            <p>${czastkowa.Nauczyciel}</p>
+                                            
+                                            <span class="weight" style="font-size: 16px;">Waga</span>
+                                            <p>${czastkowa.Waga}</p>
+                                            
+                                            <span class="date" style="font-size: 16px;">Data</span>
+                                            <p>${czastkowa.DataOceny}</p>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <a href="#!" class="modal-close${hash.MD5(czastkowa)} waves-effect waves-white btn materialize-red">Zamknij</a>
+                                        </div>`
                 gradeDiv.addEventListener('click', () => {
-                    console.log(`Nauczyciel: ${czastkowa.Nauczyciel}, Waga: ${czastkowa.Waga}, Data: ${czastkowa.DataOceny}, Przedmiot: ${grade.Przedmiot}`)
+                    console.log(czastkowa)
+                    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

@@ -32,6 +32,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"]
+                    }
+                }
+            }
+        ]
+    }
+}