dcrubro/ssnj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

novi vnos, izbris vnosov, itd.

Browse Source
This commit is contained in:
DcruBro
2026-05-08 17:51:25 +02:00
parent 6c694a73fb
commit e60826b8d9
10 changed files with 307 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -14,6 +14,7 @@
<div class="page-title-container"> <div class="page-title-container">
<h3 class="page-title" id="page-title">Zadnji vnosi</h3> <h3 class="page-title" id="page-title">Zadnji vnosi</h3>
<div class="page-search-container"> <div class="page-search-container">
<button id="add-entry-button" class="page-btn nav-btn-primary" style="cursor: pointer;" onclick="addEntry()">Dodaj nov vnos</button>
<input id="search-input" class="page-input" type="text" placeholder="Išči..."> <input id="search-input" class="page-input" type="text" placeholder="Išči...">
<button id="search-button" class="page-btn" onclick="search()">Išči</button> <button id="search-button" class="page-btn" onclick="search()">Išči</button>
</div> </div>

38
new.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="sl_SI">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nov vnos</title>
<script src="./scripts/preload.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/main.css">
</head>
<body>
<div class="page-header"></div>
<main>
<h3 class="page-title">Nov vnos</h3>
<hr>
<div id="entry-form-container">
</div>
<div class="modal" id="new-entry-form-modal">
<div class="modal-content">
<span id="close-modal" class="close">&times;</span>
<h2>Potrdilo</h2>
<br>
<p>Ali ste prepričani, da želite dodati ta vnos?</p>
<p>Preverite vsebino pred shranjevanjem!</p>
<div class="modal-buttons">
<button id="confirm-add" class="page-btn nav-btn-primary">Da, dodaj vnos</button>
<button id="cancel-add" class="page-btn">Ne, prekliči</button>
</div>
</div>
</div>
</main>
<div class="page-footer"></div>
<script src="./scripts/new.js"></script>
<script src="./scripts/main.js" defer></script>
</body>
</html>

2
scripts/contact.js
View File

