Merge pull request #7 from wulkanowy/feature/notes

Add achievements and notes to UI

files/css/start.css

@@ -45,4 +45,28 @@ body {
     margin-left: auto !important;
     margin-right: auto !important;
     margin-top: 5px !important;
+}
+
+.noteElement {
+    padding: 10px;
+    border: black 1px solid;
+    width: 90%;
+    height: 75px;
+    margin-top: 5px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.noteContent {
+    width: 50%;
+}
+
+.achievementElement {
+    padding: 10px;
+    border: black 1px solid;
+    width: 90%;
+    height: 75px;
+    margin-top: 5px;
+    margin-left: auto;
+    margin-right: auto;
 }

files/js/notes.js

@@ -1,9 +1,10 @@
 const notes_ = document.querySelector('#notes_');
+content = document.getElementById("content")
 
 myStorage = window.sessionStorage;
 
 const getNotes = () => {
-    document.querySelector('#content').innerHTML = 'Here is notes (in my imagination)';
+    content.innerHTML = ""
     cookies_data = sessionStorage.getItem('cookies_data');
     csrfcookie_ = sessionStorage.getItem('csrfcookie');
     fetch(url = '../api/notes', {
@@ -15,7 +16,25 @@ const getNotes = () => {
           },
         body: cookies_data
     }).then(response => response.json()).then(data => {
+        const uwagi = data.data.Uwagi
+        const osiagniecia = data.data.Osiagniecia
         console.log(data);
+
+        const uwagiList = document.createElement("ul")
+        uwagiList.id = "notesList"
+        content.append(uwagiList)
+
+        uwagi.forEach((uwaga) => {
+            uwagaElement = document.createElement("li")
+            uwagaElement.innerHTML = `<div class="noteElement"><h6 style="display:block; margin-top: -5px;">${uwaga.Kategoria}</h6><span style="display:block; float: right; margin-top: -25px; font-size: 13px;">${uwaga.Nauczyciel}</span><span style="display:block; width: 50%; font-size: 12px;">${uwaga.TrescUwagi}</span><span style="float:right; font-size: 20px; margin-top: -20px; font-weight: 700;">${uwaga.Punkty}</span></div>`
+            uwagiList.append(uwagaElement)
+        })
+
+        osiagniecia.forEach((osiagniecie) => {
+            osiagniecieElement = document.createElement("li")
+            osiagniecieElement.innerHTML = `<div class="achievementElement"><span>${osiagniecie}</span></div>`
+            uwagiList.append(osiagniecieElement)
+        })
     })
 }