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

Merge branch 'offline_exit'

parents a5c68b50 1a49b0a0
No related branches found
No related tags found
No related merge requests found
......@@ -35,7 +35,7 @@
<script>
// This is for detecting offline issues
var serverUrl = 'https://nodenogg.in'
var serverUrl = 'http://127.0.0.1:5984'
import { mapState } from 'vuex'
export default {
......@@ -45,8 +45,8 @@ export default {
},
computed: mapState({
myMicrocosm: state => state.microcosm,
myClient: state => state.myclient
myMicrocosm: (state) => state.microcosm,
myClient: (state) => state.myclient,
}),
methods: {
addNode() {
......@@ -78,6 +78,7 @@ export default {
},
handleConnection: function () {
var ref = this
if (navigator.onLine) {
this.isReachable(this.getServerUrl()).then(function (online) {
if (online) {
......@@ -105,8 +106,8 @@ export default {
},
getServerUrl: function () {
return serverUrl || window.location.origin
}
}
},
},
}
</script>
......
// FIXME: Everything below is OLD code
<template>
<div class="yourdata" name="anchorName">
<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'
export default {
name: 'OffLine',
computed: mapState({
myNodes: (state) => state.myNodes,
}),
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>
<style lang="css" scoped>
h3 {
margin-top: 1em;
}
.data p {
white-space: pre-wrap;
line-height: 1em;
}
</style>
......@@ -79,7 +79,7 @@ export default {
clientid: '',
parta: true,
partb: false,
partc: false
partc: false,
}
},
......@@ -120,8 +120,8 @@ export default {
},
readyFocusTwo() {
this.$refs.objectnametwo.focus()
}
}
},
},
}
</script>
......@@ -166,9 +166,9 @@ input {
@media only screen and (min-width: 640px) {
/* Style adjustments for viewports that meet the condition */
.notlogged {
/* .notlogged {
grid-column: 1 / 3;
grid-row: 1;
}
} */
}
</style>
......@@ -15,7 +15,7 @@
</template>
<script>
var serverUrl = 'https://nodenogg.in'
var serverUrl = 'http://127.0.0.1:5984'
import { mapState, mapGetters } from 'vuex'
import * as allModes from '@/experimental/modes'
......@@ -36,13 +36,15 @@ export default {
methods: {
setMode(mode) {
this.$store.commit('ui/setMode', mode)
if (mode == 'exit') {
this.removeLocal()
}
if (mode == 'addNode') {
this.$store.dispatch('addNode')
}
},
isActive(mode) {
return this.mode === mode.name
// if (mode.name == 'exit') {
// console.log('exit')
// }
},
removeLocal: function () {
......
<template>
<g>
<path d="M21 6H45V43H21" stroke="black" stroke-width="3" />
<rect x="18" y="8" width="25" height="32" fill="white" />
<path
d="M1.93934 23.9393C1.35355 24.5251 1.35355 25.4749 1.93934 26.0607L11.4853 35.6066C12.0711 36.1924 13.0208 36.1924 13.6066 35.6066C14.1924 35.0208 14.1924 34.0711 13.6066 33.4853L5.12132 25L13.6066 16.5147C14.1924 15.9289 14.1924 14.9792 13.6066 14.3934C13.0208 13.8076 12.0711 13.8076 11.4853 14.3934L1.93934 23.9393ZM32 23.5L3 23.5V26.5L32 26.5V23.5Z"
fill="black"
/>
<line x1="22.5" y1="6" x2="22.5" y2="18" stroke="black" stroke-width="3" />
<line x1="22.5" y1="32" x2="22.5" y2="44" stroke="black" stroke-width="3" />
</g>
</template>
......@@ -9,6 +9,7 @@ import person from './person'
import plus from './plus'
import select from './select'
import upload from './upload'
import exit from './exit'
export {
addNode,
......@@ -22,4 +23,5 @@ export {
plus,
select,
upload,
exit,
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Sandbox from '../views/Sandbox'
import Oldhome from '../views/Oldhome'
Vue.use(VueRouter)
......@@ -9,12 +9,12 @@ export const routes = [
{
path: '/',
name: 'Home',
component: Home
component: Home,
},
{
path: '/sandbox',
name: 'Sandbox',
component: Sandbox
path: '/oldhome',
name: 'Old Home',
component: Oldhome,
},
{
path: '/about',
......@@ -23,12 +23,12 @@ export const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue')
import(/* webpackChunkName: "about" */ '../views/About.vue'),
},
// dynamic segement `:microcosm` is added to the path
{
path: '/microcosm/:microcosm',
component: Home
component: Home,
},
{
......@@ -38,8 +38,8 @@ export const routes = [
component: () =>
import(
/* webpackChunkName: "NotFoundComponent" */ '../views/NotFound.vue'
)
}
),
},
]
const router = new VueRouter({
......@@ -47,7 +47,7 @@ const router = new VueRouter({
//base: 'https://alpha.nodenogg.in/',
//base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '',
//base: process.env.VUE_APP_HTTP,
routes
routes,
})
export default router
<template>
<div class="home">
<div v-if="clientset">
<div v-if="listview">
<ListLayer
<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)"
/>
<OtherListlayer
v-for="value in otherNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
<ModeToolbar
@offlineTriggered="offlineTriggered()"
@onlineTriggered="onlineTriggered()"
/>
<ViewToolbar />
<!-- <OnBoard v-else @clientAdded="clientAdded()" /> -->
</div>
</div>
<div v-else>
<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"
......@@ -32,68 +54,92 @@
v-bind:nodetext="value.node_text"
/>
</div>
<ControlsLayer @listView="listView()" />
</div>
<OnBoard v-else @clientAdded="clientAdded()" />
</PanZoomContainer>
<ModeToolbar
@offlineTriggered="offlineTriggered()"
@onlineTriggered="onlineTriggered()"
/>
<ViewToolbar />
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import OnBoard from '@/components/OnBoard.vue'
import NodesLayer from '@/components/NodesLayer.vue'
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 ListLayer from '@/components/ListLayer.vue'
import OtherListlayer from '@/components/OtherListlayer.vue'
import ControlsLayer from '@/components/ControlsLayer.vue'
import { mapState } from 'vuex'
import OnBoard from '@/components/OnBoard.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
import ViewToolbar from '@/experimental/ViewToolbar'
// import SelectionLayer from '@/experimental/layers/SelectionLayer'
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
// import Router from '@/router'
// console.log(Router.currentRoute.params.microcosm)
import { mapGetters, mapState } from 'vuex'
export default {
name: 'Home',
// Shortcut mixin is here so we can call the keyboard controls anytime
mixins: [shortcutsMixin],
created() {
if (typeof window !== 'undefined') {
document.addEventListener('keydown', this.handleKeyPress)
}
if (localStorage.myNNClient == null) {
// visiting from URL get them to name client
// localStorage.setItem('myNNClient', 'unknown client')
// console.log(localStorage.myNNClient)
}
},
beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyPress)
}
},
data: function () {
return {
elementWidth: undefined,
elementHeight: undefined,
width: 2000,
height: 2000,
clientset: false,
listview: false,
offline: false,
}
},
components: {
OnBoard,
NodesLayer,
OtherNodeslayer,
ListLayer,
OtherListlayer,
ControlsLayer,
computed: {
domContainerReady() {
return !!this.elementWidth && !!this.elementHeight
},
computed: mapState({
...mapState({
interaction: (state) => state.ui.interaction,
scale: (state) => state.ui.scale,
translation: (state) => state.ui.translation,
myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
connections: (state) => state.configConnections,
}),
...mapGetters({
activeMode: 'ui/activeMode',
modeContainerStyle: 'ui/modeContainerStyle',
}),
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
created() {
if (typeof window !== 'undefined') {
document.addEventListener('keydown', this.handleKeyPress)
}
},
beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyPress)
}
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
const { offsetWidth, offsetHeight } = this.$refs.container
this.elementWidth = offsetWidth
this.elementHeight = offsetHeight
},
clientAdded() {
this.clientset = !this.clientset
},
......@@ -107,14 +153,6 @@ export default {
this.$store.dispatch('addNode')
},
listView() {
if (this.listview == false) {
this.listview = true
} else {
this.listview = false
}
},
offlineTriggered() {
this.offline = true
},
......@@ -122,7 +160,25 @@ export default {
this.offline = false
},
},
components: {
ModeToolbar,
ViewToolbar,
PanZoomContainer,
// SelectionLayer,
NodesLayer,
OtherNodeslayer,
ConnectionsLayer,
OnBoard,
OffLine,
},
}
</script>
<style scoped></style>
<style scoped>
.wrapper {
height: calc(100vh - 120px);
width: calc(100%-80px);
margin: 40px;
position: relative;
}
</style>
<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 class="home">
<div v-if="clientset">
<div v-if="listview">
<ListLayer
v-for="value in myNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
/>
<OtherListlayer
v-for="value in otherNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
/>
</div>
<div v-else>
<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"
......@@ -26,90 +32,68 @@
v-bind:nodetext="value.node_text"
/>
</div>
<ControlsLayer @listView="listView()" />
</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 />
<ViewToolbar />
</div>
</template>
<script>
import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
// @ is an alias to /src
import OnBoard from '@/components/OnBoard.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
import ViewToolbar from '@/experimental/ViewToolbar'
// import SelectionLayer from '@/experimental/layers/SelectionLayer'
import NodesLayer from '@/components/NodesLayer.vue'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import ListLayer from '@/components/ListLayer.vue'
import OtherListlayer from '@/components/OtherListlayer.vue'
import ControlsLayer from '@/components/ControlsLayer.vue'
import { mapState } from 'vuex'
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
import { mapGetters, mapState } from 'vuex'
// import Router from '@/router'
// console.log(Router.currentRoute.params.microcosm)
export default {
name: 'Sandbox',
name: 'Oldhome',
// Shortcut mixin is here so we can call the keyboard controls anytime
mixins: [shortcutsMixin],
data: function () {
return {
elementWidth: undefined,
elementHeight: undefined,
width: 2000,
height: 2000,
clientset: false,
listview: false,
offline: false,
}
},
computed: {
domContainerReady() {
return !!this.elementWidth && !!this.elementHeight
},
...mapState({
interaction: (state) => state.ui.interaction,
scale: (state) => state.ui.scale,
translation: (state) => state.ui.translation,
myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
connections: (state) => state.configConnections,
}),
...mapGetters({
activeMode: 'ui/activeMode',
modeContainerStyle: 'ui/modeContainerStyle',
}),
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
created() {
if (typeof window !== 'undefined') {
document.addEventListener('keydown', this.handleKeyPress)
}
if (localStorage.myNNClient == null) {
// visiting from URL get them to name client
// localStorage.setItem('myNNClient', 'unknown client')
// console.log(localStorage.myNNClient)
}
},
beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyPress)
}
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
const { offsetWidth, offsetHeight } = this.$refs.container
this.elementWidth = offsetWidth
this.elementHeight = offsetHeight
data: function () {
return {
clientset: false,
listview: false,
offline: false,
}
},
components: {
OnBoard,
NodesLayer,
OtherNodeslayer,
ListLayer,
OtherListlayer,
ControlsLayer,
},
computed: mapState({
myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
}),
methods: {
clientAdded() {
this.clientset = !this.clientset
},
......@@ -118,13 +102,19 @@ export default {
this.$store.dispatch('shortcutState', e)
},
// This is here to support the shortcuts
addNode() {
this.$store.dispatch('addNode')
},
listView() {
if (this.listview == false) {
this.listview = true
} else {
this.listview = false
}
},
offlineTriggered() {
this.offline = true
},
......@@ -132,24 +122,7 @@ export default {
this.offline = false
},
},
components: {
ModeToolbar,
ViewToolbar,
PanZoomContainer,
// SelectionLayer,
NodesLayer,
OtherNodeslayer,
ConnectionsLayer,
OnBoard,
},
}
</script>
<style scoped>
.wrapper {
height: calc(100vh - 120px);
width: calc(100%-80px);
margin: 40px;
position: relative;
}
</style>
<style scoped></style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment