Skip to content
Snippets Groups Projects
Collect.vue 4.23 KiB
Newer Older
<template>
Adam Procter's avatar
Adam Procter committed
    <div v-if="clientset">
      <div id="listwrapper">
Adam Procter's avatar
Adam Procter committed
        <ModesCard />
Adam Procter's avatar
Adam Procter committed
        <ListLayer @edit-true="(e) => editTrue(e)" :added="added" />
        <div class="btn-row">
Adam Procter's avatar
Adam Procter committed
          <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
            >Create Node</BaseButton
Adam Procter's avatar
Adam Procter committed
          > -->

          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="80"
            viewBox="0 0 143 106"
            class="icon"
            @click="addNode()"
Adam Procter's avatar
Adam Procter committed
            <g transform="translate(-1345 -843)">
              <g class="a" transform="translate(1345 865)">
                <rect class="d" width="127" height="84" />
                <rect class="e" x="0.5" y="0.5" width="126" height="83" />
              </g>
              <g class="b" transform="translate(1361 843)">
                <rect class="d" width="127" height="84" />
                <rect class="e" x="3.5" y="3.5" width="120" height="77" />
              </g>
              <line class="c" x2="41" transform="translate(1406.5 884.5)" />
              <line class="c" y2="41" transform="translate(1426.5 863.5)" />
            </g>
          </svg>
Adam Procter's avatar
Adam Procter committed

Adam Procter's avatar
Adam Procter committed
          <BaseButton class="new" buttonClass="action" @click="uploadAdded()"
Adam Procter's avatar
Adam Procter committed
            >Upload</BaseButton
          >
          <BaseButton class="new" buttonClass="action" @click="copyDone()"
Adam Procter's avatar
Adam Procter committed
            >Get Upload</BaseButton
          >
Adam Procter's avatar
Adam Procter committed
        <UploadLayer
Adam Procter's avatar
Adam Procter committed
          v-bind:uploadready="uploadready"
          v-bind:copyready="copyready"
Adam Procter's avatar
Adam Procter committed
          @upload-added="uploadAdded()"
          @copy-done="copyDone()"
Adam Procter's avatar
Adam Procter committed
        />
Adam Procter's avatar
Adam Procter committed
      </div>
    </div>
    <div v-else>
Adam Procter's avatar
Adam Procter committed
      <WelcomeList
        v-for="value in otherNodes"
        v-bind:key="value.node_id"
        v-bind:nodeid="value.node_id"
        v-bind:nodetext="value.node_text"
        v-bind:deleted="value.deleted"
      />
      <OnBoard @client-added="clientAdded()" @edit-true="(e) => editTrue(e)" />
    </div>
  </div>
</template>

<script>
Adam Procter's avatar
Adam Procter committed
import ListLayer from '@/components/ListLayer'
Adam Procter's avatar
Adam Procter committed
import ModesCard from '@/components/ModesCard'
Adam Procter's avatar
Adam Procter committed
import UploadLayer from '@/components/UploadLayer'
import OnBoard from '@/components/OnBoard'
Adam Procter's avatar
Adam Procter committed
import WelcomeList from '@/components/WelcomeList'
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'

export default {
  name: 'Collect',
Adam Procter's avatar
Adam Procter committed

Adam Procter's avatar
Adam Procter committed
  mixins: [shortcutsMixin],
  data: function () {
    return {
      clientset: false,
Adam Procter's avatar
Adam Procter committed
      uploadready: false,
      copyready: false,
Adam Procter's avatar
Adam Procter committed
      added: true,
Adam Procter's avatar
Adam Procter committed
  computed: {
    ...mapState({
      myNodes: (state) => state.myNodes,
Adam Procter's avatar
Adam Procter committed
      otherNodes: (state) => state.otherNodes,
Adam Procter's avatar
Adam Procter committed
      shortcutstate: (state) => state.shortcutstate,
Adam Procter's avatar
Adam Procter committed
      // toolmode: (state) => state.ui.mode,
Adam Procter's avatar
Adam Procter committed
    }),
  },
Adam Procter's avatar
Adam Procter committed
  created() {
    if (typeof window !== 'undefined') {
      document.addEventListener('keydown', this.handleKeyPress)
    }
  },

Adam Procter's avatar
Adam Procter committed
  mounted() {
    var e = false
    this.$store.dispatch('shortcutState', e)
Adam Procter's avatar
Adam Procter committed
  beforeDestroy() {
    if (typeof window !== 'undefined') {
      document.removeEventListener('keydown', this.handleKeyPress)
    }
  },

  methods: {
    clientAdded() {
      this.clientset = !this.clientset
    },

Adam Procter's avatar
Adam Procter committed
    addNode() {
      this.$store.dispatch('addNode')
Adam Procter's avatar
Adam Procter committed
      this.added = !this.added
Adam Procter's avatar
Adam Procter committed
      this.$forceUpdate()
Adam Procter's avatar
Adam Procter committed
    },

    editTrue(e) {
      this.$store.dispatch('shortcutState', e)
    },
Adam Procter's avatar
Adam Procter committed

    uploadAdded() {
      this.uploadready = !this.uploadready
    },

    copyDone() {
      this.copyready = !this.copyready
Adam Procter's avatar
Adam Procter committed

      // alert(
      //   'Now all you need to do is paste into a new node to display your media'
      // )
Adam Procter's avatar
Adam Procter committed
    },
Adam Procter's avatar
Adam Procter committed
  },
  components: {
Adam Procter's avatar
Adam Procter committed
    ModesCard,
Adam Procter's avatar
Adam Procter committed
    ListLayer,
Adam Procter's avatar
Adam Procter committed
    UploadLayer,
Adam Procter's avatar
Adam Procter committed
    WelcomeList,
  },
}
</script>

<style lang="css" scoped>
Adam Procter's avatar
Adam Procter committed
.welcome {
  width: 95%;
  margin-top: 1em;
  margin-left: 1em;
  background-color: white;
  border: 2px solid black;
  padding: 1em;
}

Adam Procter's avatar
Adam Procter committed
.mobile {
Adam Procter's avatar
Adam Procter committed
  margin-left: 1em;
Adam Procter's avatar
Adam Procter committed
  font-size: 1em;
Adam Procter's avatar
Adam Procter committed
}
Adam Procter's avatar
Adam Procter committed
.new {
Adam Procter's avatar
Adam Procter committed
  margin-left: 1em;
Adam Procter's avatar
Adam Procter committed
  margin-bottom: 1em;
}
Adam Procter's avatar
Adam Procter committed

.example {
  width: 30px;
}

.icon {
  margin-left: 1em;
  padding: 0.5em;
  cursor: pointer;
}

.a {
  fill: #333;
  stroke: #707070;
}
.b {
  fill: #fff;
  stroke: #333;
Adam Procter's avatar
Adam Procter committed
}
.b,
.c {
  stroke-width: 7px;
}
.c,
.e {
  fill: none;
}
.c {
  stroke: #2d9cdb;
}
Adam Procter's avatar
Adam Procter committed
.d {
  stroke: none;
}
</style>