<!-- Copyright © 2020 Dimakakos Dimakis <me@bendersteed.tech>
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License as
published by the Free Software Foundation; either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see
<http://www.gnu.org/licenses/>. -->
<template>
<div id="thread">
<discordia-splash v-if="!on" :count="count" @show-thread="showThread" />
<discordia-form v-if="on" :id="reply.id" :text="reply.text" @form-post="onFormPost" />
<discordia-thread
v-if="on"
:thread="thread"
@delete-post="deletePost"
@highlight-reply="highlightReply"
@remove-highlight="removeHighlight"
@reply-to-post="replyToPost"
/>
</div>
</template>
<script>
import DiscordiaForm from "./components/DiscordiaForm.vue";
import DiscordiaThread from "./components/DiscordiaThread.vue";
import DiscordiaSplash from "./components/DiscordiaSplash.vue";
import { randomName } from "./utils/names.js"; /* names will be assigned in server */
export default {
name: "App",
data: () => {
return {
thread: {
id: "20034",
title: "Number Stations",
body: "This is our first thread, yay!",
date: new Date(),
filename: "placeholder.jpg",
fileurl: "https://via.placeholder.com/300x300",
fileinfo: "3.2MB 200x200",
posts: [
{
id: "20035",
author: "Paul Santorinis",
date: new Date(),
filename: "placeholder.jpg",
fileurl: "https://via.placeholder.com/200x120",
fileinfo: "3.2MB 200x200" /* we need to generate this somehow */,
is_replied_by: ["20036"],
body: [
new Map([
["type", "reply"],
["body", ">>20036"]
]),
new Map([
["type", "textline"],
["body", "this is a nice thread"]
])
],
password: "" /* for deleting purposes and such */,
spoiler: false,
highlight: ""
},
{
id: "20036",
author: "Steve Kaketsis",
date: new Date(),
filename: "placeholder.jpg",
fileurl: "https://via.placeholder.com/100x120",
fileinfo: "3.2MB 200x200" /* we need to generate this somehow */,
is_replied_by: [],
body: [
new Map([
["type", "reply"],
["body", ">>20035"]
]),
new Map([
["type", "textline"],
["body", "this is a nice thread"]
])
],
password: "" /* for deleting purposes and such */,
spoiler: false,
highlight: ""
}
]
},
reply: { id: "", text: "" },
on: false,
title: ""
};
},
components: {
DiscordiaSplash,
DiscordiaForm,
DiscordiaThread
},
methods: {
onFormPost: function(form_post, replies) {
const new_post = { ...form_post };
if (!new_post.author) {
new_post.author = randomName();
}
new_post.date = new Date();
new_post.id = "20048"; /* casting strings into integers */
new_post.highlight = "";
this.thread.posts.push(new_post);
this.thread.post_count++;
if (replies) {
const reply_arr = replies.split(",");
for (let id of reply_arr) {
const post = this.thread.posts.find(post => {
return post.id === id;
});
post.is_replied_by.push(new_post.id);
}
}
},
deletePost: function(post) {
this.thread.posts = this.thread.posts.filter(item => item !== post);
},
highlightReply(reply) {
const post = this.thread.posts.find(post => {
return post.id === reply;
});
post.highlight = "discordia-highlighted";
},
removeHighlight(reply) {
const post = this.thread.posts.find(post => {
return post.id === reply;
});
post.highlight = "";
},
replyToPost(id, selection) {
this.reply.id = id;
this.reply.text = selection;
},
showThread: function() {
this.on = true;
}
},
computed: {
count: function() {
return this.thread.posts.length;
},
},
mounted() {
this.title = document.querySelector("title").innerText;
}
};
</script>
<style>
</style>