From e60826b8d98bad145780882f857f0d43832ecfa1 Mon Sep 17 00:00:00 2001 From: DcruBro Date: Fri, 8 May 2026 17:51:25 +0200 Subject: [PATCH] novi vnos, izbris vnosov, itd. --- index.html | 1 + new.html | 38 ++++++++++++++++ scripts/contact.js | 2 +- scripts/index.js | 4 ++ scripts/login.js | 1 + scripts/main.js | 2 + scripts/new.js | 95 ++++++++++++++++++++++++++++++++++++++++ scripts/vnos.js | 45 +++++++++++++++++++ styles/main.css | 107 ++++++++++++++++++++++++++++++++++++++++++++- vnos.html | 14 ++++++ 10 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 new.html create mode 100644 scripts/new.js diff --git a/index.html b/index.html index 23a60e6..2f309e6 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@

Zadnji vnosi

+
diff --git a/new.html b/new.html new file mode 100644 index 0000000..0d11034 --- /dev/null +++ b/new.html @@ -0,0 +1,38 @@ + + + + + + Nov vnos + + + + +
+ +
+

Nov vnos

+
+
+
+
+
+ × +

Potrdilo

+
+

Ali ste prepričani, da želite dodati ta vnos?

+

Preverite vsebino pred shranjevanjem!

+
+ + +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/scripts/contact.js b/scripts/contact.js index d982306..6091fda 100644 --- a/scripts/contact.js +++ b/scripts/contact.js @@ -3,7 +3,7 @@ const form = ` -

Vaše sporočilo bo vezano na vaš račun, zato vam bomo lahko odgovorili na e-pošto, ki ste jo vnesli ob registraciji.

+

Vaše sporočilo bo vezano na vaš račun, zato vam bomo lahko odgovorili na e-pošto, ki ste jo vnesli ob registraciji.

`; document.addEventListener("DOMContentLoaded", () => { diff --git a/scripts/index.js b/scripts/index.js index 2ac385c..ba2745d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -100,5 +100,9 @@ document.getElementById("search-input").addEventListener("keydown", (event) => { } }); +function addEntry() { + window.location.href = "/new.html"; +} + // DELAJ DELAJ getLast(); \ No newline at end of file diff --git a/scripts/login.js b/scripts/login.js index c8fcf2e..092a8ab 100644 --- a/scripts/login.js +++ b/scripts/login.js @@ -29,6 +29,7 @@ document.getElementById("login-form").addEventListener("submit", async function( if (response.status === 200) { // Nastavi cookie, 3 ure veljaven document.cookie = `token=${data.token}; max-age=${3 * 60 * 60}; path=/; secure; samesite=strict`; + document.cookie = `username=${username}; max-age=${3 * 60 * 60}; path=/; secure; samesite=strict`; window.location.href = "/"; return; diff --git a/scripts/main.js b/scripts/main.js index 2e6e455..e585e3a 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -45,6 +45,8 @@ function updateToggleState(theme) { function logout() { // Odstrani cookie tako, da ga nastaviš z max-age=0 document.cookie = 'token=; max-age=0; path=/; secure; samesite=strict'; + document.cookie = 'username=; max-age=0; path=/; secure; samesite=strict'; + window.location.href = "/"; } document.addEventListener("DOMContentLoaded", function() { diff --git a/scripts/new.js b/scripts/new.js new file mode 100644 index 0000000..73f40d0 --- /dev/null +++ b/scripts/new.js @@ -0,0 +1,95 @@ +const form = ` +
+ + + + + + + + + +
+

Pomoč:

+
    +
  • Ključ je sama beseda, oz. vnos. Npr. "raca".
    • +
  • Definicija je vsebina vašega vnosa.
    • +
+

Definicijo morate specifično spisati! Morate uporabiti specifične indentifikatorje, tako da bo sistem pravilno pokazal vašo definicijo.

+
    +
  • Vsako posamezno definicijo morate vnesti med <def> in </def>. Primer: <def>1. srednje velika domača ali divja ptica s ploščatim kljunom in krajšim vratom</def>
    • +
+

Primeri so neobvezni, vendar zelo priporočeni.

+

Vaš vnos bo javno vezan na vaš račun.

+
`; + +document.getElementById("confirm-add").addEventListener("click", () => { + document.getElementById("new-entry-form-modal").style.display = "none"; + + const url = "http://localhost:3000/nov-vnos"; + let content = document.getElementById("content").value; + const key = document.getElementById("key").value; + const examples = document.getElementById("examples").value ? "Primer: " + document.getElementById("examples").value : "Ni podanih primerov."; + const type = document.getElementById("type").value; + + content = content.replace("", "

"); + content = content.replace("", "

"); + + fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ "token": document.cookie.split(";").find(cookie => cookie.trim().startsWith("token=")).split("=")[1], "content": content, "key": key, "examples": examples, "type": type }) + }) + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then(data => { + console.log("Success:", data); + document.getElementById("contact-form").innerHTML = `

Hvala za vaš vnos!

`; + }) + .catch((error) => { + console.error("Error:", error); + document.getElementById("contact-form").innerHTML = `

Prišlo je do napake pri dodajanju vnosa. Prosimo, poskusite znova pozneje.

`; + }); +}); + +document.getElementById("cancel-add").addEventListener("click", () => { + document.getElementById("new-entry-form-modal").style.visibility = "hidden"; +}); + +document.getElementById("close-modal").addEventListener("click", () => { + document.getElementById("new-entry-form-modal").style.visibility = "hidden"; +}); + +document.addEventListener("DOMContentLoaded", () => { + const contactFormContainer = document.getElementById("entry-form-container"); + // Najdi cookie "token" v cookies + const isLoggedIn = document.cookie.split(";").some(cookie => cookie.trim().startsWith("token=")); + if (contactFormContainer && isLoggedIn) { + contactFormContainer.innerHTML = form; + + document.getElementById("contact-form").addEventListener("submit", (e) => { + e.preventDefault(); + document.getElementById("new-entry-form-modal").style.visibility = "visible"; + + // TODO: Popravi margin pri success in error textu da ne bo offsetan + + }); + } else if (contactFormContainer) { + contactFormContainer.innerHTML = `

Za dodajanje vnosov se morate prijaviti.

`; + } +}); \ No newline at end of file diff --git a/scripts/vnos.js b/scripts/vnos.js index d7a3487..58d81ed 100644 --- a/scripts/vnos.js +++ b/scripts/vnos.js @@ -26,8 +26,53 @@ function getKey() {

Vnos dodal: ${data.data.avtor}

`; + // Preveri lastinino + let addIf = ``; + + if (data.data.avtor === document.cookie.split(";").find(cookie => cookie.trim().startsWith("username="))?.split("=")[1]) { + addIf = `
`; + } + + build += addIf; + document.getElementById("page-title").innerText = `Vnos '${data.data.kljuc}'`; document.getElementById("entry-container-single").innerHTML += build; + + document.getElementById("delete-entry-button")?.addEventListener("click", () => { + document.getElementById("delete-entry-modal").style.visibility = "visible"; + }); + + document.getElementById("cancel-delete")?.addEventListener("click", () => { + document.getElementById("delete-entry-modal").style.visibility = "hidden"; + }); + + document.getElementById("confirm-delete")?.addEventListener("click", () => { + fetch("http://localhost:3000/izbrisi-vnos", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ "token": document.cookie.split(";").find(cookie => cookie.trim().startsWith("token=")).split("=")[1], "pk": kljuc }) + }) + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then(data => { + console.log("Success:", data); + window.location.href = "/"; + }) + .catch((error) => { + console.error("Error:", error); + document.getElementById("delete-entry-modal").style.visibility = "hidden"; + }); + }); + + document.getElementById("close-modal")?.addEventListener("click", () => { + document.getElementById("delete-entry-modal").style.visibility = "hidden"; + }); }) .catch((error) => { console.error('Error:', error); diff --git a/styles/main.css b/styles/main.css index ac2ae34..8444653 100644 --- a/styles/main.css +++ b/styles/main.css @@ -14,6 +14,8 @@ --toggle-icon-color: #f5f5f5; --nav-btn-primary-bg: #007acc; --nav-btn-primary-hover-bg: #006bb3; + --nav-btn-danger-bg: #e74c3c; + --nav-btn-danger-hover-bg: #c0392b; } :root[data-theme="light"] { @@ -30,6 +32,8 @@ --toggle-icon-color: #444; --nav-btn-primary-bg: #007acc; --nav-btn-primary-hover-bg: #006bb3; + --nav-btn-danger-bg: #e74c3c; + --nav-btn-danger-hover-bg: #c0392b; } * { @@ -270,13 +274,16 @@ nav { font-weight: 500; line-height: 1.1; font-family: inherit; + cursor: pointer; /* Smooth Theme Transition */ transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .nav-btn:hover, -.nav-btn:focus-visible { +.nav-btn:focus-visible, +.page-btn:hover, +.page-btn:focus-visible { background: var(--nav-btn-hover-bg); border-color: var(--nav-btn-hover-border); outline: none; @@ -296,6 +303,20 @@ nav { outline: none; } +.nav-btn-danger { + background: var(--nav-btn-danger-bg); + border-color: var(--nav-btn-danger-bg); + color: #fff; +} + +.nav-btn-danger:hover, +.nav-btn-danger:focus-visible { + background: var(--nav-btn-danger-hover-bg); + border-color: var(--nav-btn-danger-hover-bg); + color: #fff; + outline: none; +} + .contact-form { display: flex; flex-direction: column; @@ -312,6 +333,90 @@ nav { margin-right: 23px; } +.page-unordered-list { + list-style-type: disc; + padding-left: 20px; + color: var(--text-color); + + /* Smooth Theme Transition */ + transition: color 0.25s ease; +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + visibility: hidden; +} + +.close { + position: absolute; + top: 10px; + right: 10px; + font-size: 2rem; + background-color: var(--nav-btn-bg); + border: 1px solid var(--nav-btn-border); + border-radius: 4px; + padding: 0px 9px 3px 9px; + margin-top: 4px; + color: var(--text-color); + cursor: pointer; + transition: color 0.25s ease; +} + +.close:hover { + color: var(--nav-btn-primary-bg); +} + +.modal-content { + background: var(--nav-btn-bg); + padding: 20px; + border-radius: 8px; + width: 90%; + max-width: 400px; + position: relative; + color: var(--text-color); + transition: background-color 0.25s ease, color 0.25s ease; +} + +.modal-buttons { + display: flex; + justify-content: flex-end; + gap: 10px; + margin-top: 20px; +} + +.modal-buttons .page-btn:hover { + background: var(--nav-btn-hover-bg); + border-color: var(--nav-btn-hover-border); + color: var(--text-color); + outline: none; + cursor: pointer; +} + +.modal-buttons .nav-btn-primary:hover { + background: var(--nav-btn-primary-hover-bg); + border-color: var(--nav-btn-primary-hover-bg); + color: #fff; + outline: none; + cursor: pointer; +} + +.modal-buttons .nav-btn-danger:hover { + background: var(--nav-btn-danger-hover-bg); + border-color: var(--nav-btn-danger-hover-bg); + color: #fff; + outline: none; + cursor: pointer; +} + @media (max-width: 720px) { header { padding: 6px 8px; diff --git a/vnos.html b/vnos.html index ab60b11..e45cdeb 100644 --- a/vnos.html +++ b/vnos.html @@ -19,6 +19,20 @@

Glavna stran

+ +
+
+ × +

Izbris vnosa

+
+

Ali ste prepričani, da želite izbrisati ta vnos?

+

Ta dejanja ni mogoče razveljaviti!

+
+ + +
+
+