Skip to content
Snippets Groups Projects
Commit 1a49b0a0 authored by Adam Procter's avatar Adam Procter
Browse files

added simple support if you are offline

Need to check regards to starting offline but this will work if you go offline...
parent 65453a4f
No related branches found
No related tags found
No related merge requests found
...@@ -2,51 +2,60 @@ ...@@ -2,51 +2,60 @@
<template> <template>
<div class="yourdata" name="anchorName"> <div class="yourdata" name="anchorName">
<h2>Offline</h2> <div v-for="value in myNodes" v-bind:key="value.node_id">
<p> <textarea
nodenogg.in appears to be offline, which means you cant see other data at v-if="nodeid == value.node_id"
this stage, as it maybe out of date. Once you reconnect. Your data will @focus="editTrue(true)"
sync and the main views will reappear. This maybe down to you or maybe us. @blur="editTrue(false)"
If you think it us click Support at the top, and let us know autofocus
</p> @input="editNode"
<h3>List - Your Data</h3> v-model="value.node_text"
<ul class="data"> :id="nodeid"
<!-- tips --> class="drag-cancel"
<!-- : is short for v-bind --> ref="nodetext"
<!-- v-if="note.content_type != 'device'" --> placeholder="Idea goes here!"
<li v-for="(note, index) in notes" :key="index"> ></textarea>
<p v-if="note.content_type != 'device'">{{ note.text }}</p> </div>
</li>
</ul> <div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { shortcuts } from './mixins/shortcuts.js'
export default { export default {
name: 'YourData', name: 'OffLine',
mixins: [shortcuts],
computed: mapState({ computed: mapState({
shortcutsstate: (state) => state.shortcutsstate, myNodes: (state) => state.myNodes,
notes: (state) => state.notes,
}), }),
created() {
if (typeof window !== 'undefined') { props: {
document.addEventListener('keydown', this.handleKeyPress) nodeid: String,
}
},
beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyPress)
}
}, },
methods: { methods: {
addDoc() { addDoc() {
this.$store.dispatch('addDoc') this.$store.dispatch('addDoc')
this.$emit('editMode') 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> </script>
......
<template> <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"
@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"> <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
<ConnectionsLayer <ConnectionsLayer
v-bind:width="width" v-bind:width="width"
...@@ -26,26 +54,25 @@ ...@@ -26,26 +54,25 @@
v-bind:nodetext="value.node_text" v-bind:nodetext="value.node_text"
/> />
</div> </div>
<OnBoard v-else @clientAdded="clientAdded()" /> <OnBoard v-else @clientAdded="clientAdded()" />
</PanZoomContainer> </PanZoomContainer>
<!-- <SelectionLayer
v-if="domContainerReady"
v-bind:shape="interaction.shape"
v-bind:width="elementWidth"
v-bind:height="elementHeight"
/> -->
<ModeToolbar <ModeToolbar
@offlineTriggered="offlineTriggered()" @offlineTriggered="offlineTriggered()"
@onlineTriggered="onlineTriggered()" @onlineTriggered="onlineTriggered()"
/> />
<ViewToolbar /> <ViewToolbar />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
import PanZoomContainer from '@/experimental/PanZoomContainer' import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer' import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer' import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue' import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import OnBoard from '@/components/OnBoard.vue' import OnBoard from '@/components/OnBoard.vue'
import ModeToolbar from '@/experimental/ModeToolbar' import ModeToolbar from '@/experimental/ModeToolbar'
...@@ -142,6 +169,7 @@ export default { ...@@ -142,6 +169,7 @@ export default {
OtherNodeslayer, OtherNodeslayer,
ConnectionsLayer, ConnectionsLayer,
OnBoard, OnBoard,
OffLine,
}, },
} }
</script> </script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment