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

View file

@ -79,13 +79,20 @@ document.getElementById("send").addEventListener("submit", async e => {
* Button Listener
*/
document.addEventListener("click", async e => {
let page = 1;
// e.preventDefault();
if (e.target.id === "delete_thread") {
const response = await request("/api/threads/" + e.target.value + "/delete");
if (response.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") {
@ -95,17 +102,7 @@ document.addEventListener("click", async e => {
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 === "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";
} */

View file

@ -37,10 +37,9 @@
});
if (response) {
alert("Thread opened");
if (response)
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">
<%- include("extra/meta", {title: "Log in!" }) %>
<link rel="stylesheet" href="/css/login.css" />
<body style="text-align: center;">
<link rel="stylesheet" href="/css/login.css" />
<%- include("extra/navbar") %>
<h1 class="title">Login</h1>

View file

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

View file

@ -1,69 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<%- include("extra/old_header", { title: thread.title }) %>
<body>
<%- include("extra/old_navbar", {user}) %>
<%- include("extra/meta", {title: "Thread list!" }) %>
<h1 style="font-size: 35px;">
<%= thread.title %>
</h1>
<body style="text-align: center;">
<%- include("extra/navbar") %>
<h2 style="display:inline;">By <a href=<%="/users/" + thread.author.id %>> <%= thread.author.name %></a>
<img class="circle" src=<%=thread.author.avatar %> alt=<%= thread.author.name %>>
</h2>
<% if (user && !thread.deleted){ %>
<button id="delete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">DELETE</button>
<button id="edit_thread" style="display:inline;" type="submit">EDIT</button>
<% } else if (thread.deleted) { %>
<h3 style="display:inline;">This thread has been deleted</h3>
<% }; %>
<hr>
<link rel="stylesheet" href="/css/thread.css" />
<div id="messages" value="<%= thread.id %>">
<% if (!user){ %>
<h1>Guests cant view messages!</h1>
<% }%>
</div>
<hr>
<h1 style="font-size: 35px;color: #4d18e6;" >
<%= thread.title %>
</h1>
<h2 style="display:inline;">By <a href=<%="/users/" + thread.author.id %>> <%= thread.author.name %></a>
<img class="circle" src=<%=thread.author.avatar %> alt=<%= thread.author.name %>>
</h2>
<% if (user && !thread.deleted){ %>
<button id="delete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">DELETE</button>
<button id="edit_thread" style="display:inline;" type="submit">EDIT</button>
<% } else if (thread.deleted) { %>
<h3 style="display:inline;">This thread has been deleted</h3>
<button id="undelete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">UNDELETE</button>
<% }; %>
<form id="send">
<textarea rows="4" cols="133" name="content"></textarea>
<input name="threadID" type="hidden" value="<%= thread.id %>"></input>
<hr>
<br>
<% if (user){ %>
<button type="submit">Send!</button>
<%} else {%>
<button disabled>Login for send</button>
<% }%>
</form>
<div id="messages" value="<%= thread.id %>">
<% if (!user){ %>
<h1>Guests cant view messages!</h1>
<% }%>
<% if (user){ %>
<script type="module" src="/js/thread.js"></script>
<!--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>
<hr>
<form id="send">
<textarea rows="4" cols="133" name="content"></textarea>
<input name="threadID" type="hidden" value="<%= thread.id %>"></input>
<br>
<% if (user){ %>
<button type="submit">Send!</button>
<%} else {%>
<button disabled>Login for send</button>
<% }%>
<script>
document.getElementById("message-<%= scroll %>").scrollIntoView();
</script>
<!-- <div style="float: right;">
<h3 id="page_count" style="display:inline;">1</h3>
<button id="left_page" style=" display:inline;float: right;" type="submit">PREV</button>
</form>
<button id="right_page" style="display:inline;float: right;" type="submit">NEXT</button>
</div>-->
<% if (user){ %>
<script type="module" src="/js/thread.js"></script>
<% }%>
<script>
document.getElementById("message-<%= scroll %>").scrollIntoView();
</script>
<%- include("extra/old_footer") %>
</body>
<!-- BURAYA Bİ İLERİ BİR GERİ SAYFA BUTONU GELMEZ Mİ BE-->
</body>
</html>