Add article creation frontend

assets/script.js

@@ -173,6 +173,28 @@ async function initAjax() {
     await onPageLoad();
 }
 
+async function togglearticlecreate(){
+    let articleContainerElement = document.getElementById("articlecreatecontainer");
+
+    articleContainerElement.classList.toggle("hidden");
+}
+
+async function submitarticle(){
+    let articleTitleElement = document.getElementById("articletitleinput");
+    let articleBodyElement = document.getElementById("articlebodyinput");
+    await doAction("/newsarticle", {
+       action: "addNewsArticle",
+        title: articleTitleElement,
+        body: articleBodyElement
+    });
+}
+
+async function articleInit(){
+    let articleSubmitElement = document.getElementById("articlesubmit");
+    await togglearticlecreate();
+    articleSubmitElement.addEventListener("click", submitarticle);
+}
+
 async function onPageLoad() {
     await restoreUserInfo();
     let currentSite = localStorage.getItem("currentSite");
@@ -189,6 +211,9 @@ async function onPageLoad() {
     if (currentSite === "home" && currentPage === "account" && isLoggedIn()) {
         await showDashboardGreeting();
     }
+    if (currentSite === "news" && currentPage === "index" && isLoggedIn()) {
+        await articleInit();
+    }
 }
 
 async function navigateTo(site, page) {

assets/style.css

@@ -364,4 +364,22 @@ body:has(.ye-span:hover) {
     background: url('/assets/images/ye.jpg') !important;
     background-repeat: repeat !important;
     background-size: 10% !important;
+}
+
+#articlecreate {
+    position: fixed;
+    border: 5px solid var(--primary);
+    z-index: 5;
+}
+
+#articlecreatecontainer{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 4;
+    backdrop-filter: blur(2px);
+}
+
+.hidden {
+    display: none !important;
 }

templates/newsArticles.html

@@ -1,6 +1,17 @@
 <header>
   <h1 class="title"></h1>
   <p>Adlerka študentské news</p>
+  <button id="articlecreateopen" onclick="togglearticlecreate()"><i class="ri-add-circle-line"></i></button>
   <hr>
-  __TEMPLATE__ARTICLES_HERE__
 </header>
+<div id="articleslist">
+  __TEMPLATE__ARTICLES_HERE__
+</div>
+
+<div id="articlecreatecontainer" class="hidden">
+  <div id="articlecreate">
+    <input type="text" placeholder="Article Title" id="articletitleinput"><br>
+    <textarea id="articlebodyinput" placeholder="Article Body"></textarea><br>
+    <button id="articlesubmit" onclick="submitArticle()"></button>
+  </div>
+</div>