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

added discard warning

added alert when you try to discard node
working on collect mode interface
parent 69f95b92
No related branches found
No related tags found
No related merge requests found
......@@ -94,7 +94,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
this.$store.dispatch('deleteFlag', { e })
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
// readFlag(e) {
......
......@@ -98,7 +98,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
this.$store.dispatch('deleteFlag', { e })
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
// readFlag(e) {
......
......@@ -364,7 +364,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
this.$store.dispatch('deleteFlag', { e })
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
readFlag(e) {
e = this.nodeid
......
<template>
<div>
<div v-if="clientset">
<div id="listwrapper">
<h1 class="mobile">Your nodes - collect</h1>
<ListLayer
@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"
v-bind:deleted="value.deleted"
/>
<!-- <div class="btn-row">
<BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
>
</div> -->
</div>
</div>
<div v-else>
<OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</div>
</div>
</template>
<script>
import ListLayer from '@/components/ListLayer'
import OnBoard from '@/components/OnBoard'
import { mapState } from 'vuex'
//import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
export default {
name: 'List',
//mixins: [shortcutsMixin],
data: function () {
return {
clientset: false,
}
},
props: {
nodeid: String,
nodetext: String,
deleted: Boolean,
},
computed: {
...mapState({
myNodes: (state) => state.myNodes,
//otherNodes: (state) => state.otherNodes,
// shortcutstate: (state) => state.shortcutstate,
// toolmode: (state) => state.ui.mode,
}),
},
// created() {
// if (typeof window !== 'undefined') {
// document.addEventListener('keydown', this.handleKeyPress)
// }
// },
// beforeDestroy() {
// if (typeof window !== 'undefined') {
// document.removeEventListener('keydown', this.handleKeyPress)
// }
// },
methods: {
clientAdded() {
this.clientset = !this.clientset
},
addNode() {
this.$store.dispatch('addNode')
},
editTrue(e) {
this.$store.dispatch('shortcutState', e)
},
},
components: {
ListLayer,
OnBoard,
},
}
</script>
<style lang="css" scoped>
.mobile {
margin-left: 1em;
font-size: 1em;
}
.new {
margin-bottom: 1em;
}
</style>
......@@ -2,7 +2,52 @@
<div>
<div v-if="clientset">
<div id="listwrapper">
<h1 class="mobile">Your nodes - collect</h1>
<!-- <h1 class="mobile">Your nodes - collect</h1> -->
<div class="nodes welcome">
<img src="https://alpha.nodenogg.in/files/collect.png" />
<p>
magpie mode is designed for you to gather your thoughts and
research, as quickly and easily as possible.
</p>
<p>
Tap or press the add node icon
<svg
class="example"
xmlns="http://www.w3.org/2000/svg"
width="50"
viewBox="0 0 143 106"
>
<g transform="translate(-1345 -843)">
<g class="a" transform="translate(1345 865)">
<rect class="d" width="127" height="84" />
<rect class="e" x="0.5" y="0.5" width="126" height="83" />
</g>
<g class="b" transform="translate(1361 843)">
<rect class="d" width="127" height="84" />
<rect class="e" x="3.5" y="3.5" width="120" height="77" />
</g>
<line class="c" x2="41" transform="translate(1406.5 884.5)" />
<line class="c" y2="41" transform="translate(1426.5 863.5)" />
</g>
</svg>
(shortcut <strong>n</strong>)
</p>
<p>
Don't forget you can use <a href="#">markdown</a> to quickly format
your text and add images from websources, you can even use html and
embed codes.
</p>
<p>
To see what everyone else has collected in your team and to start
organising, just switch to organise mode (best on a large display).
</p>
<!-- <BaseButton class="new" buttonClass="action" @click="h"
>Close</BaseButton
> -->
</div>
<ListLayer
@editTrue="(e) => editTrue(e)"
v-for="value in myNodes"
......@@ -12,9 +57,30 @@
v-bind:deleted="value.deleted"
/>
<div class="btn-row">
<BaseButton class="new" buttonClass="action" @click="addNode()"
<!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
> -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
viewBox="0 0 143 106"
class="icon"
@click="addNode()"
>
<g transform="translate(-1345 -843)">
<g class="a" transform="translate(1345 865)">
<rect class="d" width="127" height="84" />
<rect class="e" x="0.5" y="0.5" width="126" height="83" />
</g>
<g class="b" transform="translate(1361 843)">
<rect class="d" width="127" height="84" />
<rect class="e" x="3.5" y="3.5" width="120" height="77" />
</g>
<line class="c" x2="41" transform="translate(1406.5 884.5)" />
<line class="c" y2="41" transform="translate(1426.5 863.5)" />
</g>
</svg>
</div>
</div>
</div>
......@@ -95,6 +161,19 @@ export default {
</script>
<style lang="css" scoped>
img {
max-width: 400px;
padding: 0 50;
}
.welcome {
width: 95%;
margin-top: 1em;
margin-left: 1em;
background-color: white;
border: 2px solid black;
padding: 1em;
}
.mobile {
margin-left: 1em;
font-size: 1em;
......@@ -102,4 +181,34 @@ export default {
.new {
margin-bottom: 1em;
}
.example {
width: 30px;
}
.icon {
margin-left: 1em;
padding: 0.5em;
cursor: pointer;
}
.a {
fill: #333;
stroke: #707070;
}
.b {
fill: #fff;
}
.b,
.c {
stroke: #333;
stroke-width: 7px;
}
.c,
.e {
fill: none;
}
.d {
stroke: none;
}
</style>
<template>
<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"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
/>
</div>
<ControlsLayer @listView="listView()" />
</div>
<OnBoard v-else @clientAdded="clientAdded()" />
</div>
</template>
<script>
// @ is an alias to /src
import OnBoard from '@/components/OnBoard.vue'
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 Router from '@/router'
// // console.log(Router.currentRoute.params.microcosm)
export default {
name: 'Oldhome',
// 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 {
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
},
editTrue(e) {
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
},
onlineTriggered() {
this.offline = false
},
},
}
</script>
<style scoped></style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment