EliteDangerous/Companion
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated to vue3

Browse Source 
initial work on more reactive EventSource wrapper
This commit is contained in:
sdietz
2021-05-15 22:43:06 +00:00
parent fdbd14a2b2
commit 7b26672963
14 changed files with 2144 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+1927 -1341
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+11 -12
View File
@@ -9,21 +9,20 @@
},
"dependencies": {
"bulma": "^0.9.2",
"core-js": "^3.12.0",
"vue": "^2.6.12",
"vue-router": "^3.5.1"
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.3",
"vue-template-compiler": "^2.6.12"
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^6.0.0",
"sass-loader": "^10.0.0"
},
"eslintConfig": {
"root": true,
@@ -31,7 +30,7 @@
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
frontend/src/App.vue
+23 -9
View File
@@ -1,18 +1,16 @@
<template>
<div id="app">
<div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<router-link class="navbar-item" to="/">Home</router-link>
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
data-target="navbar"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@@ -20,14 +18,30 @@
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div id="navbar" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<router-link class="navbar-item" to="/connect/blubber">
Connect
</router-link>
<router-link class="navbar-item" to="/about">About</router-link>
</div>
<div class="navbar-end">
<router-view name="navbar" />
</div>
<div class="navbar-end"></div>
</div>
</div>
</nav>
<router-view />
<div class="container">
<router-view />
</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
</style>
frontend/src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

frontend/src/assets/main.scss
+7 -3
View File
@@ -1,7 +1,11 @@
@import "~bulma/sass/utilities/initial-variables";
$scheme-main: $black-ter;
$scheme-invert: $white-ter;
$text: $grey-lightest;
//$scheme-main: $black-ter;
//$scheme-invert: $white-ter;
//$text: $grey-lightest;
@import "~bulma/bulma";
.navbar-item .notification {
padding: inherit;
}
frontend/src/components/Connection.vue
+13 -11
View File
@@ -1,23 +1,25 @@
<template>
<div class="notification" v-bind:class="active ? 'is-success' : 'is-danger'">
<span v-if="active">Connected as {{ channel }}</span>
<span v-else>Disconnected</span>
<div class="navbar-item">
<div class="notification" :class="{'is-success': test.connected, 'is-danger': !test.connected && !test.reconnecting, 'is-warning': test.reconnecting}">
<span v-if="test.connected">Connected as {{ hash }}</span>
<span v-else-if="test.reconnecting">Reconnecting</span>
<span v-else>Disconnected</span>
</div>
</div>
</template>
<script>
import eventSource from "@/eventsource";
import { getEventSourceInstance } from "@/eventsource";
export default {
name: "Connection",
computed: {
active() {
return eventSource.isConnected()
},
},
props: {
channel: String,
hash: String
},
data() {
return {
test: getEventSourceInstance("/feed/updates/" + this.hash).connectionStatus
};
},
};
</script>
frontend/src/components/HelloWorld.vue
-14
View File
@@ -1,14 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
frontend/src/eventsource/index.js
+68 -45
View File
@@ -1,56 +1,79 @@
import store from "../store"
import handler from './handlers'
//import store from "@/store"
//import handler from './handlers'
import { reactive } from "vue";
var connection = null
var onOpenCallback = null
var onCloseCallback = null
let eventSources = {};
const eventSource = {
connect(channel) {
if(connection != null) {
connection.close();
}
const createEventSource = (url, callbacks) => {
connection = new EventSource('/feed/updates/' + channel)
let connection = null
let backoffSeconds = 1
let connectionStatus = reactive({
connected: false,
reconnecting: false,
})
connection.addEventListener("message", function(message) {
var data = JSON.parse(message.data)
handler.handle(data)
store.setRawMessageAction(message.data)
})
let eventSource = {
open() {
if (connection === null) {
connection = new EventSource(url)
connection.addEventListener("open", function () {
if(typeof onOpenCallback === 'function') {
onOpenCallback()
connection.addEventListener('message', (message) => {
if (typeof callbacks.onMessage === 'function') {
callbacks.onMessage(message)
}
})
connection.addEventListener('open', () => {
connectionStatus.connected = true
connectionStatus.reconnecting = false
backoffSeconds = 1
if (typeof callbacks.onOpen === 'function') {
callbacks.onOpen()
}
})
connection.addEventListener('error', () => {
connectionStatus.connected = false
connectionStatus.reconnecting = true
connection.close()
connection = null
setTimeout(this.open.bind(this), backoffSeconds * 1000)
if (backoffSeconds < 128) {
backoffSeconds *= 2
}
})
}
})
connection.addEventListener("close", function () {
if(typeof onCloseCallback === 'function') {
onCloseCallback()
}
})
connection.addEventListener("error", function () {
if(connection.readyState !== EventSource.CONNECTING) {
if(typeof onCloseCallback === 'function') {
onCloseCallback()
},
close() {
if (connection !== null) {
connectionStatus.connected = false
connectionStatus.reconnecting = false
connection.close();
connection = null
if (typeof callbacks.onClose === 'function') {
callbacks.onClose();
}
}
})
},
isConnected() {
return connection.readyState === EventSource.OPEN
},
isConnecting() {
return connection.readyState === EventSource.CONNECTING
},
onOpen(callback) {
onOpenCallback = callback
},
onClose(callback) {
onCloseCallback = callback
}
}
Object.defineProperty(eventSource, 'connectionStatus', {
get: function () {
return connectionStatus
}
});
return eventSource
}
export default eventSource
const getEventSourceInstance = (url, callbacks = {}) => {
if (!eventSources[url]) {
let eventSource = createEventSource(url, callbacks)
eventSources[url] = eventSource
}
return eventSources[url];
}
export { getEventSourceInstance }
frontend/src/main.js
+4 -11
View File
@@ -1,17 +1,10 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import './assets/main.scss'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
data: store.state,
router,
render: h => h(App)
}).$mount('#app')
createApp(App, store.state)
.use(router)
.mount('#app')
frontend/src/router/index.js
+37 -23
View File
@@ -1,27 +1,41 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import { createWebHashHistory , createRouter } from 'vue-router';
Vue.use(VueRouter)
import Home from '@/views/Home.vue';
import Connect from '@/views/Connect.vue';
import Connection from '@/components/Connection.vue';
import About from '@/views/About.vue';
import NotFound from '@/views/NotFound.vue';
const routes = [
{
path: '/:channel?',
name: 'Home',
component: Home
}
// {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // 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')
// }
]
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/connect/:hash",
name: "Connect",
components: {
default: Connect,
"navbar": Connection
},
props: true
},
{
path: "/about",
name: "About",
component: About
},
{
path: "/:catchall(.*)",
component: NotFound
}
];
const router = new VueRouter({
routes
})
const router = createRouter({
history: createWebHashHistory(),
linkActiveClass: "is-active",
routes
});
export default router
export default router;
frontend/src/views/About.vue
+3
View File
@@ -0,0 +1,3 @@
<template>
<h1>About Page</h1>
</template>
frontend/src/views/Connect.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<div>
<h1>Connect Page - {{ hash }}</h1>
<button v-on:click="disconnect">Disconnect</button>
<button v-on:click="connect">Connect</button>
</div>
</template>
<script>
import { getEventSourceInstance } from "@/eventsource";
import store from '@/store'
export default {
props: {
hash: String,
},
data() {
return {
currentChannel: this.hash,
};
},
created() {
this.$data.blumm = getEventSourceInstance("/feed/updates/" + this.hash, {
onOpen: () => {
store.setConnectedAction(true)
},
onClose: () => {
store.setConnectedAction(false)
},
});
if (!this.$data.blumm.isOpen) {
this.$data.blumm.open();
}
},
methods: {
disconnect() {
this.$data.blumm.close();
},
connect() {
this.$data.blumm.open();
},
},
};
</script>
frontend/src/views/Home.vue
+1 -59
View File
@@ -1,61 +1,3 @@
<template>
<div class="home">
<Connection v-bind:active="active" v-bind:channel="currentChannel" />
<HelloWorld v-bind:msg="message" />
<div>
Credits: {{ credits }}
</div>
</div>
<h1>Home Page</h1>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Connection from "@/components/Connection.vue";
import eventSource from "@/eventsource";
var connect = function (channel) {
if (channel != "undefined" && channel != data.currentChannel) {
data.currentChannel = channel;
eventSource.connect(channel);
}
};
var data = {
active: false,
currentChannel: "",
};
export default {
name: "Home",
data() {
return data;
},
computed: {
message() {
return this.$root.message;
},
credits() {
return this.$root.credits;
}
},
watch: {
$route(to) {
connect(to.params.channel);
},
},
created() {
eventSource.onOpen(function () {
data.active = true;
});
eventSource.onClose(function () {
data.active = false;
});
connect(this.$route.params.channel);
},
components: {
HelloWorld,
Connection,
},
};
</script>
frontend/src/views/NotFound.vue
+3
View File
@@ -0,0 +1,3 @@
<template>
<h1>404</h1>
</template>