more updates for 0.1.47

CHANGELOG.md

@@ -4,11 +4,19 @@ _23rd December 2020_
 
 ### Changed
 
-- Fixed min width and height on nodes (support towards better auto resizing)
 - Hiding shortcut tips now will stay hidden per session. (n.b this hides them on all views)
 - Focusses input when creating new node enabling fasting entry.
   - in Collect view press n, instantly type in ideas, press tab, press n for next idea (SO FAST!)
 
+### Fixed
+
+- Fixed min width and height on nodes (support towards better auto resizing).
+- Keyboard shortcut n key more fixes in Organise and Card view.(should work all the time)
+
+### Removed
+
+- Removed Specific offline component as if app goes offline mid connection it should work just fine, in all views.
+
 # 0.1.46
 
 _18th Decemeber 2020_

app/src/components/ListLayer.vue

@@ -156,13 +156,6 @@ export default {
   },
 
   methods: {
-    // focusInput() {
-    //   console.log('focus')
-    //   this.nextTick(() => {
-    //     this.$refs.textentry.$el.focus()
-    //   })
-    // },
-
     chooseColor(color, nodeid) {
       this.$store.dispatch('colorNode', { nodeid, color })
       this.$options.myArray = this.nodes_filtered

app/src/components/NodesLayer.vue

@@ -208,23 +208,25 @@ export default {
     }
   },
 
+  props: {
+    added: Boolean,
+  },
+
   filters: {
     marked: marked,
   },
 
   // FIXME: how do we know how to focus on the newest node ?
   // FIXME: Tab between them would also be good
-  // var delay = 100
-  // var input
-  // mounted() {
-  //   setTimeout(this.setFocus, delay)
-  //   input = this.$refs.nodetext
-  //   // console.log(input)
-  // },
-  // method
-  // setFocus() {
-  //   this.$refs.nodetext.focus()
-  // },
+  watch: {
+    added: {
+      deep: true,
+
+      handler() {
+        setTimeout(this.loadData, 200)
+      },
+    },
+  },
 
   computed: {
     ...mapState({
@@ -245,7 +247,6 @@ export default {
         return nodes.deleted == false
       })
     },
-    // this is not working correctly as dragging around moves wrong things
     positions_filtered: function () {
       return this.configPositions.filter((positions) => {
         return this.myNodes.some((node) => {

app/src/components/OffLine.vue → app/src/components/old/OffLine.vue

@@ -2,23 +2,26 @@
 
 <template>
   <div class="yourdata" name="anchorName">
-    <div v-for="value in myNodes" v-bind:key="value.node_id">
+    <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
       <textarea
-        v-if="nodeid == value.node_id"
         @focus="editTrue(true)"
         @blur="editTrue(false)"
         autofocus
         @input="editNode"
-        v-model="value.node_text"
-        :id="nodeid"
+        v-model="nodes.node_text"
+        :id="nodes.node_id"
         class="drag-cancel"
         ref="nodetext"
-        placeholder="Idea goes here!"
+        placeholder="Type your thoughts and ideas here! (will sync to couchdb when back online)"
       ></textarea>
     </div>
 
     <div class="btn-row">
-      <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+      <BaseButton
+        buttonClass="danger"
+        @click.prevent="deleteFlag(nodes.node_id)"
+        >Discard</BaseButton
+      >
     </div>
   </div>
 </template>
@@ -28,19 +31,40 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'OffLine',
-  computed: mapState({
+
+  data() {
+    return {
+      nodeid: String,
+      myArray: null,
+    }
+  },
+  computed: {
+    ...mapState({
       myNodes: (state) => state.myNodes,
     }),
 
-  props: {
-    nodeid: String,
+    nodes_filtered: function () {
+      return this.myNodes.filter((nodes) => {
+        return nodes.deleted == false
+      })
+    },
+  },
+
+  mounted() {
+    setTimeout(this.loadData, 500)
   },
 
   methods: {
-    addDoc() {
-      this.$store.dispatch('addDoc')
-      this.$emit('edit-mode')
+    loadData() {
+      this.$options.myArray = this.nodes_filtered
+      // this.$options.positionsArray = this.positions_filtered
+      this.$forceUpdate()
     },
+    // addNode() {
+    //   // console.log('add called')
+    //   this.$store.dispatch('addNode')
+    //   this.added = !this.added
+    // },
     editTrue(e) {
       this.$emit('edit-true', e)
       //// console.log(e)
@@ -53,8 +77,12 @@ export default {
     },
 
     deleteFlag(e) {
-      e = this.nodeid
+      if (confirm('Confirm discard?')) {
         this.$store.dispatch('deleteFlag', { e })
+        this.$options.myArray = this.nodes_filtered
+      } else {
+        // nothing happens
+      }
     },
   },
 }

app/src/experimental/ModeToolbar.vue

@@ -17,15 +17,12 @@
 </template>
 
 <script>
-var serverUrl = 'https://nodenogg.in'
 import { mapState, mapGetters } from 'vuex'
 
 import * as allModes from '@/experimental/modes'
 
 export default {
   mounted() {
-    window.addEventListener('online', this.handleConnection)
-    window.addEventListener('offline', this.handleConnection)
     this.clientid = localStorage.myNNClient
     this.microcosm = localStorage.mylastMicrocosm
   },
@@ -83,38 +80,6 @@ export default {
         process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
       )
     },
-
-    handleConnection: function () {
-      var ref = this
-      if (navigator.onLine) {
-        this.isReachable(this.getServerUrl()).then(function (online) {
-          if (online) {
-            // handle online status
-            console.log('online')
-            location.reload()
-          } else {
-            console.log('no connectivity')
-          }
-        })
-      } else {
-        // handle offline status
-        console.log('offline')
-        ref.$emit('offline-triggered')
-      }
-    },
-    isReachable: function (url) {
-      // This should pick up a CORS error but it doesnt seem to //
-      return fetch(url, { method: 'HEAD', mode: 'no-cors' })
-        .then(function (resp) {
-          return resp && (resp.ok || resp.type === 'opaque')
-        })
-        .catch(function (err) {
-          console.warn('[conn test failure]:', err)
-        })
-    },
-    getServerUrl: function () {
-      return serverUrl || window.location.origin
-    },
   },
   data() {
     return {

app/src/views/Collect.vue

@@ -5,10 +5,6 @@
         <ModesCard />
         <ListLayer @edit-true="(e) => editTrue(e)" :added="added" />
         <div class="btn-row">
-          <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
-            >Create Node</BaseButton
-          > -->
-
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="80"

app/src/views/Organise.vue

 <template>
   <div>
-    <div class="offline" v-if="clientset && offline">
-      <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
-        <h2>Offline</h2>
-        <p>
-          nodenogg.in appears to be offline, which means you cant see other data
-          at this stage, as it maybe out of date. Once you reconnect. Your data
-          will sync and the main views will reappear. This maybe down to you or
-          maybe us. If you think it's us let us know.
-        </p>
-        <OffLine
-          v-for="value in myNodes"
-          v-bind:key="value.node_id"
-          v-bind:nodeid="value.node_id"
-          v-bind:nodetext="value.node_text"
-          @edit-true="(e) => editTrue(e)"
-        />
-        <ModeToolbar
-          @offline-triggered="offlineTriggered()"
-          @online-triggered="onlineTriggered()"
-        />
-        <ViewToolbar />
-
-        <!-- <OnBoard v-else @clientAdded="clientAdded()" /> -->
-      </div>
-    </div>
-
-    <div class="online" v-else>
     <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
       <PanZoomContainer
         v-bind:width="width"
@@ -36,7 +9,7 @@
       >
         <div v-if="clientset">
           <OtherNodeslayer />
-            <NodesLayer @edit-true="(e) => editTrue(e)" />
+          <NodesLayer @edit-true="(e) => editTrue(e)" :added="added" />
           <TipsLayer />
           <ModeCardorg />
           <ConnectionsLayer />
@@ -44,7 +17,7 @@
 
         <div v-else>
           <OtherNodeslayer />
-            <NodesLayer @edit-true="(e) => editTrue(e)" />
+          <NodesLayer @edit-true="(e) => editTrue(e)" :added="added" />
           <OnBoard
             @client-added="clientAdded()"
             @edit-true="(e) => editTrue(e)"
@@ -54,9 +27,8 @@
         <!-- <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer> -->
       </PanZoomContainer>
       <!-- <ToolBar /> -->
+
       <ModeToolbar
-          @offline-triggered="offlineTriggered()"
-          @online-triggered="onlineTriggered()"
         @upload-added="uploadAdded()"
         @copy-done="copyDone()"
         @draw-on="drawOn()"
@@ -73,14 +45,12 @@
       />
     </div>
   </div>
-  </div>
 </template>
 
 <script>
 import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/components/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
-import OffLine from '@/components/OffLine'
 
 // import ToolBar from '@/components/ToolBar'
 //import ScribbleLayer from '@/components/ScribbleLayer'
@@ -106,10 +76,12 @@ export default {
       height: 2000,
       clientset: false,
       // listview: false,
-      offline: false,
+      added: true,
+
       uploadready: false,
       copyready: false,
       drawready: false,
+
       // shortcutstate: false,
     }
   },
@@ -138,9 +110,9 @@ export default {
     }),
   },
   mounted() {
-    var e = false
     window.addEventListener('resize', this.handleResize)
     this.handleResize()
+    var e = false
     this.$store.dispatch('shortcutState', e)
   },
 
@@ -194,18 +166,11 @@ export default {
     // This is here to support the shortcuts
     addNode() {
       this.$store.dispatch('addNode')
-      this.$forceUpdate()
+      this.added = !this.added
     },
     selectMode(mode) {
       this.$store.commit('ui/setMode', mode)
     },
-
-    offlineTriggered() {
-      this.offline = true
-    },
-    onlineTriggered() {
-      this.offline = false
-    },
   },
   components: {
     ModeToolbar,
@@ -218,7 +183,7 @@ export default {
     ConnectionsLayer,
     OnBoard,
     // ToolBar,
-    OffLine,
+
     UploadLayer,
     // ScribbleLayer,
     TipsLayer,
@@ -236,4 +201,27 @@ export default {
 }
 .orgupload {
 }
+
+.a {
+  fill: #333;
+  stroke: #707070;
+}
+.b {
+  fill: #fff;
+  stroke: #333;
+}
+.b,
+.c {
+  stroke-width: 7px;
+}
+.c,
+.e {
+  fill: none;
+}
+.c {
+  stroke: #2d9cdb;
+}
+.d {
+  stroke: none;
+}
 </style>