@@ -3,7 +3,7 @@ const form = `
<label for="message">Sporočilo:</label> <label for="message">Sporočilo:</label>
<textarea id="message" name="message" rows="5" class="page-input" required></textarea> <textarea id="message" name="message" rows="5" class="page-input" required></textarea>
<button type="submit" class="page-btn">Pošlji</button> <button type="submit" class="page-btn">Pošlji</button>
<p>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.</p> <p><em>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.</em></p>
</form>`; </form>`;
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {

4
scripts/index.js
View File

@@ -100,5 +100,9 @@ document.getElementById("search-input").addEventListener("keydown", (event) => {
} }
}); });
function addEntry() {
window.location.href = "/new.html";
}
// DELAJ DELAJ // DELAJ DELAJ
getLast(); getLast();

1
scripts/login.js
View File

@@ -29,6 +29,7 @@ document.getElementById("login-form").addEventListener("submit", async function(
if (response.status === 200) { if (response.status === 200) {
// Nastavi cookie, 3 ure veljaven // Nastavi cookie, 3 ure veljaven
document.cookie = `token=${data.token}; max-age=${3 * 60 * 60}; path=/; secure; samesite=strict`; 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 = "/"; window.location.href = "/";
return; return;

2
scripts/main.js
View File

@@ -45,6 +45,8 @@ function updateToggleState(theme) {
function logout() { function logout() {
// Odstrani cookie tako, da ga nastaviš z max-age=0 // Odstrani cookie tako, da ga nastaviš z max-age=0
document.cookie = 'token=; max-age=0; path=/; secure; samesite=strict'; 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() { document.addEventListener("DOMContentLoaded", function() {

95
scripts/new.js Normal file
View File

@@ -0,0 +1,95 @@
const form = `
<form class="contact-form" id="contact-form">
<label for="key">Ključ:</label>
<input type="text" id="key" name="key" class="page-input" required>
<label for="type">Tip vnosa:</label>
<select id="type" name="type" class="page-input" required>
<option value="samostalnik, moški spol">Samostalnik; Moški spol</option>
<option value="samostalnik, ženski spol">Samostalnik; Ženski spol</option>
<option value="samostalnik, srednji spol">Samostalnik; Srednji spol</option>
<option value="pridevnik, moški spol">Pridevnik; Moški spol</option>
<option value="pridevnik, ženski spol">Pridevnik; Ženski spol</option>
<option value="pridevnik, srednji spol">Pridevnik; Srednji spol</option>
<option value="glagol">Glagol</option>
<option value="frazem">Frazem</option>
</select>
<label for="content">Definicija:</label>
<textarea id="content" name="content" rows="5" class="page-input" required></textarea>
<label for="examples">Primeri (neobvezno):</label>
<textarea id="examples" name="examples" rows="5" class="page-input"></textarea>
<button type="submit" class="page-btn">Dodaj vnos</button>
<br>
<p>Pomoč:</p>
<ul class="page-unordered-list">
<li><strong>Ključ</strong> je sama beseda, oz. vnos. Npr. "raca".</li>
<li><strong>Definicija</strong> je vsebina vašega vnosa.</li>
</ul>
<p><strong>Definicijo morate specifično spisati!</strong> Morate uporabiti specifične <em>indentifikatorje</em>, tako da bo sistem pravilno pokazal vašo definicijo.</p>
<ul class="page-unordered-list">
<li><strong>Vsako posamezno definicijo</strong> morate vnesti med &lt;def&gt; in &lt;/def&gt;. Primer: <em>&lt;def&gt;1. srednje velika domača ali divja ptica s ploščatim kljunom in krajšim vratom&lt;/def&gt;</em></li>
</ul>
<p><strong>Primeri</strong> so neobvezni, vendar zelo priporočeni.</em></p>
<p><em>Vaš vnos bo javno vezan na vaš račun.</em></p>
</form>`;
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("<def>", "<p class=\"entry-meaning\">");
content = content.replace("</def>", "</p>");
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 = `<p class="page-paragraph-success">Hvala za vaš vnos!</p>`;
})
.catch((error) => {
console.error("Error:", error);
document.getElementById("contact-form").innerHTML = `<p class="page-paragraph-error">Prišlo je do napake pri dodajanju vnosa. Prosimo, poskusite znova pozneje.</p>`;
});
});
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 = `<p class="page-paragraph">Za dodajanje vnosov se morate prijaviti.</p>`;
}
});

45
scripts/vnos.js
View File

@@ -26,8 +26,53 @@ function getKey() {
<p class="entry-example">Vnos dodal: ${data.data.avtor}</p> <p class="entry-example">Vnos dodal: ${data.data.avtor}</p>
`; `;
// Preveri lastinino
let addIf = ``;
if (data.data.avtor === document.cookie.split(";").find(cookie => cookie.trim().startsWith("username="))?.split("=")[1]) {
addIf = `<br><button id="delete-entry-button" class="page-btn nav-btn-danger">Izbriši vnos</button>`;
}
build += addIf;
document.getElementById("page-title").innerText = `Vnos '${data.data.kljuc}'`; document.getElementById("page-title").innerText = `Vnos '${data.data.kljuc}'`;
document.getElementById("entry-container-single").innerHTML += build; 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) => { .catch((error) => {
console.error('Error:', error); console.error('Error:', error);

107
styles/main.css
View File

@@ -14,6 +14,8 @@
--toggle-icon-color: #f5f5f5; --toggle-icon-color: #f5f5f5;
--nav-btn-primary-bg: #007acc; --nav-btn-primary-bg: #007acc;
--nav-btn-primary-hover-bg: #006bb3; --nav-btn-primary-hover-bg: #006bb3;
--nav-btn-danger-bg: #e74c3c;
--nav-btn-danger-hover-bg: #c0392b;
} }
:root[data-theme="light"] { :root[data-theme="light"] {
@@ -30,6 +32,8 @@
--toggle-icon-color: #444; --toggle-icon-color: #444;
--nav-btn-primary-bg: #007acc; --nav-btn-primary-bg: #007acc;
--nav-btn-primary-hover-bg: #006bb3; --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; font-weight: 500;
line-height: 1.1; line-height: 1.1;
font-family: inherit; font-family: inherit;
cursor: pointer;
/* Smooth Theme Transition */ /* Smooth Theme Transition */
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
} }
.nav-btn:hover, .nav-btn:hover,
.nav-btn:focus-visible { .nav-btn:focus-visible,
.page-btn:hover,
.page-btn:focus-visible {
background: var(--nav-btn-hover-bg); background: var(--nav-btn-hover-bg);
border-color: var(--nav-btn-hover-border); border-color: var(--nav-btn-hover-border);
outline: none; outline: none;
@@ -296,6 +303,20 @@ nav {
outline: none; 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 { .contact-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -312,6 +333,90 @@ nav {
margin-right: 23px; 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) { @media (max-width: 720px) {
header { header {
padding: 6px 8px; padding: 6px 8px;

14
vnos.html
View File

@@ -19,6 +19,20 @@
<p class="page-paragraph"> <p class="page-paragraph">
<a class="page-link" href="/">Glavna stran</a> <a class="page-link" href="/">Glavna stran</a>
</p> </p>
<div class="modal" id="delete-entry-modal">
<div class="modal-content">
<span id="close-modal" class="close">&times;</span>
<h2>Izbris vnosa</h2>
<br>
<p>Ali ste prepričani, da želite izbrisati ta vnos?</p>
<p>Ta dejanja ni mogoče razveljaviti!</p>
<div class="modal-buttons">
<button id="confirm-delete" class="page-btn nav-btn-danger">Da, izbriši vnos</button>
<button id="cancel-delete" class="page-btn">Ne, prekliči</button>
</div>
</div>
</div>
</main> </main>
<div class="page-footer"></div> <div class="page-footer"></div>