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.
David Kebler
parent
a5d8785ec0
commit
cb2f4a613c
|
|
@ -1,6 +1,2 @@
|
||||||
/node_modules/
|
/node_modules/
|
||||||
/coverage/
|
|
||||||
/syncd/
|
|
||||||
*.log
|
|
||||||
/temp/
|
|
||||||
/archive/
|
/archive/
|
||||||
|
|
|
||||||
|
|
@ -2,5 +2,5 @@ tests/
|
||||||
test/
|
test/
|
||||||
*.test.js
|
*.test.js
|
||||||
testing/
|
testing/
|
||||||
test-client
|
|
||||||
archive/
|
archive/
|
||||||
|
example/
|
||||||
|
|
|
||||||
|
|
@ -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
|
.thumbs.db
|
||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
|
/src-cordova/node_modules
|
||||||
/src-cordova/platforms
|
/src-cordova/platforms
|
||||||
/src-cordova/plugins
|
/src-cordova/plugins
|
||||||
/src-cordova/www
|
/src-cordova/www
|
||||||
|
|
@ -17,4 +18,3 @@ yarn-error.log*
|
||||||
*.ntvs*
|
*.ntvs*
|
||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.lock
|
|
||||||
|
|
@ -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).
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@quasar/babel-preset-app'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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 '@uci/websocket-client'
|
||||||
import WebSocket from '../../../src'
|
import WebSocket from '../../../../src'
|
||||||
|
|
||||||
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')
|
const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<title><%= htmlWebpackPlugin.options.productName %></title>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
|
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
|
||||||
<meta name="format-detection" content="telephone=no">
|
<meta name="format-detection" content="telephone=no">
|
||||||
<meta name="msapplication-tap-highlight" content="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<% } %>">
|
<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" href="statics/app-logo-128x128.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<!-- DO NOT touch the following DIV -->
|
||||||
This is your fallback content in case JavaScript fails to load.
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
<!-- DO NOT touch the following <div> -->
|
|
||||||
<div id="q-app"></div>
|
<div id="q-app"></div>
|
||||||
|
|
||||||
<!-- built files will be auto injected here -->
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
>Go back</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Error404'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -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.0 KiB |
|
|
@ -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",
|
"name": "@uci/websocket-client",
|
||||||
"version": "0.1.6",
|
"version": "0.1.7",
|
||||||
"description": "JSON packet browser client over web socket",
|
"description": "JSON packet browser client over web socket",
|
||||||
"main": "src",
|
"main": "src",
|
||||||
"scripts": {
|
"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",
|
"author": "David Kebler",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -26,11 +27,14 @@
|
||||||
"url": "https://github.com/uCOMmandIt/websocket-client/issues"
|
"url": "https://github.com/uCOMmandIt/websocket-client/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/uCOMmandIt/websocket-client#readme",
|
"homepage": "https://github.com/uCOMmandIt/websocket-client#readme",
|
||||||
"devDependencies": {},
|
"devDependencies": {
|
||||||
|
"@uci/websocket": "^0.3.7",
|
||||||
|
"esm": "^3.2.25"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"auto-bind": "^2.0.0",
|
"auto-bind": "^2.1.0",
|
||||||
"await-to-js": "^2.1.1",
|
"await-to-js": "^2.1.1",
|
||||||
"better-try-catch": "^0.6.2",
|
"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.0 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.0 KiB |
Loading…
Reference in New Issue