<template> <div class="controls"> <div class="btn-row"> <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 </BaseButton> <BaseButton @click="handleConnection()">Online check</BaseButton>--> <p class="who"> microcosm = <b>{{ myMicrocosm }}</b> | object = <b>{{ myClient }}</b> </p> </div> <!-- TEMP: This was old code for possible pop up panes --> <!-- <button on:click="popups.showPane = !popups.showPane"> --> <!-- <div class="popup" v-if="popups.showPane"> <div class="popup-title">Pane Title</div> <label> <input type="radio" name="color" /> </label> </div>--> </div> </template> <script> // This is for detecting offline issues var serverUrl = 'http://127.0.0.1:5984' import { mapState } from 'vuex' export default { mounted() { window.addEventListener('online', this.handleConnection) window.addEventListener('offline', this.handleConnection) }, computed: mapState({ myMicrocosm: (state) => state.microcosm, myClient: (state) => state.myclient, }), methods: { addNode() { this.$store.dispatch('addNode') }, listView() { // FIXME: add action here to toggle visiblity this.$emit('list-view') }, exportStorage: function () { // Save local indexeddb document-store to JSON file // or export state.notes to JSON file }, removeLocal: function () { //localStorage.removeItem('myNNClient') localStorage.removeItem('mylastMicrocosm') // Hardcoded as when I set a URL had parameters the reload fails //location.assign('https://alpha.nodenogg.in/') //location.assign('http://localhost:8080/') location.assign( process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/' ) // location.reload() }, deleteClient() { this.$store.dispatch('deleteClient') }, handleConnection: function () { var ref = this if (navigator.onLine) { this.isReachable(this.getServerUrl()).then(function (online) { if (online) { // handle online status // console.log('online') location.reload() } else { // console.log('no connectivity') } }) } else { // handle offline status // console.log('offline') ref.$emit('offline-triggered') } }, isReachable: function (url) { return fetch(url, { method: 'HEAD', mode: 'no-cors' }) .then(function (resp) { return resp && (resp.ok || resp.type === 'opaque') }) .catch(function (err) { console.warn('[conn test failure]:', err) }) }, getServerUrl: function () { return serverUrl || window.location.origin }, }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .controls { position: fixed; z-index: 5; bottom: 0; left: 0; width: 100%; height: 60px; background-color: rgb(10, 10, 10); display: flex; justify-content: center; align-items: center; user-select: none; } .who { color: white; } .btn-row { position: relative; margin-bottom: 5px; display: flex; justify-content: center; flex-wrap: wrap; padding: 0 15px; border-radius: 4px; } </style>