~bendersteed/discordia-chan-fe

ref: b9070ad491515c021d33cc3d21aba9a072c383c1 discordia-chan-fe/src/App.vue -rw-r--r-- 4.8 KiB
b9070ad4 — Dimakakos Dimos Add: mounted method to pick title, and apiURL configuration 2 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!-- 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>