diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4d7f05eea929bdd3cfcf9aac1e136e3527bc0b1..6ed317d8408d0bc830b9ac9ad00208670df6b911 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 0.1.11
+
+_10th April 2020_
+
+### Added
+
+- You can now switch between spatial view (organise) and list view (bucket mode).
+
+### Fixed
+
+- Typo in CHANGELOG.md
+
# 0.1.10
_7th April 2020_
@@ -12,7 +24,7 @@ _7th April 2020_
### Fixed
-- Create/ Join a new microcosm now reloads URL dependant on whether in development or prodction enviroment
+- Create/ Join a new microcosm now reloads URL dependant on whether in development or production environment.
# 0.1.9
diff --git a/app/package.json b/app/package.json
index d5c6f7a27699b215c3f098772784294dfba9dc0a..966a1bc51fe0cc768b0fc9f3f1953e920fb1a062 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.10",
+ "version": "0.1.11",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue
index b3f2b65f5bc29eecd669be9d64d9470bae06edf2..b2ce6f1bcf520a162884e93c08cdade1a407e528 100644
--- a/app/src/components/ControlsLayer.vue
+++ b/app/src/components/ControlsLayer.vue
@@ -1,12 +1,9 @@
<template>
<div class="controls">
<div class="btn-row">
- <BaseButton buttonClass="action" @click="addNode()"
- >Create Node</BaseButton
- >
- <BaseButton buttonClass="action" @click="removeLocal()"
- >Join another microcosm</BaseButton
- >
+ <BaseButton buttonClass="action" @click="addNode()">Create Node</BaseButton>
+ <BaseButton buttonClass="action" @click="listView()">Switch View</BaseButton>
+ <BaseButton buttonClass="action" @click="removeLocal()">Join another microcosm</BaseButton>
<!-- <BaseButton @click="exportStorage()">Export my contributions</BaseButton>
<BaseButton buttonClass="danger" v-on:click="deleteClient">
Delete my contributions (inc. attachments) permanently
@@ -49,6 +46,10 @@ export default {
addNode() {
this.$store.dispatch('addNode')
},
+ listView() {
+ // FIXME: add action here to toggle visiblity
+ this.$emit('listView')
+ },
exportStorage: function() {
// Save local indexeddb document-store to JSON file
// or export state.notes to JSON file
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8dc4ef4059441d5e3d2e3318bec74bd006acb1e9
--- /dev/null
+++ b/app/src/components/ListLayer.vue
@@ -0,0 +1,39 @@
+<template>
+ <div class="list">
+ <ul v-for="value in myNodes" v-bind:key="value.node_id">
+ <li
+ class="dataeach"
+ v-if="nodeid == value.node_id"
+ :inner-html.prop="value.node_text | marked"
+ ></li>
+ </ul>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+
+export default {
+ name: 'ListLayer',
+ props: {
+ nodeid: String,
+ nodetext: String
+ },
+
+ computed: mapState({
+ myNodes: state => state.myNodes
+ }),
+
+ filters: {
+ // need to write a reverse data filter I suspect here so new data is at the top of list
+ marked: marked
+ }
+}
+</script>
+
+<style lang="css" scoped>
+li {
+ margin-bottom: -15px;
+}
+</style>
\ No newline at end of file
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 9fe4d21b119808b0f54604d7b87e20c3a80d22d9..3fcadd937fdf28ddf420b9283f41c09f7a4936fd 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -35,6 +35,7 @@
></textarea>
</div>
</div>
+ <!-- FIXME: What is this doing below now ? Looks old -->
<div v-else>
<p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
</div>
diff --git a/app/src/components/OtherListlayer.vue b/app/src/components/OtherListlayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76e2f3dd0664476d20164af512c0064c0a230013
--- /dev/null
+++ b/app/src/components/OtherListlayer.vue
@@ -0,0 +1,39 @@
+<template>
+ <div class="otherlist">
+ <ul v-for="value in otherNodes" v-bind:key="value.node_id">
+ <li
+ class="dataeach"
+ v-if="nodeid == value.node_id"
+ :inner-html.prop="value.node_text | marked"
+ >{{ nodeid }}</li>
+ </ul>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+
+export default {
+ name: 'OtherListlayer',
+ props: {
+ nodeid: String,
+ nodetext: String
+ },
+
+ computed: mapState({
+ otherNodes: state => state.otherNodes
+ }),
+
+ filters: {
+ // need to write a reverse data filter I suspect here so new data is at the top of list
+ marked: marked
+ }
+}
+</script>
+
+<style lang="css" scoped>
+li {
+ margin-bottom: -15px;
+}
+</style>
\ No newline at end of file
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 5d8d2ea230c9243b1f004b32845e1443ebe39502..17a3d19b50a6e8d080af79bfa619182a6b4af681 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,22 +1,38 @@
<template>
<div class="home">
<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"
- />
+ <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"
+ />
- <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"
- />
+ <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"
+ />
- <ControlsLayer />
+ <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>
@@ -27,6 +43,8 @@
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'
@@ -57,6 +75,7 @@ export default {
data: function() {
return {
clientset: false,
+ listview: false,
offline: false
}
},
@@ -65,6 +84,8 @@ export default {
OnBoard,
NodesLayer,
OtherNodeslayer,
+ ListLayer,
+ OtherListlayer,
ControlsLayer
},
computed: mapState({
@@ -86,6 +107,14 @@ export default {
this.$store.dispatch('addNode')
},
+ listView() {
+ if (this.listview == false) {
+ this.listview = true
+ } else {
+ this.listview = false
+ }
+ },
+
offlineTriggered() {
this.offline = true
},
diff --git a/app/src/views/NotFound.vue b/app/src/views/NotFound.vue
index 00a987fe7d96afb0f2a731e31e2c605dc0041ed8..6f67de96c12231eaf2583d502d0cefca0982aa81 100644
--- a/app/src/views/NotFound.vue
+++ b/app/src/views/NotFound.vue
@@ -2,6 +2,8 @@
<div>
<h1>This is a Custom 404</h1>
<p>Delightful one coming soon</p>
+
+ <!-- FIXME: Put stuffed Monkey here -->
</div>
</template>