[WIP] Threads page is converting to new theme

This commit is contained in:
Akif9748 2022-08-26 22:09:02 +03:00
parent 7aa459e402
commit 0e659a8aa4
11 changed files with 109 additions and 143 deletions

View file

@ -33,7 +33,9 @@ And, you can learn about API in `util/APIDOCS.md`.
## Roadmap ## Roadmap
### TO-DO: ### TO-DO:
- If thread deleted, not show its messages in API. - If thread deleted, not show its messages in API.
- If redirect => /register, return - Thread.ejs fix with new theme
- Profile photos will store in database
### Frontend ### Frontend
### User ### User
| To do | Is done? | Priority | | To do | Is done? | Priority |
@ -56,7 +58,7 @@ And, you can learn about API in `util/APIDOCS.md`.
| Send | 🟢 | HIGH | | Send | 🟢 | HIGH |
| Delete | 🟢 | HIGH | | Delete | 🟢 | HIGH |
| Regex for scripts | 🔴 | HIGH | | Regex for scripts | 🔴 | HIGH |
| Undelete | 🔴 | MEDIUM | | Undelete | 🟡 | MEDIUM |
| React | 🟢 | MEDIUM | | React | 🟢 | MEDIUM |
| Edit | 🔴 | MEDIUM | | Edit | 🔴 | MEDIUM |
@ -66,7 +68,7 @@ And, you can learn about API in `util/APIDOCS.md`.
| Ratelimit | 🟢 | HIGH | | Ratelimit | 🟢 | HIGH |
| Create | 🟢 | HIGH | | Create | 🟢 | HIGH |
| Delete | 🟢 | HIGH | | Delete | 🟢 | HIGH |
| Undelete | 🔴 | MEDIUM | | Undelete | 🟢 | MEDIUM |
| Edit | 🔴 | MEDIUM | | Edit | 🔴 | MEDIUM |
### API ### API
@ -83,21 +85,15 @@ And, you can learn about API in `util/APIDOCS.md`.
### Other ### Other
| To do | Is done? | Priority | | To do | Is done? | Priority |
| ----- | -------- | -------- | | ----- | -------- | -------- |
| Footer | 🟢 | LOW | | Footer | 🔴 | LOW |
| auto-scroll | 🟢 | LOW | | auto-scroll | 🟢 | LOW |
| Multi-theme support | 🟡 | LOW | | Multi-theme support, black theme | 🟡 | LOW |
| Search | 🟡 | MEDIUM | | Search | 🔴 | MEDIUM |
| Better view, page support, support message limit correct | 🔴 | MEDIUM | | Page support, support message limit correct | 🔴 | MEDIUM |
| Sending message etc. will use fetch API | 🟢 | HIGH | | from form to AJAX | 🟢 | HIGH |
### New Theme ## Major Version History
- [x] Login - V3: New Theme
- [x] Register - V2: Backend fix, mongoose is fixed. Really big fix.
- [x] Main page - V1: Mongoose added.
- [x] Error - V0: Birth with quick.db
- [x] Users
- [x] Threads
- [x] Create Thread
- [ ] Thread
- [ ] User
- [ ] Admin

View file

@ -79,13 +79,20 @@ document.getElementById("send").addEventListener("submit", async e => {
* Button Listener * Button Listener
*/ */
document.addEventListener("click", async e => { document.addEventListener("click", async e => {
let page = 1;
// e.preventDefault(); // e.preventDefault();
if (e.target.id === "delete_thread") { if (e.target.id === "delete_thread") {
const response = await request("/api/threads/" + e.target.value + "/delete"); const response = await request("/api/threads/" + e.target.value + "/delete");
if (response.deleted) { if (response.deleted) {
alert("Thread deleted"); alert("Thread deleted");
window.location.href = "/threads"; location.reload();
}
} else if (e.target.id === "undelete_thread") {
const response = await request("/api/threads/" + e.target.value + "/undelete");
if (!response.deleted) {
alert("Thread undeleted");
location.reload();
} }
} else if (e.target.id === "delete_message") { } else if (e.target.id === "delete_message") {
@ -95,16 +102,6 @@ document.addEventListener("click", async e => {
alert("Message deleted"); alert("Message deleted");
document.getElementById("message-delete-" + e.target.value).innerHTML = "<h3 style=\"display:inline;\">This message has been deleted</h3>"; document.getElementById("message-delete-" + e.target.value).innerHTML = "<h3 style=\"display:inline;\">This message has been deleted</h3>";
} }
} else if (e.target.id === "left_page") {
e.preventDefault();
}else if (e.target.id === "right_page") {
e.preventDefault();
const response = await request(`/api/messages/${e.target.value}/delete`);
if (response.deleted) {
alert("Message deleted");
document.getElementById("message-delete-" + e.target.value).innerHTML = "<h3 style=\"display:inline;\">This message has been deleted</h3>";
}
} /*else if (e.target.id === "edit_thread") { } /*else if (e.target.id === "edit_thread") {
window.location.href = "/threads/<%= thread.id }/edit"; window.location.href = "/threads/<%= thread.id }/edit";
} */ } */

View file

@ -37,10 +37,9 @@
}); });
if (response) { if (response)
alert("Thread opened");
window.location.href = "/threads/" + response.id; window.location.href = "/threads/" + response.id;
}
}); });

3
views/extra/footer.ejs Normal file
View file

