Connect to store and display block types

.babelrc

@@ -3,6 +3,6 @@
     [ "env", {"modules": false} ],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", "transform-decorators"],
   "comments": false
 }

.eslintignore

@@ -1 +1,2 @@
 /dist
+*.ts

package.json

@@ -7,16 +7,20 @@
   "author": "BrewPi B.V.",
   "private": true,
   "scripts": {
-    "lint": "eslint --ext .js,.vue,.ts src",
+    "eslint": "eslint --ext .js,.vue src",
+    "tslint": "tslint -c tslint.json 'src/**/*.ts'",
+    "lint": "npm run eslint && npm run tslint",
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
+    "vue-class-component": "^6.2.0",
     "vue-i18n": "^7.3.3",
     "vuex-typescript": "^3.0.2"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.46",
     "babel-eslint": "8.2.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
     "connect-api-mocker": "^1.3.6",
     "eslint": "4.15.0",
     "eslint-config-airbnb-base": "11.3.0",
@@ -27,6 +31,8 @@
     "eslint-plugin-vue": "4.0.0",
     "quasar-cli": "^0.15.0-beta.36",
     "ts-loader": "^3.5.0",
+    "tslint": "^5.9.1",
+    "tslint-config-airbnb": "^5.7.0",
     "typescript": "^2.7.1",
     "typescript-eslint-parser": "^13.0.0"
   },

quasar.conf.js

@@ -36,17 +36,17 @@ module.exports = ctx => ({
 
       // add custom loaders
       cfg.module.rules.push({
-        enforce: 'pre',
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        exclude: /(node_modules|quasar)/,
-      }, {
         test: /\.tsx?$/,
         loader: 'ts-loader',
         exclude: /node_modules/,
         options: {
           appendTsSuffixTo: [/\.vue$/],
         },
+      }, {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /(node_modules|quasar)/,
       });
     },
   },

src/components/blocks/OneWireTempSensor/OneWireTempSensor.ts

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import { getById } from '../../../store/blocks/OneWireTempSensor/getters';
+
+@Component({
+  props: {
+    id: {
+      default: '',
+      type: String,
+    },
+  },
+})
+export default class OneWireTempSensor extends Vue {
+  get blockData() {
+    return getById(this.$props.id);
+  }
+
+  get settings() {
+    return this.blockData.settings;
+  }
+
+  get state() {
+    return this.blockData.state;
+  }
+}

src/components/blocks/OneWireTempSensor.vue → src/components/blocks/OneWireTempSensor/default.vue

@@ -26,24 +26,7 @@
   </q-card>
 </template>
 
-<script>
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'one-wire-temp-sensor',
-  props: {
-    id: String,
-    settings: {
-      address: String,
-      offset: Number,
-    },
-    state: {
-      value: Number,
-      connected: Boolean,
-    },
-  },
-});
-</script>
+<script lang="ts" src="./OneWireTempSensor.ts" />
 
 <style scoped>
 

src/components/blocks/SetPointSimple/SetPointSimple.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import { getById } from '../../../store/blocks/SetPointSimple/getters';
+
+@Component({
+  props: {
+    id: {
+      default: '',
+      type: String,
+    },
+  },
+})
+export default class SetPointSimple extends Vue {
+  get blockData() {
+    return getById(this.$props.id);
+  }
+
+  get settings() {
+    return this.blockData.settings;
+  }
+}

src/components/blocks/SetPointSimple.vue → src/components/blocks/SetPointSimple/default.vue

@@ -11,20 +11,4 @@
   </q-card>
 </template>
 
-<script>
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'set-point-simple',
-  props: {
-    id: String,
-    settings: {
-      value: Number,
-    },
-  },
-});
-</script>
-
-<style scoped>
-
-</style>
+<script lang="ts" src="./SetPointSimple.ts"></script>

src/components/blocks/block.vue

@@ -0,0 +1,39 @@
+<template>
+  <component
+    :is="type"
+    :id="blockId"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import { blockById } from '../../store/blocks/getters';
+
+const blockTypes = {
+  OneWireTempSensor: () => import('./OneWireTempSensor/default.vue'),
+  SetPointSimple: () => import('./SetPointSimple/default.vue'),
+};
+
+export default Vue.extend({
+  name: 'block',
+  components: { ...blockTypes },
+  props: {
+    blockId: {
+      default: '',
+      type: String,
+    },
+  },
+  computed: {
+    type(): string {
+      const type = blockById(this.$props.blockId).type;
+
+      if (Object.keys(blockTypes).indexOf(type) === -1) {
+        throw new Error(`'${type}' is not a valid block type`);
+      }
+
+      return type;
+    },
+  },
+});
+</script>

src/main.ts

@@ -71,9 +71,9 @@ Vue.use(Quasar, {
 });
 
 const app = new Vue({
-  el: '#q-app',
   router,
   store,
+  el: '#q-app',
   render: h => h(App),
 });