Skip to content
Snippets Groups Projects
Select Git revision
  • 2c362131edd57f7056448b69f05d08ca0955eb02
  • master default protected
  • development
  • gh-pages
4 results

datExtract.doctree

Blame
  • OnBoard.vue 4.31 KiB
    <template>
      <div ref="nodes" class="node">
        <vue-draggable-resizable
          class="innernode"
          :w="300"
          :h="335"
          :x="560"
          :y="50"
          :z="1"
          :draggable="true"
          style="background-color: #6fcf97;"
        >
          <form>
            <div>
              <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
              <div v-if="name == false">
                <input
                  type="text"
                  v-model.trim="clientid"
                  placeholder="name"
                  autocorrect="off"
                  autocapitalize="none"
                  ref="objectname"
                  v-on:keyup.enter="setClient()"
                  @focus="editTrue(true)"
                  @blur="editTrue(false)"
                />
    
                <div class="btn-row">
                  <BaseButton buttonClass="special" @click="setClient()"
                    >Store</BaseButton
                  >
                </div>
              </div>
              <div v-else>
                <h4>Saved</h4>
              </div>
            </div>
          </form>
        </vue-draggable-resizable>
    
        <vue-draggable-resizable
          class="innernode"
          :w="300"
          :h="375"
          :x="1100"
          :y="50"
          :z="1"
          :draggable="true"
          style="background-color: #6fcf97;"
        >
          <form>
            <div class="content">
              <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
              <div v-if="microcosm == false">
                <input
                  type="text"
                  v-model.trim="localmicrocosm"
                  placeholder="microcosm name"
                  autocorrect="off"
                  autocapitalize="none"
                  autofocus
                  v-on:keyup.enter="createMicrocosm()"
                  @focus="editTrue(true)"
                  @blur="editTrue(false)"
                />
    
                <div class="btn-row">
                  <BaseButton
                    buttonClass="special"
                    @click="createMicrocosm(), letsGo()"
                    >Create or Rejoin a Microcosm</BaseButton
                  >
                </div>
              </div>
              <div v-else>
                <h4>Loading...</h4>
              </div>
            </div>
          </form>
        </vue-draggable-resizable>
      </div>
    </template>
    
    <script>
    import Router from '@/router'
    import marked from 'marked'
    
    export default {
      data: function () {
        return {
          localmicrocosm: Router.currentRoute.params.microcosm,
          clientid: '',
          nodetext:
            '## 3. What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
          nodetext2:
            '## 5. Start those engines ! 🏎 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
          name: false,
          microcosm: false,
          // partc: false,
        }
      },
    
      mounted() {
        if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
          this.clientid = localStorage.myNNClient
          this.localmicrocosm = localStorage.mylastMicrocosm
          this.createMicrocosm()
          this.setClient()
          this.letsGo()
        }
      },
      filters: {
        marked: marked,
      },
    
      methods: {
        createMicrocosm() {
          this.$store.dispatch('createMicrocosm', this.localmicrocosm)
          localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
          this.microcosm = true
        },
        setClient() {
          this.$store.dispatch('setClient', this.clientid),
            localStorage.setItem('myNNClient', this.clientid)
          this.name = true
        },
    
        editTrue(e) {
          this.$emit('editTrue', e)
        },
    
        letsGo() {
          this.$emit('clientAdded')
        },
      },
    }
    </script>
    
    <style lang="css" scoped>
    .start {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .vdr {
      padding: 0 0.5em;
    }
    
    .content {
      overflow: hidden;
      max-height: 100%;
    }
    
    h1,
    h2,
    h3,
    p {
      margin: 0px;
    }
    
    h2 {
      float: right;
      font-size: 3em;
    }
    
    h3 {
      font-size: 3em;
      margin-top: 0.5em;
    }
    
    .btn-row {
      margin-bottom: 5px;
      padding: 0px 0px 15px 10px;
      border-radius: 4px;
    }
    
    input {
      font-size: 1em;
      padding: 10px;
      /* margin-left: 20px; */
      border-radius: 4px;
      display: flex;
      justify-content: center;
      margin: 10px;
      -webkit-box-shadow: none;
      box-shadow: none;
      border-style: dotted;
    }
    </style>