From 1a49b0a01c0b929e5cc5019afd85b98ee7b489e0 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sun, 7 Jun 2020 13:29:37 +0100
Subject: [PATCH] added simple support if you are offline
Need to check regards to starting offline but this will work if you go offline...
---
app/src/components/OffLine.vue | 69 +++++++++++++-----------
app/src/views/Home.vue | 96 ++++++++++++++++++++++------------
2 files changed, 101 insertions(+), 64 deletions(-)
diff --git a/app/src/components/OffLine.vue b/app/src/components/OffLine.vue
index 3d89936..249ec44 100644
--- a/app/src/components/OffLine.vue
+++ b/app/src/components/OffLine.vue
@@ -2,51 +2,60 @@
<template>
<div class="yourdata" name="anchorName">
- <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 us click Support at the top, and let us know
- </p>
- <h3>List - Your Data</h3>
- <ul class="data">
- <!-- tips -->
- <!-- : is short for v-bind -->
- <!-- v-if="note.content_type != 'device'" -->
- <li v-for="(note, index) in notes" :key="index">
- <p v-if="note.content_type != 'device'">{{ note.text }}</p>
- </li>
- </ul>
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
+ :id="nodeid"
+ class="drag-cancel"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
+ </div>
+
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+ </div>
</div>
</template>
<script>
import { mapState } from 'vuex'
-import { shortcuts } from './mixins/shortcuts.js'
export default {
- name: 'YourData',
- mixins: [shortcuts],
+ name: 'OffLine',
computed: mapState({
- shortcutsstate: (state) => state.shortcutsstate,
- notes: (state) => state.notes,
+ myNodes: (state) => state.myNodes,
}),
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- },
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
+
+ props: {
+ nodeid: String,
},
+
methods: {
addDoc() {
this.$store.dispatch('addDoc')
this.$emit('editMode')
},
+ editTrue(e) {
+ this.$emit('editTrue', e)
+ //console.log(e)
+ },
+
+ editNode(e) {
+ var nodeid = e.target.id
+ var nodetext = e.target.value
+ this.$store.dispatch('editNode', { nodeid, nodetext })
+ },
+
+ deleteFlag(e) {
+ e = this.nodeid
+ this.$store.dispatch('deleteFlag', { e })
+ },
},
}
</script>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index fbd822f..075bafa 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,44 +1,70 @@
<template>
- <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
- <ConnectionsLayer
- v-bind:width="width"
- v-bind:height="height"
- v-bind:connections="connections"
- />
- <PanZoomContainer
- v-bind:width="width"
- v-bind:height="height"
- v-bind:scale="scale"
- v-bind:translation="translation"
- >
- <div v-if="clientset">
- <OtherNodeslayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
- <NodesLayer
- @editTrue="(e) => editTrue(e)"
+ <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"
+ @editTrue="(e) => editTrue(e)"
+ />
+ <ModeToolbar
+ @offlineTriggered="offlineTriggered()"
+ @onlineTriggered="onlineTriggered()"
+ />
+ <ViewToolbar />
+
+ <!-- <OnBoard v-else @clientAdded="clientAdded()" /> -->
+ </div>
+ </div>
+
+ <div class="online" v-else>
+ <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+ <ConnectionsLayer
+ v-bind:width="width"
+ v-bind:height="height"
+ v-bind:connections="connections"
+ />
+ <PanZoomContainer
+ v-bind:width="width"
+ v-bind:height="height"
+ v-bind:scale="scale"
+ v-bind:translation="translation"
+ >
+ <div v-if="clientset">
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+ <NodesLayer
+ @editTrue="(e) => editTrue(e)"
+ v-for="value in myNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+ </div>
+
+ <OnBoard v-else @clientAdded="clientAdded()" />
+ </PanZoomContainer>
+
+ <ModeToolbar
+ @offlineTriggered="offlineTriggered()"
+ @onlineTriggered="onlineTriggered()"
/>
+ <ViewToolbar />
</div>
- <OnBoard v-else @clientAdded="clientAdded()" />
- </PanZoomContainer>
- <!-- <SelectionLayer
- v-if="domContainerReady"
- v-bind:shape="interaction.shape"
- v-bind:width="elementWidth"
- v-bind:height="elementHeight"
- /> -->
- <ModeToolbar
- @offlineTriggered="offlineTriggered()"
- @onlineTriggered="onlineTriggered()"
- />
- <ViewToolbar />
+ </div>
</div>
</template>
@@ -46,6 +72,7 @@
import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
+import OffLine from '@/components/OffLine'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import OnBoard from '@/components/OnBoard.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
@@ -142,6 +169,7 @@ export default {
OtherNodeslayer,
ConnectionsLayer,
OnBoard,
+ OffLine,
},
}
</script>
--
GitLab