~bendersteed/discordia-chan-fe

dfa56a3decb74d55dedcc3dfde14c73b891a74aa — Dimos Dimakakos 5 months ago b9070ad master
Clean: remove image related functionanity

The project now shifts into a textboard. After thought it makes no sense to have
image capabilities in comments. I think this is for the best.
5 files changed, 2 insertions(+), 106 deletions(-)

M src/App.vue
M src/components/DiscordiaForm.vue
D src/components/DiscordiaImage.vue
M src/components/DiscordiaPost.vue
M src/components/DiscordiaThread.vue
M src/App.vue => src/App.vue +0 -9
@@ 44,17 44,11 @@ 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([


@@ 74,9 68,6 @@ 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 +0 -24
@@ 42,19 42,6 @@
      </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>


@@ 95,17 82,6 @@ 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;
    },

D src/components/DiscordiaImage.vue => src/components/DiscordiaImage.vue +0 -61
@@ 1,61 0,0 @@
<!-- 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 +2 -5
@@ 35,7 35,6 @@
          >{{ ">>" + 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">


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


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

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

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


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

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

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

<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>


@@ 39,7 34,6 @@

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

export default {
  name: "DiscordiaThread",


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