~bendersteed/discordia-chan-fe

f6a746ffcfae554834719a63aec4e8cb259a13d9 — Dimos Dimakakos 7 months ago dfa56a3 master
Revert "Clean: remove image related functionanity"

This reverts commit dfa56a3decb74d55dedcc3dfde14c73b891a74aa.
M src/App.vue => src/App.vue +9 -0
@@ 44,11 44,17 @@ export default {
        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([


@@ 68,6 74,9 @@ export default {
            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([

M src/components/DiscordiaForm.vue => src/components/DiscordiaForm.vue +24 -0
@@ 42,6 42,19 @@
      </span>
    </transition>
    <div class="discordia-form-input">
      <label for="file">Image</label>
      <input
        type="file"
        id="image"
        name="image"
        accept="image/png, image/jpeg"
        enctype="multipart/form-data"
        @change="handleImage"
      />
      <img v-if="preview_url" id="preview" :src="preview_url" />
      <button v-if="image" @click="clearImage">☠</button>
    </div>
    <div class="discordia-form-input">
      <label for="password">Password</label>
      <input type="password" v-model="form.password" placeholder="For file deletion" />
    </div>


@@ 82,6 95,17 @@ export default {
      this.preview_url = "";
      document.getElementById("image").value = "";
    },

    handleImage: function(e) {
      const file = e.target.files[0];
      this.preview_url = URL.createObjectURL(file);
      this.image = true;
    },
    clearImage: function() {
      document.getElementById("image").value = "";
      this.image = false;
      this.preview_url = "";
    },
    enableTooltip: function() {
      this.tooltip = true;
    },

A src/components/DiscordiaImage.vue => src/components/DiscordiaImage.vue +61 -0
@@ 0,0 1,61 @@
<!-- 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 v-if="fileurl" class="discordia-files">
    <p class="discordia-fileinfo">
      File:
      <a :href="fileurl">{{ filename }}</a>
      ({{ fileinfo }})
      <!-- maybe incorporate imgopd and/or iqdb -->
    </p>
    <a :href="fileurl">
      <img :src="fileurl" class="discordia-image" />
    </a>
  </div>
</template>

<script>
export default {
  name: "DiscordiaImage",
  props: {
    fileurl: String,
    filename: String,
    fileinfo: String
  },
  data: () => {
    return {
      toggle: false
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.discordia-fileinfo {
  display: block;
  margin: 0;
}

.discordia-image {
  float: left;
  display: block;
  padding-top: 0.3em;
  max-width: 94% !important;
  margin: 0 20px 0 0;
}
</style>

M src/components/DiscordiaPost.vue => src/components/DiscordiaPost.vue +5 -2
@@ 35,6 35,7 @@
          >{{ ">>" + reply }}</a>
        </span>
      </div>
      <discordia-image :fileurl="post.fileurl" :filename="post.filename" :fileinfo="post.fileinfo" />
      <div :ref="post.id" class="discordia-message">
        <p v-for="(p, index) in post.body" :key="index">
          <span v-for="(elt,index) in p.value" :key="index">


@@ 52,7 53,7 @@
        </p>
      </div>
      <form v-if="toggle" class="discordia-edit-post">
        <input type="password" v-model="password" placeholder="For comment deletion" />
        <input type="password" v-model="password" placeholder="For file deletion" />
        <button type="submit" @click.prevent="checkDeletion(password)">Delete Post</button>
      </form>
      <div v-if="wrong && toggle" class="discordia-wrong-password">


@@ 64,6 65,8 @@
</template>

<script>
import DiscordiaImage from "./DiscordiaImage.vue";

export default {
  name: "DiscordiaPost",
  props: {


@@ 78,7 81,7 @@ export default {
    };
  },
  components: {

    DiscordiaImage
  },
  mounted() {
    document.addEventListener("mouseup", e => {

M src/components/DiscordiaThread.vue => src/components/DiscordiaThread.vue +7 -0
@@ 16,6 16,11 @@

<template>
  <div class="discordia-thread-container">
    <discordia-image
      :fileurl="thread.fileurl"
      :filename="thread.filename"
      :fileinfo="thread.fileinfo"
    />
    <div class="discordia-op-post">
      <div class="discordia-preample">{{ thread.title }} {{ dateString }} No.{{thread.id}}</div>
      <div class="discordia-message">{{ thread.body }}</div>


@@ 34,6 39,7 @@

<script>
import DiscordiaPost from "./DiscordiaPost.vue";
import DiscordiaImage from "./DiscordiaImage.vue";

export default {
  name: "DiscordiaThread",


@@ 42,6 48,7 @@ export default {
  },
  components: {
    DiscordiaPost,
    DiscordiaImage
  },
  methods: {
    deletePost: function(post) {