@ -0,0 +1,3 @@
<div class="footer">
<a href="https://github.com/Akif9748/akf-forum"> This website is powered by AKF-Forum </a>
</div>

View file

@ -1,4 +0,0 @@
<br><br><br><br><br>
<div class="footer">
<p><a href="https://github.com/Akif9748/akf-forum"> This website is powered by AKF-Forum </a></p>
</div>

View file

@ -1,10 +0,0 @@
<head>
<link rel="stylesheet" href="/css/old_style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title || "Akf-forum" %> </title>
<meta name="description" content="Akf-forum!">
<meta name="author" content="Akif9748">
<link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

View file

@ -1,41 +0,0 @@
<% if (user?.admin){ %>
<div class="admin">
<a class="admin" href="/admin"><p>You are admin, and you can go your page!</p></a>
</div>
<hr>
<% } %>
<a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
<div class="navbar" id="navbar">
<a href="/threads">THREADS</a>
<a href="/users">USERS</a>
<a href="/search">SEARCH</a>
<a href="/threads/create/">CREATE THREAD</a>
<% if (user){ %>
<div style="float: right;" class="user" id="user">
<a href=<%=user.getLink() %>>
<h1>
<%= user.name %><img class="circle" src=<%=user.avatar %> alt=<%= user.name %>>
</h1>
</a>
</div>
<% } else { %>
<a style="float: right; background-color: #5F875F;" href="/register">REGISTER</a>
<a id="login" style="float: right; background-color:#5F87AF; " href="/login">LOGIN</a>
<script>
document.getElementById("login").href += "?redirect="+window.location.pathname;
</script>
<% } %>
</div>
<hr>

View file

@ -4,9 +4,10 @@
<html lang="en"> <html lang="en">
<%- include("extra/meta", {title: "Log in!" }) %> <%- include("extra/meta", {title: "Log in!" }) %>
<link rel="stylesheet" href="/css/login.css" />
<body style="text-align: center;"> <body style="text-align: center;">
<link rel="stylesheet" href="/css/login.css" />
<%- include("extra/navbar") %> <%- include("extra/navbar") %>
<h1 class="title">Login</h1> <h1 class="title">Login</h1>

View file

@ -3,9 +3,10 @@
<%- include("extra/meta", {title: "Register!" }) %> <%- include("extra/meta", {title: "Register!" }) %>
<link rel="stylesheet" href="/css/login.css" />
<body style="text-align: center;"> <body style="text-align: center;">
<link rel="stylesheet" href="/css/login.css" />
<%- include("extra/navbar") %> <%- include("extra/navbar") %>
<h1 class="title">Register</h1> <h1 class="title">Register</h1>

View file

@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<%- include("extra/old_header", { title: thread.title }) %> <%- include("extra/meta", {title: "Thread list!" }) %>
<body>
<%- include("extra/old_navbar", {user}) %>
<h1 style="font-size: 35px;"> <body style="text-align: center;">
<%- include("extra/navbar") %>
<link rel="stylesheet" href="/css/thread.css" />
<h1 style="font-size: 35px;color: #4d18e6;" >
<%= thread.title %> <%= thread.title %>
</h1> </h1>
@ -22,8 +25,11 @@
<button id="edit_thread" style="display:inline;" type="submit">EDIT</button> <button id="edit_thread" style="display:inline;" type="submit">EDIT</button>
<% } else if (thread.deleted) { %> <% } else if (thread.deleted) { %>
<h3 style="display:inline;">This thread has been deleted</h3> <h3 style="display:inline;">This thread has been deleted</h3>
<button id="undelete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">UNDELETE</button>
<% }; %> <% }; %>
<hr> <hr>
@ -31,6 +37,31 @@
<% if (!user){ %> <% if (!user){ %>
<h1>Guests cant view messages!</h1> <h1>Guests cant view messages!</h1>
<% }%> <% }%>
<!--EXAMPLE MESSAGE-->
<div class="message" id="message-3">
<h3 style="float:right;">26.08.2022 15:37:42</h3>
<h2>
<img class="circle" src="https://cdn.discordapp.com/avatars/539506680140922890/abd74d10aac094fc8a5ad5c86f29fdb9.png?size=1024" alt="Akif9748">
<a href="/users/0"> Akif9748</a>:
</h2>
<p>Example message for development</p><br>
<div id="message-delete-3">
<form style="display:inline;">
<button id="delete_message" value="3" type="submit">DELETE</button>
</form>
</div>
<div style="float: right;">
<h3 id="count3" style="display:inline;">0</h3>
<button style="display:inline;" id="like" value="3">+🔼</button>
<button style="display:inline;" id="dislike" value="3">-🔽</button>
</div>
</div>
<!--EXAMPLE MESSAGE END-->
</div> </div>
<hr> <hr>
@ -56,14 +87,7 @@
document.getElementById("message-<%= scroll %>").scrollIntoView(); document.getElementById("message-<%= scroll %>").scrollIntoView();
</script> </script>
<!-- <div style="float: right;"> <!-- BURAYA Bİ İLERİ BİR GERİ SAYFA BUTONU GELMEZ Mİ BE-->
<h3 id="page_count" style="display:inline;">1</h3>
<button id="left_page" style=" display:inline;float: right;" type="submit">PREV</button>
<button id="right_page" style="display:inline;float: right;" type="submit">NEXT</button>
</div>-->
<%- include("extra/old_footer") %>
</body> </body>
</html> </html>