diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue index b3f2b65f5bc29eecd669be9d64d9470bae06edf2..cb58d7bc452a8f20f538f1ef0b6b39d863d086d6 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()">List 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..7b6509aa1bd2dcd9c57b0afe22a5614cba9fe791 --- /dev/null +++ b/app/src/components/ListLayer.vue @@ -0,0 +1,40 @@ +<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, + 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/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/views/Home.vue b/app/src/views/Home.vue index 5d8d2ea230c9243b1f004b32845e1443ebe39502..257826194509214d4c84dbcc6eba646a83258efb 100644 --- a/app/src/views/Home.vue +++ b/app/src/views/Home.vue @@ -15,8 +15,15 @@ v-bind:nodeid="value.node_id" v-bind:nodetext="value.node_text" /> - - <ControlsLayer /> + <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" + /> + </div> + <ControlsLayer @listView="listView()" /> </div> <OnBoard v-else @clientAdded="clientAdded()" /> </div> @@ -27,6 +34,7 @@ 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 ControlsLayer from '@/components/ControlsLayer.vue' import { mapState } from 'vuex' @@ -57,6 +65,7 @@ export default { data: function() { return { clientset: false, + listview: false, offline: false } }, @@ -65,6 +74,7 @@ export default { OnBoard, NodesLayer, OtherNodeslayer, + ListLayer, ControlsLayer }, computed: mapState({ @@ -86,6 +96,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>