0.1.7 Update Deps - created example folder and put in server and client (v1+ quasar) matched examples. Change scripts in package.json to run examples add @uci/websocket as a dev dep.
This commit is contained in:
David Kebler
parent
a5d8785ec0
commit
cb2f4a613c
70 changed files with 764 additions and 527 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -1,6 +1,2 @@
|
|||
/node_modules/
|
||||
/coverage/
|
||||
/syncd/
|
||||
*.log
|
||||
/temp/
|
||||
/archive/
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ tests/
|
|||
test/
|
||||
*.test.js
|
||||
testing/
|
||||
test-client
|
||||
archive/
|
||||
example/
|
||||
|
|
|
|||
55
example/client/.eslintrc.js
Normal file
55
example/client/.eslintrc.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
|
||||
env: {
|
||||
browser: true
|
||||
},
|
||||
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
'@vue/standard'
|
||||
],
|
||||
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
|
||||
globals: {
|
||||
'ga': true, // Google Analytics
|
||||
'cordova': true,
|
||||
'__statics': true,
|
||||
'process': true
|
||||
},
|
||||
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow paren-less arrow functions
|
||||
'arrow-parens': 'off',
|
||||
'one-var': 'off',
|
||||
|
||||
'import/first': 'off',
|
||||
'import/named': 'error',
|
||||
'import/namespace': 'error',
|
||||
'import/default': 'error',
|
||||
'import/export': 'error',
|
||||
'import/extensions': 'off',
|
||||
'import/no-unresolved': 'off',
|
||||
'import/no-extraneous-dependencies': 'off',
|
||||
'prefer-promise-reject-errors': 'off',
|
||||
|
||||
// allow console.log during development only
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
// allow debugger during development only
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
.thumbs.db
|
||||
node_modules
|
||||
/dist
|
||||
/src-cordova/node_modules
|
||||
/src-cordova/platforms
|
||||
/src-cordova/plugins
|
||||
/src-cordova/www
|
||||
|
|
@ -17,4 +18,3 @@ yarn-error.log*
|
|||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.lock
|
||||
26
example/client/README.md
Normal file
26
example/client/README.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Quasar App (test-client-new)
|
||||
|
||||
a test websocket client for uci websocket server
|
||||
|
||||
## Install the dependencies
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
### Start the app in development mode (hot-code reloading, error reporting, etc.)
|
||||
```bash
|
||||
quasar dev
|
||||
```
|
||||
|
||||
### Lint the files
|
||||
```bash
|
||||
yarn run lint
|
||||
```
|
||||
|
||||
### Build the app for production
|
||||
```bash
|
||||
quasar build
|
||||
```
|
||||
|
||||
### Customize the configuration
|
||||
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
|
||||
5
example/client/babel.config.js
Normal file
5
example/client/babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@quasar/babel-preset-app'
|
||||
]
|
||||
}
|
||||
34
example/client/package.json
Normal file
34
example/client/package.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "test-client-new",
|
||||
"version": "0.0.1",
|
||||
"description": "a test websocket client for uci websocket server",
|
||||
"productName": "Quasar App",
|
||||
"cordovaId": "org.cordova.quasar.app",
|
||||
"author": "David Kebler <d@kebler.net>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"tc": "./node_modules/.bin/quasar dev",
|
||||
"tc:nas": "WSS='ws://ws.kebler.net' npm run tc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@quasar/extras": "^1.2.0",
|
||||
"quasar": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@quasar/app": "^1.0.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.10.0",
|
||||
"eslint-loader": "^2.1.1",
|
||||
"eslint-plugin-vue": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0",
|
||||
"npm": ">= 5.6.0",
|
||||
"yarn": ">= 1.6.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 1 version, not dead, ie >= 11"
|
||||
]
|
||||
}
|
||||
182
example/client/quasar.conf.js
Normal file
182
example/client/quasar.conf.js
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
// Configuration for your app
|
||||
// https://quasar.dev/quasar-cli/quasar-conf-js
|
||||
|
||||
module.exports = function (ctx) {
|
||||
return {
|
||||
// app boot file (/src/boot)
|
||||
// --> boot files are part of "main.js"
|
||||
// boot used to be plugins
|
||||
boot: ['socket'], // uci-consumer-client websocket
|
||||
css: [
|
||||
'app.styl'
|
||||
],
|
||||
|
||||
extras: [
|
||||
// 'ionicons-v4',
|
||||
// 'mdi-v3',
|
||||
// 'fontawesome-v5',
|
||||
// 'eva-icons',
|
||||
// 'themify',
|
||||
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
|
||||
// 'roboto-font', // optional, you are not bound to it
|
||||
'material-icons' // optional, you are not bound to it
|
||||
],
|
||||
|
||||
framework: {
|
||||
// iconSet: 'ionicons-v4',
|
||||
// lang: 'de', // Quasar language
|
||||
|
||||
// all: true, // --- includes everything; for dev only!
|
||||
|
||||
components: [
|
||||
'QLayout',
|
||||
'QHeader',
|
||||
'QDrawer',
|
||||
'QPageContainer',
|
||||
'QPage',
|
||||
'QToolbar',
|
||||
'QToolbarTitle',
|
||||
'QBtn',
|
||||
'QIcon',
|
||||
'QList',
|
||||
'QItem',
|
||||
'QItemSection',
|
||||
'QItemLabel',
|
||||
'QInput',
|
||||
'QSelect',
|
||||
'QField',
|
||||
'QFooter',
|
||||
'QTooltip'
|
||||
],
|
||||
|
||||
directives: [
|
||||
'Ripple'
|
||||
],
|
||||
|
||||
// Quasar plugins
|
||||
plugins: [
|
||||
'Notify'
|
||||
]
|
||||
},
|
||||
|
||||
supportIE: false,
|
||||
|
||||
build: {
|
||||
// added to support communication with websocket and backend database
|
||||
env: ctx.dev
|
||||
// pass environment variable to browser client
|
||||
? { // so on dev we'll have
|
||||
DBURL: JSON.stringify(process.env.DBURL || 'ws://localhost:3030'),
|
||||
WSS: JSON.stringify(process.env.WSS || 'ws://localhost:8090')
|
||||
}
|
||||
: { // and on build (production):
|
||||
DBURL: JSON.stringify(process.env.DBURL || 'ws://switches.kebler.net:3030'),
|
||||
WSS: JSON.stringify(process.env.WSS || 'ws://relays.kebler.net:8090')
|
||||
},
|
||||
scopeHoisting: true,
|
||||
vueRouterMode: 'history',
|
||||
// vueCompiler: true,
|
||||
// gzip: true,
|
||||
// analyze: true,
|
||||
// extractCSS: false,
|
||||
extendWebpack (cfg) {
|
||||
cfg.module.rules.push({
|
||||
enforce: 'pre',
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
formatter: require('eslint').CLIEngine.getFormatter('stylish')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
devServer: {
|
||||
// https: true,
|
||||
// port: 8080,
|
||||
open: true // opens browser window automatically
|
||||
},
|
||||
|
||||
// animations: 'all', // --- includes all animations
|
||||
animations: [],
|
||||
|
||||
ssr: {
|
||||
pwa: false
|
||||
},
|
||||
|
||||
pwa: {
|
||||
// workboxPluginMode: 'InjectManifest',
|
||||
// workboxOptions: {}, // only for NON InjectManifest
|
||||
manifest: {
|
||||
// name: 'Quasar App',
|
||||
// short_name: 'Quasar App',
|
||||
// description: 'a test websocket client for uci websocket server',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#ffffff',
|
||||
theme_color: '#027be3',
|
||||
icons: [
|
||||
{
|
||||
'src': 'statics/icons/icon-128x128.png',
|
||||
'sizes': '128x128',
|
||||
'type': 'image/png'
|
||||
},
|
||||
{
|
||||
'src': 'statics/icons/icon-192x192.png',
|
||||
'sizes': '192x192',
|
||||
'type': 'image/png'
|
||||
},
|
||||
{
|
||||
'src': 'statics/icons/icon-256x256.png',
|
||||
'sizes': '256x256',
|
||||
'type': 'image/png'
|
||||
},
|
||||
{
|
||||
'src': 'statics/icons/icon-384x384.png',
|
||||
'sizes': '384x384',
|
||||
'type': 'image/png'
|
||||
},
|
||||
{
|
||||
'src': 'statics/icons/icon-512x512.png',
|
||||
'sizes': '512x512',
|
||||
'type': 'image/png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
cordova: {
|
||||
// id: 'org.cordova.quasar.app',
|
||||
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
|
||||
},
|
||||
|
||||
electron: {
|
||||
// bundler: 'builder', // or 'packager'
|
||||
|
||||
extendWebpack (cfg) {
|
||||
// do something with Electron main process Webpack cfg
|
||||
// chainWebpack also available besides this extendWebpack
|
||||
},
|
||||
|
||||
packager: {
|
||||
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
|
||||
|
||||
// OS X / Mac App Store
|
||||
// appBundleId: '',
|
||||
// appCategoryType: '',
|
||||
// osxSign: '',
|
||||
// protocol: 'myapp://path',
|
||||
|
||||
// Windows only
|
||||
// win32metadata: { ... }
|
||||
},
|
||||
|
||||
builder: {
|
||||
// https://www.electron.build/configuration/configuration
|
||||
|
||||
// appId: 'test-client-new'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
// import WebSocket from '@uci/websocket-client'
|
||||
import WebSocket from '../../../src'
|
||||
import WebSocket from '../../../../src'
|
||||
|
||||
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')
|
||||
|
||||
22
example/client/src/css/app.styl
Normal file
22
example/client/src/css/app.styl
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// app global css
|
||||
.q-page-container
|
||||
background $accent
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.q-page
|
||||
width 80%
|
||||
.q-field
|
||||
padding 0
|
||||
.q-input
|
||||
.q-select
|
||||
background white
|
||||
padding 0 .2em
|
||||
margin .2em
|
||||
.response
|
||||
.q-textarea
|
||||
.q-input
|
||||
background $secondary
|
||||
padding 0 1em
|
||||
.q-item
|
||||
padding 0
|
||||
margin 0
|
||||
21
example/client/src/css/quasar.variables.styl
Normal file
21
example/client/src/css/quasar.variables.styl
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
// Quasar Stylus Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Stylus variables found in Quasar's source Stylus files.
|
||||
|
||||
// Check documentation for full list of Quasar variables
|
||||
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
// https://quasar.dev/style/theme-builder
|
||||
|
||||
|
||||
$primary = #006cd6
|
||||
$secondary = #26A69A
|
||||
$accent = #278eb0
|
||||
|
||||
$positive = #21BA45
|
||||
$negative = #C10015
|
||||
$info = #31CCEC
|
||||
$warning = #F2C037
|
||||
|
|
@ -1,25 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<title><%= htmlWebpackPlugin.options.productName %></title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
|
||||
<title><%= htmlWebpackPlugin.options.productName %></title>
|
||||
|
||||
<link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
This is your fallback content in case JavaScript fails to load.
|
||||
</noscript>
|
||||
|
||||
<!-- DO NOT touch the following <div> -->
|
||||
<!-- DO NOT touch the following DIV -->
|
||||
<div id="q-app"></div>
|
||||
|
||||
<!-- built files will be auto injected here -->
|
||||
</body>
|
||||
</html>
|
||||
110
example/client/src/layouts/MyLayout.vue
Normal file
110
example/client/src/layouts/MyLayout.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-header elevated>
|
||||
<q-toolbar>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<q-icon name="menu" />
|
||||
</q-btn>
|
||||
|
||||
<q-toolbar-title>
|
||||
Quasar App
|
||||
</q-toolbar-title>
|
||||
|
||||
<div>Quasar v{{ $q.version }}</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<q-drawer
|
||||
v-model="leftDrawerOpen"
|
||||
bordered
|
||||
content-class="bg-grey-2"
|
||||
>
|
||||
<q-list>
|
||||
<q-item-label header>Essential Links</q-item-label>
|
||||
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="school" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Docs</q-item-label>
|
||||
<q-item-label caption>quasar.dev</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable tag="a" target="_blank" href="https://github.quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="code" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Github</q-item-label>
|
||||
<q-item-label caption>github.com/quasarframework</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="chat" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Discord Chat Channel</q-item-label>
|
||||
<q-item-label caption>chat.quasar.dev</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="record_voice_over" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Forum</q-item-label>
|
||||
<q-item-label caption>forum.quasar.dev</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable tag="a" target="_blank" href="https://twitter.quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="rss_feed" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Twitter</q-item-label>
|
||||
<q-item-label caption>@quasarframework</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable tag="a" target="_blank" href="https://facebook.quasar.dev">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="public" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Facebook</q-item-label>
|
||||
<q-item-label caption>@QuasarFramework</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { openURL } from 'quasar'
|
||||
|
||||
export default {
|
||||
name: 'MyLayout',
|
||||
data () {
|
||||
return {
|
||||
leftDrawerOpen: this.$q.platform.is.desktop
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openURL
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
38
example/client/src/layouts/default.vue
Normal file
38
example/client/src/layouts/default.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<q-layout view="hHh lpR fFf">
|
||||
|
||||
<q-header elevated class="bg-primary text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
Title
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<q-page-container>
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
|
||||
<q-footer elevated class="bg-grey-8 text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
Title
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
</q-footer>
|
||||
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
</style>
|
||||
|
|
@ -14,3 +14,9 @@
|
|||
>Go back</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Error404'
|
||||
}
|
||||
</script>
|
||||
148
example/client/src/pages/Index.vue
Normal file
148
example/client/src/pages/Index.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
|
||||
<q-page padding class="" >
|
||||
<q-list class="">
|
||||
<q-item class="">
|
||||
<q-item-section side>
|
||||
<q-btn color="secondary" round @click="send" icon="send">
|
||||
<q-tooltip>
|
||||
Click to send this command and payload to the sever
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
<q-item-section >
|
||||
<q-item-label>Command</q-item-label>
|
||||
<!-- <q-input label="Enter a . delimited command to send to server" v-model="cmd" />
|
||||
-->
|
||||
<q-select
|
||||
v-model="cmd"
|
||||
:options="commands"
|
||||
label="Choose An Available Command to Send"
|
||||
emit-value
|
||||
></q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item><div class="col">Property</div>:<div class="col">Value</div></q-item>
|
||||
<q-item><q-input class="col" readonly v-model="key[0]" />:<q-input dense class="col" v-model="value[0]" /></q-item>
|
||||
<q-item><q-input class="col" readonly v-model="key[1]" />:<q-input class="col" v-model="value[1]" /></q-item>
|
||||
<q-item><q-input class="col" label="a custom property in payload" v-model="key[2]" />:<q-input class="col" v-model="value[2]" /></q-item>
|
||||
</q-list>
|
||||
<!-- <q-btn :class="switches[0]" @click="toggle(1)">Switch 1</q-btn>
|
||||
<q-btn :class="switches[1]" @click="toggle(2)">Switch 2</q-btn>
|
||||
<q-btn :class="switches[2]" @click="toggle(3)">Switch 3</q-btn>
|
||||
<q-btn :class="switches[3]" @click="toggle(4)">Switch 4</q-btn> -->
|
||||
<q-list class="response">
|
||||
<q-input v-model="packet" readonly label="Sending Packet:" />
|
||||
<q-input v-model="resMsg" readonly label="Socket/Server Response Message:" />
|
||||
<q-input v-model="resPayload" readonly label="Socket/Server Response Payload:" />
|
||||
<q-input v-model="pushed" readonly type="textarea" label="Pushed from Socket/Server:" />
|
||||
</q-list>
|
||||
</q-page>
|
||||
</template>
|
||||
<script>
|
||||
import btc from 'better-try-catch'
|
||||
// import socket from '../socket.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cmd: 'on',
|
||||
commands: [
|
||||
{
|
||||
label: 'echo',
|
||||
value: 'echo',
|
||||
description: 'echo',
|
||||
icon: 'no'
|
||||
},
|
||||
{
|
||||
label: 'on',
|
||||
value: 'on',
|
||||
description: 'turn on something',
|
||||
icon: 'mdi:lightbulb'
|
||||
},
|
||||
{
|
||||
label: 'off',
|
||||
value: 'off',
|
||||
description: 'turn off something',
|
||||
icon: 'lightbulb-off'
|
||||
},
|
||||
{
|
||||
label: 'bogus',
|
||||
value: 'bogus',
|
||||
description: 'turn off something',
|
||||
icon: 'no'
|
||||
}
|
||||
],
|
||||
packet: '',
|
||||
resMsg: '',
|
||||
resPayload: '',
|
||||
key: ['id', 'brightness'],
|
||||
value: ['not set', 0],
|
||||
pushed: '',
|
||||
switches: ['off', 'off', 'off', 'off']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async send () {
|
||||
this.clear()
|
||||
let packet = {
|
||||
cmd: this.cmd,
|
||||
[this.key[0]]: this.value[0],
|
||||
[this.key[1]]: this.value[1],
|
||||
[this.key[2]]: this.value[2]
|
||||
}
|
||||
this.packet = JSON.stringify(packet)
|
||||
let [err, res] = await btc(this.$socket.send)(packet)
|
||||
if (err) {
|
||||
console.log('error ', err)
|
||||
this.$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Error in repsonse of packet send'
|
||||
})
|
||||
} else {
|
||||
delete res._header
|
||||
this.resMsg = res.msg
|
||||
this.resPayload = JSON.stringify(res.payload)
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.pushed = ''
|
||||
this.resMsg = ''
|
||||
this.resPayload = ''
|
||||
this.packet = ''
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$q.notify({
|
||||
color: 'info',
|
||||
message: `Client connecting to', ${this.$socket.url}`
|
||||
})
|
||||
let [err] = await btc(this.$socket.connect)()
|
||||
if (err) {
|
||||
this.$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Websocket Server Not Available'
|
||||
})
|
||||
} else {
|
||||
this.$q.notify({ color: 'positive', message: 'Ready' })
|
||||
this.$socket.listen()
|
||||
this.clear()
|
||||
}
|
||||
this.$socket.on('pushed', packet => {
|
||||
delete packet._header
|
||||
this.pushed = JSON.stringify(packet)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
.on
|
||||
background $positive
|
||||
|
||||
.off
|
||||
background grey
|
||||
|
||||
</style>
|
||||
14
example/client/src/pages/Index.vue.org
Normal file
14
example/client/src/pages/Index.vue.org
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PageIndex'
|
||||
}
|
||||
</script>
|
||||
26
example/client/src/router/index.js
Normal file
26
example/client/src/router/index.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import routes from './routes'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
/*
|
||||
* If not building with SSR mode, you can
|
||||
* directly export the Router instantiation
|
||||
*/
|
||||
|
||||
export default function (/* { store, ssrContext } */) {
|
||||
const Router = new VueRouter({
|
||||
scrollBehavior: () => ({ x: 0, y: 0 }),
|
||||
routes,
|
||||
|
||||
// Leave these as is and change from quasar.conf.js instead!
|
||||
// quasar.conf.js -> build -> vueRouterMode
|
||||
// quasar.conf.js -> build -> publicPath
|
||||
mode: process.env.VUE_ROUTER_MODE,
|
||||
base: process.env.VUE_ROUTER_BASE
|
||||
})
|
||||
|
||||
return Router
|
||||
}
|
||||
20
example/client/src/router/routes.js
Normal file
20
example/client/src/router/routes.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/default.vue'),
|
||||
children: [
|
||||
{ path: '', component: () => import('pages/Index.vue') }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// Always leave this as last one
|
||||
if (process.env.MODE !== 'ssr') {
|
||||
routes.push({
|
||||
path: '*',
|
||||
component: () => import('pages/Error404.vue')
|
||||
})
|
||||
}
|
||||
|
||||
export default routes
|
||||
BIN
example/client/src/statics/app-logo-128x128.png
Normal file
BIN
example/client/src/statics/app-logo-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9 KiB |
BIN
example/client/src/statics/icons/apple-icon-120x120.png
Normal file
BIN
example/client/src/statics/icons/apple-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
example/client/src/statics/icons/apple-icon-152x152.png
Normal file
BIN
example/client/src/statics/icons/apple-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
example/client/src/statics/icons/apple-icon-167x167.png
Normal file
BIN
example/client/src/statics/icons/apple-icon-167x167.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
example/client/src/statics/icons/apple-icon-180x180.png
Normal file
BIN
example/client/src/statics/icons/apple-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
example/client/src/statics/icons/favicon-16x16.png
Normal file
BIN
example/client/src/statics/icons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
BIN
example/client/src/statics/icons/favicon-32x32.png
Normal file
BIN
example/client/src/statics/icons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
example/client/src/statics/icons/favicon-96x96.png
Normal file
BIN
example/client/src/statics/icons/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
example/client/src/statics/icons/favicon.ico
Normal file
BIN
example/client/src/statics/icons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
example/client/src/statics/icons/icon-128x128.png
Normal file
BIN
example/client/src/statics/icons/icon-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9 KiB |
BIN
example/client/src/statics/icons/icon-192x192.png
Normal file
BIN
example/client/src/statics/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
example/client/src/statics/icons/icon-256x256.png
Normal file
BIN
example/client/src/statics/icons/icon-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
example/client/src/statics/icons/icon-384x384.png
Normal file
BIN
example/client/src/statics/icons/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
example/client/src/statics/icons/icon-512x512.png
Normal file
BIN
example/client/src/statics/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
example/client/src/statics/icons/ms-icon-144x144.png
Normal file
BIN
example/client/src/statics/icons/ms-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
1
example/client/src/statics/icons/safari-pinned-tab.svg
Normal file
1
example/client/src/statics/icons/safari-pinned-tab.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1240" height="1240"><path d="M585.5 119.157c-24.392 1.775-55.454 6.582-80.743 12.495l-10.743 2.512-.257 65.522-.257 65.523-12.5 4.911c-24.453 9.608-54.301 25.574-75.692 40.488-14.402 10.041-29.52 22.393-29.025 23.713.243.648 1.692 5.443 3.22 10.655 11.868 40.48 32.267 84.639 55.173 119.442l8.503 12.917 6.683-12.417c23.502-43.672 46.807-74.722 84.066-112.002 25.738-25.754 47.825-44.173 78.072-65.109 33.386-23.108 77-46.934 117.761-64.332l16.261-6.94-.261-40.974-.261-40.973-4.5-1.319c-8.958-2.625-43.862-9.169-59.5-11.155-31.749-4.032-66.513-5.102-96-2.957M734.906 277.25c-22.472 24.627-42.334 51.05-58.443 77.75-5.099 8.45-21.464 39.014-21.462 40.083 0 .229 14.287.445 31.75.479 33.627.065 45.612 1.017 75.303 5.978 85.759 14.331 172.63 53.33 254.813 114.394l15.221 11.31 25.706-14.808c14.138-8.144 30.112-17.312 35.497-20.372l9.79-5.564-.61-3.5c-1.096-6.29-14.149-44.185-19.977-58-17.139-40.622-35.248-72.077-61.599-107-11.686-15.488-30.818-37.844-39.039-45.62l-4.356-4.119-55 31.858c-30.25 17.522-55.747 32.106-56.66 32.408-1.079.358-4.75-1.93-10.5-6.543-20.084-16.116-40.545-29.274-64.607-41.547C777.601 277.739 748.585 265 746.461 265c-.207 0-5.407 5.512-11.555 12.25m-483.911 2.889c-52.729 57.452-89.592 121.745-111.254 194.044l-3.501 11.683 56.707 32.735 56.706 32.734-1.326 7.583c-4.069 23.272-5.894 57.248-4.381 81.582.926 14.898 4.591 46.254 5.526 47.28.898.986 34.289 8.122 48.028 10.264 28.958 4.515 64.488 6.499 90.867 5.074 10.377-.56 19.07-1.222 19.319-1.471.248-.248-2.035-4.306-5.074-9.017-37.96-58.843-62.879-131.564-72.005-210.13-3.219-27.711-3.869-43.866-3.307-82.149.534-36.338 1.631-53.441 5.12-79.832.798-6.039 1.368-11.04 1.266-11.112-.102-.073-15.261-8.815-33.686-19.427-18.425-10.613-34.464-19.919-35.642-20.682-2.027-1.312-2.739-.735-13.363 10.841M606.5 522.653c-25.669 4.073-49.712 18.357-64.437 38.283-12.956 17.531-18.769 33.768-19.713 55.064-1.087 24.502 5.901 45.6 21.676 65.452 13.091 16.473 32.315 28.634 53.974 34.141 10.222 2.599 34.507 2.629 44 .054 24.469-6.637 42.328-18.418 56.253-37.107 8.576-11.511 13.261-21.347 17.403-36.54 2.782-10.202 2.502-34.762-.523-46-4.654-17.286-13.403-32.422-26.057-45.076-18.639-18.639-40.322-27.911-66.576-28.47-7.15-.152-14.35-.062-16 .199m243.676 14.396c-9.529.421-17.487.928-17.685 1.126-.198.198 3.43 6.427 8.061 13.843 9.872 15.805 25.076 45.255 32.515 62.982 17.89 42.628 30.726 92.267 36.33 140.5 5.776 49.707 5.41 110.661-.955 158.936-.793 6.015-1.442 12.144-1.442 13.62 0 2.476 2.712 4.248 35.027 22.888 19.264 11.113 35.44 20.059 35.946 19.88.506-.178 5.205-4.957 10.444-10.619 40.968-44.285 71.417-91.321 94.113-145.385 7.518-17.906 21.003-57.989 20.208-60.062-.302-.785-25.229-15.681-55.393-33.103-30.165-17.421-55.37-32.011-56.011-32.422-.843-.54-.908-2.132-.233-5.74 6.158-32.924 6.854-78.418 1.771-115.688l-2.141-15.695-10.616-2.49c-29.261-6.862-56.983-10.974-81.615-12.105-25.026-1.149-31.483-1.212-48.324-.466M173.193 732.877c-18.869 10.91-34.771 20.301-35.338 20.868-.708.708.416 5.685 3.59 15.893 22.372 71.955 57.534 133.26 108.468 189.112 6.144 6.737 11.715 12.235 12.379 12.217.665-.019 26.402-14.607 57.195-32.419l55.987-32.386 5.013 4.231c28.719 24.239 69.849 48.122 106.705 61.961l6.691 2.512 11.972-13.183c14.282-15.727 20.74-23.512 31.675-38.183 15.78-21.171 34.174-51.134 42.972-70l4.197-9-32.6-.072c-33.662-.073-44.236-.877-72.599-5.517-52.086-8.52-104.017-26.026-157-52.926-34.47-17.5-69.941-39.589-100.682-62.699-7.525-5.657-13.825-10.277-14-10.266-.175.011-15.756 8.946-34.625 19.857M791.52 772.25c-22.058 42.207-48.977 78.371-85.449 114.795-38.124 38.072-77.236 67.416-127.546 95.69-17.969 10.099-51.743 26.686-70.775 34.76l-13.75 5.834v82.327l13.75 3.194c23.233 5.395 43.059 8.689 68.25 11.336 16.09 1.691 73.361 1.705 89 .021 25.772-2.774 47.439-6.375 68.25-11.344l12.75-3.045V974.95l2.75-1.001c20.982-7.643 52.157-22.755 69.847-33.859 18.882-11.852 45.274-31.559 45.357-33.868.102-2.831-15.119-46.644-20.841-59.99-7.171-16.726-16.651-35.878-24.655-49.808-6.712-11.68-20.708-33.401-21.531-33.415-.315-.005-2.748 4.154-5.407 9.241" fill="#42a5f5" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
36
example/server.js
Normal file
36
example/server.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import Socket from '@uci/websocket'
|
||||
|
||||
// ws server to example ws client
|
||||
|
||||
async function packetProcess (packet) {
|
||||
return new Promise(resolve => {
|
||||
let res = {}
|
||||
switch (packet.cmd) {
|
||||
case 'echo':
|
||||
res.msg = 'Echoing Back any payload propery'
|
||||
res.payload = packet.payload
|
||||
this.push({msg:'pushing echo to to any clients also', res:res})
|
||||
break
|
||||
case 'on':
|
||||
case 'off':
|
||||
res.msg = `Command turn ${packet.cmd} was sent for light id: ${packet.id ||'none!'} of brightness: ${packet.brightness || 0}`
|
||||
res.payload = {switch:packet.cmd}
|
||||
this.push(res)
|
||||
break
|
||||
default:
|
||||
res.msg = `command ${packet.cmd} was unknown at server echo payload back`
|
||||
res.payload = {}
|
||||
}
|
||||
|
||||
resolve(res)
|
||||
})
|
||||
}
|
||||
|
||||
// let test = new Test()
|
||||
let test = new Socket({ port: 8090, clientTracking: true })
|
||||
test.registerPacketProcessor(packetProcess)
|
||||
;(async () => {
|
||||
console.log(await test.create())
|
||||
})().catch(err => {
|
||||
console.error('FATAL: UNABLE TO START SYSTEM!\n', err)
|
||||
})
|
||||
14
package.json
14
package.json
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"name": "@uci/websocket-client",
|
||||
"version": "0.1.6",
|
||||
"version": "0.1.7",
|
||||
"description": "JSON packet browser client over web socket",
|
||||
"main": "src",
|
||||
"scripts": {
|
||||
"cd": "cd test-client && quasar dev"
|
||||
"example": "cd ./example/client && npm run tc",
|
||||
"example:server": "node -r esm ./example/server.js"
|
||||
},
|
||||
"author": "David Kebler",
|
||||
"license": "MIT",
|
||||
|
|
@ -26,11 +27,14 @@
|
|||
"url": "https://github.com/uCOMmandIt/websocket-client/issues"
|
||||
},
|
||||
"homepage": "https://github.com/uCOMmandIt/websocket-client#readme",
|
||||
"devDependencies": {},
|
||||
"devDependencies": {
|
||||
"@uci/websocket": "^0.3.7",
|
||||
"esm": "^3.2.25"
|
||||
},
|
||||
"dependencies": {
|
||||
"auto-bind": "^2.0.0",
|
||||
"auto-bind": "^2.1.0",
|
||||
"await-to-js": "^2.1.1",
|
||||
"better-try-catch": "^0.6.2",
|
||||
"eventemitter3": "^3.1.0"
|
||||
"eventemitter3": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env", {
|
||||
"modules": false,
|
||||
"loose": false,
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
],
|
||||
[
|
||||
"@babel/preset-stage-2", {
|
||||
"modules": false,
|
||||
"loose": false,
|
||||
"useBuiltIns": true,
|
||||
"decoratorsLegacy": true
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"@babel/transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": false
|
||||
}
|
||||
]
|
||||
],
|
||||
"comments": false
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true
|
||||
},
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'standard'
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: ['vue'],
|
||||
globals: {
|
||||
ga: true, // Google Analytics
|
||||
cordova: true,
|
||||
__statics: true
|
||||
},
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
'space-before-function-paren': ['error', 'always'],
|
||||
// allow paren-less arrow functions
|
||||
'arrow-parens': 0,
|
||||
'one-var': 0,
|
||||
'import/first': 0,
|
||||
'import/named': 2,
|
||||
'import/namespace': 2,
|
||||
'import/default': 2,
|
||||
'import/export': 2,
|
||||
'import/extensions': 0,
|
||||
'import/no-unresolved': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# Quasar App
|
||||
|
||||
> WIP
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
{
|
||||
"name": "client",
|
||||
"version": "1.0.0",
|
||||
"description": "simple web socket client tester",
|
||||
"productName": "client",
|
||||
"cordovaId": "org.cordova.quasar.app",
|
||||
"author": "David Kebler <d@kebler.net>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"tcw": "WSS='ws://pine64.kebler.net:8090' quasar dev",
|
||||
"tc": "quasar dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@uci/websocket-client": "^0.1.4",
|
||||
"axios": "^0.18.0",
|
||||
"better-try-catch": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^8.2.1",
|
||||
"eslint": "^4.18.2",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-friendly-formatter": "^4.0.1",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-import": "^2.9.0",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eslint-plugin-vue": "^4.3.0",
|
||||
"quasar-cli": "^0.17.22",
|
||||
"strip-ansi": "=3.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0",
|
||||
"npm": ">= 5.6.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 10"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
// Configuration for your app
|
||||
|
||||
module.exports = function (ctx) {
|
||||
return {
|
||||
// app plugins (/src/plugins)
|
||||
plugins: ['socket'],
|
||||
css: ['app.styl'],
|
||||
extras: [
|
||||
ctx.theme.mat ? 'roboto-font' : null,
|
||||
'material-icons',
|
||||
ctx.theme.ios ? 'ionicons' : null
|
||||
// 'mdi',
|
||||
// 'fontawesome'
|
||||
],
|
||||
supportIE: false,
|
||||
build: {
|
||||
env: ctx.dev
|
||||
// pass environment variable to browser client
|
||||
? { // so on dev we'll have
|
||||
DBURL: JSON.stringify(process.env.DBURL),
|
||||
// DBURL: JSON.stringify('ws://192.168.0.231:3030'),
|
||||
WSS: JSON.stringify(process.env.WSS)
|
||||
}
|
||||
: { // and on build (production):
|
||||
DBURL: JSON.stringify('ws://192.168.0.231:3030'),
|
||||
WSS: JSON.stringify('ws://relays2.kebler.net:8090')
|
||||
},
|
||||
scopeHoisting: true,
|
||||
vueRouterMode: 'history',
|
||||
// vueCompiler: true,
|
||||
// gzip: true,
|
||||
// analyze: true,
|
||||
// extractCSS: false,
|
||||
extendWebpack (cfg) {
|
||||
cfg.module.rules.push({
|
||||
enforce: 'pre',
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
exclude: /(node_modules|quasar)/
|
||||
})
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
// https: true,
|
||||
// port: 8080,
|
||||
open: true // opens browser window automatically
|
||||
},
|
||||
// framework: 'all' --- includes everything; for dev only!
|
||||
framework: {
|
||||
components: [
|
||||
'QLayout',
|
||||
'QLayoutHeader',
|
||||
'QLayoutDrawer',
|
||||
'QPageContainer',
|
||||
'QPage',
|
||||
'QToolbar',
|
||||
'QToolbarTitle',
|
||||
'QBtn',
|
||||
'QIcon',
|
||||
'QList',
|
||||
'QListHeader',
|
||||
'QItem',
|
||||
'QItemMain',
|
||||
'QItemSide',
|
||||
'QInput',
|
||||
'QField'
|
||||
],
|
||||
directives: ['Ripple'],
|
||||
// Quasar plugins
|
||||
plugins: ['Notify'],
|
||||
iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons'
|
||||
},
|
||||
// animations: 'all' --- includes all animations
|
||||
animations: [],
|
||||
pwa: {
|
||||
// workboxPluginMode: 'InjectManifest',
|
||||
// workboxOptions: {},
|
||||
manifest: {
|
||||
// name: 'Quasar App',
|
||||
// short_name: 'Quasar-PWA',
|
||||
// description: 'Best PWA App in town!',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#ffffff',
|
||||
theme_color: '#027be3',
|
||||
icons: [
|
||||
{
|
||||
src: 'statics/icons/icon-128x128.png',
|
||||
sizes: '128x128',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'statics/icons/icon-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'statics/icons/icon-256x256.png',
|
||||
sizes: '256x256',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'statics/icons/icon-384x384.png',
|
||||
sizes: '384x384',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: 'statics/icons/icon-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
cordova: {
|
||||
// id: 'org.cordova.quasar.app'
|
||||
},
|
||||
electron: {
|
||||
// bundler: 'builder', // or 'packager'
|
||||
extendWebpack (cfg) {
|
||||
// do something with Electron process Webpack cfg
|
||||
},
|
||||
packager: {
|
||||
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
|
||||
// OS X / Mac App Store
|
||||
// appBundleId: '',
|
||||
// appCategoryType: '',
|
||||
// osxSign: '',
|
||||
// protocol: 'myapp://path',
|
||||
// Window only
|
||||
// win32metadata: { ... }
|
||||
},
|
||||
builder: {
|
||||
// https://www.electron.build/configuration/configuration
|
||||
// appId: 'quasar-app'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
// app global css
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Stylus variables found in Quasar's source Stylus files. Setting
|
||||
// variables before Quasar's Stylus will use these variables rather than
|
||||
// Quasar's default Stylus variable values. Stylus variables specific
|
||||
// to the themes belong in either the variables.ios.styl or variables.mat.styl files.
|
||||
|
||||
// Check documentation for full list of Quasar variables
|
||||
|
||||
|
||||
// App Shared Color Variables
|
||||
// --------------------------------------------------
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding.
|
||||
|
||||
$primary = #027be3
|
||||
$secondary = #26A69A
|
||||
$tertiary = #555
|
||||
|
||||
$neutral = #E0E1E2
|
||||
$positive = #21BA45
|
||||
$negative = #DB2828
|
||||
$info = #31CCEC
|
||||
$warning = #F2C037
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// Shared Stylus variables go in the common.variables.styl file
|
||||
@import 'common.variables'
|
||||
|
||||
// iOS only Quasar variables overwrites
|
||||
// -----------------------------------------
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// App Shared Variables
|
||||
// --------------------------------------------------
|
||||
// Shared Stylus variables go in the common.variables.styl file
|
||||
@import 'common.variables'
|
||||
|
||||
// Material only Quasar variables overwrites
|
||||
// -----------------------------------------
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-layout-header>
|
||||
<q-toolbar
|
||||
color="primary"
|
||||
:glossy="$q.theme === 'mat'"
|
||||
:inverted="$q.theme === 'ios'"
|
||||
>
|
||||
<q-toolbar-title>
|
||||
UCI Web Socket
|
||||
<div slot="subtitle">web socket tester</div>
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
</q-layout-header>
|
||||
<q-page-container>
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { openURL } from 'quasar'
|
||||
|
||||
export default {
|
||||
name: 'LayoutDefault',
|
||||
data () {
|
||||
return {
|
||||
leftDrawerOpen: this.$q.platform.is.desktop
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openURL
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<template>
|
||||
|
||||
<q-page padding class="" >
|
||||
<q-list class="">
|
||||
<q-field
|
||||
label="Command"
|
||||
orientation="vertical"
|
||||
>
|
||||
<q-item><q-input inverted color="secondary" v-model="cmd" /><q-btn class="row" color="green-8" round @click="send" icon="send" /></q-item>
|
||||
</q-field>
|
||||
<q-field class=""
|
||||
label="Payload"
|
||||
orientation="vertical"
|
||||
>
|
||||
<q-item><div class="col">Key</div>:<div class="col">Value</div></q-item>
|
||||
<q-item><q-input class="col" inverted color="secondary" v-model="key[0]" />:<q-input class="col" inverted color="secondary" v-model="value[0]" /></q-item>
|
||||
<q-item><q-input class="col" inverted color="secondary" v-model="key[1]" />:<q-input class="col" inverted color="secondary" v-model="value[1]" /></q-item>
|
||||
<q-item><q-input class="col" inverted color="secondary" v-model="key[2]" />:<q-input class="col" inverted color="secondary" v-model="value[2]" /></q-item>
|
||||
</q-field>
|
||||
</q-list>
|
||||
<q-btn :class="switches[0]" @click="toggle(1)">Switch 1</q-btn>
|
||||
<q-btn :class="switches[1]" @click="toggle(2)">Switch 2</q-btn>
|
||||
<q-btn :class="switches[2]" @click="toggle(3)">Switch 3</q-btn>
|
||||
<q-btn :class="switches[3]" @click="toggle(4)">Switch 4</q-btn>
|
||||
<q-input class="row" rows="2" v-model="packet" readonly inverted type="textarea" float-label="Sending Packet:" />
|
||||
<q-input class="row" rows="2" v-model="response" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response:" />
|
||||
<q-input class="row" rows="2" v-model="respayload" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response Payload:" />
|
||||
<q-input class="row" rows="2" v-model="pushed" readonly inverted color="tertiary" type="textarea" float-label="Pushed from Socket/Server:" />
|
||||
</q-page>
|
||||
</template>
|
||||
<script>
|
||||
import btc from 'better-try-catch'
|
||||
// import socket from '../socket.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cmd: '',
|
||||
packet: '',
|
||||
response: '',
|
||||
respayload: {},
|
||||
key: [],
|
||||
value: [],
|
||||
pushed: '',
|
||||
switches: ['off', 'off', 'off', 'off']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async send () {
|
||||
let packet = {
|
||||
cmd: this.cmd,
|
||||
[this.key[0]]: this.value[0],
|
||||
[this.key[1]]: this.value[1],
|
||||
[this.key[2]]: this.value[2]
|
||||
}
|
||||
this.packet = JSON.stringify(packet)
|
||||
let [err, res] = await btc(this.$socket.send)(packet)
|
||||
if (err) console.log('error ', err)
|
||||
else {
|
||||
delete res._header
|
||||
this.response = res.log
|
||||
delete res.Response
|
||||
this.packet_process(res)
|
||||
this.respayload = JSON.stringify(res)
|
||||
}
|
||||
},
|
||||
setcolor (id) {
|
||||
return this.switches[id]
|
||||
},
|
||||
packet_process (packet) {
|
||||
if (packet.cmd === 'switch/status') {
|
||||
this.switches[packet.id - 1] = packet.status
|
||||
this.pushed = ''
|
||||
}
|
||||
},
|
||||
async toggle (id) {
|
||||
let packet = {
|
||||
cmd: 'switch/toggle',
|
||||
id: id,
|
||||
status: this.switches[id - 1]
|
||||
}
|
||||
this.packet = JSON.stringify(packet)
|
||||
let [err, res] = await btc(this.$socket.send)(packet)
|
||||
if (err) console.log('error ', err)
|
||||
else {
|
||||
delete res._header
|
||||
this.response = JSON.stringify(res)
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
console.log('mounting')
|
||||
this.$q.notify({
|
||||
type: 'info',
|
||||
message: `Client connecting to', ${this.$socket.url}`
|
||||
})
|
||||
let [err] = await btc(this.$socket.connect)()
|
||||
if (err) {
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Websocket Server Not Available'
|
||||
})
|
||||
} else {
|
||||
this.$q.notify({ type: 'positive', message: 'Ready' })
|
||||
this.$socket.listen()
|
||||
}
|
||||
this.$socket.on('pushed', packet => {
|
||||
delete packet._header
|
||||
this.packet_process(packet)
|
||||
this.pushed = JSON.stringify(packet)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~variables'
|
||||
|
||||
.on
|
||||
background $positive
|
||||
|
||||
.off
|
||||
background grey
|
||||
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import routes from './routes'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const Router = new VueRouter({
|
||||
/*
|
||||
* NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
|
||||
*
|
||||
* When going with "history" mode, please also make sure "build.publicPath"
|
||||
* is set to something other than an empty string.
|
||||
* Example: '/' instead of ''
|
||||
*/
|
||||
|
||||
// Leave as is and change from quasar.conf.js instead!
|
||||
mode: process.env.VUE_ROUTER_MODE,
|
||||
base: process.env.VUE_ROUTER_BASE,
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes
|
||||
})
|
||||
|
||||
export default Router
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
|
||||
export default [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/default'),
|
||||
children: [
|
||||
{ path: '', component: () => import('pages/index') }
|
||||
]
|
||||
},
|
||||
|
||||
{ // Always leave this as last one
|
||||
path: '*',
|
||||
component: () => import('pages/404')
|
||||
}
|
||||
]
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// import WebSocket from '@uci/websocket-client'
|
||||
import WebSocket from '../../browser-client'
|
||||
|
||||
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')
|
||||
|
||||
export default ws
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7 KiB |
Loading…
Reference in a new issue