[
  {
    "path": ".browserslistrc",
    "content": "> 1%\nlast 2 versions\nnot ie <= 8\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  env: {\n    node: true\n  },\n  'extends': [\n    'plugin:vue/essential',\n    '@vue/standard'\n  ],\n  rules: {\n    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',\n    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n  },\n  parserOptions: {\n    parser: 'babel-eslint'\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw*\n"
  },
  {
    "path": ".postcssrc.js",
    "content": "module.exports = {\n  plugins: {\n    autoprefixer: {}\n  }\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n## [0.1.6](https://github.com/zircleui/tutorial/compare/v0.1.5...v0.1.6) (2019-05-02)\n\n\n\n<a name=\"0.1.5\"></a>\n## [0.1.5](https://github.com/zircleui/tutorial/compare/v0.1.4...v0.1.5) (2019-04-22)\n\n\n\n<a name=\"0.1.4\"></a>\n## [0.1.4](https://github.com/zircleui/tutorial/compare/v0.1.3...v0.1.4) (2019-01-06)\n\n\n\n<a name=\"0.1.3\"></a>\n## [0.1.3](https://github.com/zircleui/tutorial/compare/v0.1.2...v0.1.3) (2018-11-25)\n\n\n### Bug Fixes\n\n* 🐛 home name ([071b762](https://github.com/zircleui/tutorial/commit/071b762)), closes [#1](https://github.com/zircleui/tutorial/issues/1)\n\n\n\n<a name=\"0.1.2\"></a>\n## [0.1.2](https://github.com/zircleui/tutorial/compare/v0.1.1...v0.1.2) (2018-11-19)\n\n\n\n<a name=\"0.1.1\"></a>\n## 0.1.1 (2018-08-17)\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2018-present, Juan Martín Muda\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Zircle-ui: smart-home tutorial\n\n> :wave: This app is powered by [**zircle-ui**](https://github.com/zircleUI/zircleUI) :rocket: and is part of [its official tutorial](https://zircleui.github.io/docs/tutorial/). You can play with a working demo on [**CodeSandbox**](https://codesandbox.io/s/23wlzq4l1r?view=preview)\n\n<img src=\"https://raw.githubusercontent.com/zircleUI/docs/master/docs/.vuepress/public/smart-home.jpg\" style=\"margin-top: 20px; display: block; margin-left: auto; margin-right: auto; width: 100%;\" />\n\n\n## Project setup\n\n```\ngit clone https://github.com/zircleUI/tutorial.git\n\n```\n\nAfter cloning the repository, execute:\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@vue/app'\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"smart-home\",\n  \"version\": \"0.1.6\",\n  \"description\": \"Demo app for zircle-ui tutorial\",\n  \"author\": \"Juan Martín Muda <juan.martin.muda@gmail.com>\",\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\",\n    \"lint\": \"vue-cli-service lint\"\n  },\n  \"keywords\": [\n    \"zircle\",\n    \"smart-home\",\n    \"tutorial\",\n    \"vue\",\n    \"javascript\"\n  ],\n  \"dependencies\": {\n    \"leaflet\": \"^1.4.0\",\n    \"smoothie\": \"^1.35.0\",\n    \"vue\": \"^2.6.10\",\n    \"vue-router\": \"^3.0.6\",\n    \"zircle\": \"^1.2.5\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"^3.6.0\",\n    \"@vue/cli-plugin-eslint\": \"^3.6.0\",\n    \"@vue/cli-service\": \"^3.6.0\",\n    \"@vue/eslint-config-standard\": \"^3.0.5\",\n    \"node-sass\": \"^4.12.0\",\n    \"sass-loader\": \"^7.0.1\",\n    \"vue-template-compiler\": \"^2.6.10\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/zircleui/tutorial.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/zircleui/tutorial/issues\"\n  },\n  \"homepage\": \"https://github.com/zircleui/tutorial#readme\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>smart-home</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but smart-home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "src/App.vue",
    "content": "<template>\n  <z-canvas :views='$options.components'></z-canvas>\n</template>\n<script>\n// TO SET UP VUE-ROUTER UNCOMMENT THE FOLLOWING LINES\n// import Vue from 'vue'\n// import Router from 'vue-router'\n// Vue.use(Router)\n// const router = new Router()\nexport default {\n  components: {\n    tv: () => import('./views/tv'),\n    living: () => import('./views/living'),\n    search: () => import('./views/search'),\n    device: () => import('./views/device'),\n    home: () => import('./views/home'),\n    settings: () => import('./views/settings'),\n    rooms: () => import('./views/rooms'),\n    devices: () => import('./views/devices'),\n    status: () => import('./views/status'),\n    scenes: () => import('./views/scenes'),\n    family: () => import('./views/family'),\n    logs: () => import('./views/logs')\n  },\n  mounted () {\n    this.$zircle.config({\n      mode: 'full',\n      style: {\n        theme: 'black',\n        mode: 'dark'\n      },\n      debug: true\n    })\n    this.$zircle.setView('home')\n  }\n}\n</script>\n<style>\n@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');\n@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');\n</style>\n"
  },
  {
    "path": "src/main.js",
    "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport zircle from 'zircle'\nimport 'zircle/dist/zircle.css'\nVue.use(zircle)\nVue.config.productionTip = false\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n"
  },
  {
    "path": "src/views/device.vue",
    "content": "<template>\n  <z-view>\n    {{category}}\n    <z-spot slot=\"extension\"\n      to-view='home'\n      :distance='130'\n      :angle='30'\n      size='small' >\n      {{qty}}\n    </z-spot>\n  </z-view>\n</template>\n<script>\n/*eslint-disable*/\n// just $route.params.category and $route.params.qty\nexport default {\n  computed: {\n    category () {\n      if (this.$zircle.getParams() !== undefined) {\n        return this.$zircle.getParams().category\n      }\n    },\n    qty () {\n      if (this.$zircle.getParams() !== undefined) {\n        return this.$zircle.getParams().qty\n      }\n    }\n  }\n}\n</script>\n\n"
  },
  {
    "path": "src/views/devices.vue",
    "content": "<template>\n  <z-view>\n    <section slot=\"extension\">\n      <z-list\n        :items=\"devices\"\n        :per-page=\"5\">\n          <z-spot\n            slot-scope=\"props\"\n            :index=\"props.index\"\n            :distance=\"60\"\n            :to-view=\"{ name: 'device', params: {category: props.category, qty: props.qty}}\"\n            :label=\"props.category\">\n            <span style=\"color: white;\">{{props.qty}}</span>\n            <z-spot slot=\"extension\"\n              :style=\"props.category === 'care' ? 'background-color: red; border: none;': 'background-color: green; border: none;'\"\n              :angle='-45'\n              size='xxs'>\n            </z-spot>\n          </z-spot>\n      </z-list>\n    </section>\n</z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      devices: [\n        { category: 'cameras & sensors', qty: 4 },\n        { category: 'care', qty: 1 },\n        { category: 'climate', qty: 2 },\n        { category: 'doors & locks', qty: 2 },\n        { category: 'energy', qty: 1 },\n        { category: 'garage doors', qty: 1 },\n        { category: 'home & family', qty: 6 },\n        { category: 'lawn & garden', qty: 0 },\n        { category: 'lights & switches', qty: 13 },\n        { category: 'smoke & co', qty: 3 },\n        { category: 'voice assistant', qty: 1 },\n        { category: 'water', qty: 1 },\n        { category: 'windows & blinds', qty: 3 },\n        { category: 'entertainment', qty: 3 }\n      ]\n    }\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/family.vue",
    "content": "<template>\n<z-view label=\"Leaflet | OpenStreetMap | CartoDB\" ref=\"map\">\n    <div slot=\"media\" :id=\"$zircle.getCurrentViewName()\" style=\"height:100%; width: 100%;\">\n    </div>\n    <section slot=\"extension\">\n       <z-spot button\n        :angle=\"-90\"\n        size=\"s\"\n        :style=\"active === 0 ? 'border-color: purple; color: purple;' : ''\"\n        label=\"Mary\"\n        label-pos=\"top\"\n        @click.native=\"showMe(0, 'purple')\">\n        <i class=\"fas fa-female\"></i>\n      </z-spot>\n      <z-spot button\n        :angle=\"30\"\n        size=\"s\"\n        label=\"John\"\n        :style=\"active === 1 ? 'border-color: green; color: green;' : ''\"\n        @click.native=\"showMe(1, 'green')\">\n        <i class=\"fas fa-male\"></i>\n      </z-spot>\n      <z-spot button\n        :angle=\"150\"\n        size=\"s\"\n        label=\"Peter\"\n        :style=\"active === 2 ? 'border-color: orange; color: orange;' : ''\"\n        @click.native=\"showMe(2, 'orange')\">\n        <i class=\"fas fa-child\"></i>\n      </z-spot>\n    </section>\n  </z-view>\n</template>\n<script>\n/*eslint-disable*/\nimport L from 'leaflet'\nexport default {\n  data () {\n    return {\n      map: null,\n      markers: [],\n      active: ''\n    }\n  },\n  methods: {\n    initMap () {\n      this.map = L.map(this.$zircle.getCurrentViewName(), {attributionControl: false, zoomControl: false}).setView([38.63, -90.23], 14)\n      L.tileLayer(\n        'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',\n        { \n          zoom: 18\n        }).addTo(this.map)\n      this.markers.push(\n        L.marker([38.60, -90.20]).bindPopup(\"Mary at work\").addTo(this.map),\n        L.marker([38.63, -90.23]).bindPopup(\"John at home.\").addTo(this.map).openPopup(),\n        L.marker([38.66, -90.26]).bindPopup(\"Peter at school\").addTo(this.map)\n      )\n      this.active = 1\n      this.showMe(1, 'green')\n    },\n    showMe (index, color) {\n      this.map.panTo(this.markers[index].getLatLng())\n      this.markers[index].openPopup()\n      this.active = index\n      this.$refs.map.$el.style.borderColor = color\n    }\n  },\n  mounted () {\n    this.initMap()\n  }\n}\n</script>\n<style>\n  @import url('https://unpkg.com/leaflet@1.3.1/dist/leaflet.css');\n</style>\n\n"
  },
  {
    "path": "src/views/home.vue",
    "content": "<template>\n  <z-view>\n    11:53 PM\n    <br>\n    Monday, Oct.\n    <br>\n    <br>\n    <h1>Night mode</h1>\n    <br>\n    Outside 29˚C, sunny\n    <br>\n    Inside 25˚C\n    <div slot=\"extension\">\n      <!-- status monitor -->\n      <z-spot\n        style=\"background-color: orange; border-width: 4px; border-color: var(--background-color);\"\n        :angle=\"-145\"\n        size=\"m\"\n        :distance=\"120\"\n        to-view=\"status\">\n        <i style=\"color: var( --accent-text-color)\" class=\"fas fa-bell\"></i><br>\n        <span style=\"color: var( --accent-text-color)\">15</span>\n      </z-spot>\n      <!-- family-->\n      <z-spot\n        :angle=\"-30\"\n        size=\"s\"\n        :distance=\"120\"\n        label=\"family\"\n        label-pos=\"right\"\n        to-view=\"family\">\n        <i class=\"fas fa-map-marker-alt\"></i>\n      </z-spot>\n      <!-- scenes-->\n      <z-spot\n        :angle=\"0\"\n        size=\"s\"\n        :distance=\"120\"\n        label=\"scenes\"\n        label-pos=\"right\"\n        to-view=\"scenes\">\n        4\n      </z-spot>\n      <!-- rooms-->\n      <z-spot\n        :angle=\"30\"\n        size=\"s\"\n        :distance=\"120\"\n        label=\"Rooms\"\n        label-pos=\"right\"\n        to-view=\"rooms\">\n        5\n      </z-spot>\n      <!-- devices-->\n      <z-spot\n        :angle=\"60\"\n        :distance=\"120\"\n        size=\"s\"\n        label=\"Devices\"\n        label-pos=\"right\"\n        to-view=\"devices\">\n        45\n      </z-spot>\n      <!-- settings-->\n      <z-spot\n        :angle=\"150\"\n        :distance=\"120\"\n        size=\"s\"\n        label=\"Settings\"\n        to-view=\"settings\">\n        <i class=\"fas fa-sliders-h\"></i>\n      </z-spot>\n    </div>\n  </z-view>\n</template>\n"
  },
  {
    "path": "src/views/living.vue",
    "content": "<template>\n  <z-view\n  style=\"border-width: 8px\"\n  slider\n  :progress=\"progress\">\n    <span style=\"color: var(--accent-text-color)\">Living room\n      <h1>{{activeScene}}</h1>\n      {{msg}}\n    </span>\n    <img slot=\"image\" src=\"living.jpg\" width=\"100%\" height=\"100%\" style=\"opacity: 0.3\">\n    <div slot=\"extension\">\n      <z-spot\n        v-for=\"(device, index) in devices\"\n        :button=\"device.name !== 'AC'\"\n        :knob=\"device.name === 'AC'\"\n        v-bind.sync=\"device.temp\"\n        :angle=\"1 + (180 / (devices.length - 1) * index)\"\n        :distance=\"100\"\n        size=\"m\"\n        :to-view=\"device.view\"\n        :label=\"device.name\"\n        :key=\"'dev_' + index\">\n        <i :class=\"device.icon\"></i>\n        <z-spot slot=\"extension\"\n          button\n          :angle=\"-45\"\n          size=\"xxs\"\n          :style=\"device.state === 'on' ? 'border-color: green; background-color: green;' : 'border-color: red; background-color: red;'\">\n        </z-spot>\n      </z-spot>\n      <z-spot\n        v-for=\"(scene, index) in scenes\"\n        button\n        size=\"s\"\n        :angle=\"225 + (90 / (scenes.length - 1) * index)\"\n        :distance=\"125\"\n        :label=\"scene.name\"\n        label-pos=\"top\"\n        :key=\"'scn_' + index\"\n        @click.native=\"showMe(scene.name)\">\n        <i :class=\"scene.icon\"></i>\n      </z-spot>\n    </div>\n  </z-view>\n</template>\n<script>\n/*eslint-disable*/\nexport default {\n  data () {\n    return {\n      progress: 0,\n      msg: '',\n      activeScene: '',\n      devices: [],\n      scenes: [\n        {name: 'Relax', state: 'active', icon: 'fas fa-book'},\n        {name: 'Theatre', state: 'deactive', icon: 'fas fa-film'},\n        {name: 'Party', state: 'deactive', icon: 'fas fa-birthday-cake'}\n      ]\n    }\n  },\n  computed: {\n    retrieveParams () {\n      if (this.$zircle.getParams() !== undefined) {\n        return this.$zircle.getParams().room\n      }\n    }\n  },\n  methods: {\n    log (data) {\n      console.log(data)\n    },\n    showMe (scene) {\n      if (this.activeScene !== scene) {\n        this.progress = 5\n        this.activeScene = scene\n        this.msg = 'Activating devices...'\n        var vm = this\n        var id = setInterval(function () {\n          if (vm.progress >= 100) {\n            clearInterval(id)\n            vm.progress = 0\n            vm.msg = scene.msg\n          } else if (vm.progress === 40) { \n            vm.msg = 'Applying rules...'\n            if (scene === 'Relax') {\n              vm.devices = [\n                {name: 'AC', state: 'on', temp: {qty: 24, unit: '˚C', min: 18, max: 32}},\n                {name: 'TV', state: 'off', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},\n                {name: 'Hifi', state: 'on', vol: 14, icon: 'fas fa-music'},\n                {name: 'Ambient light', state: 'off', icon: 'far fa-lightbulb'}\n              ]\n            } else if (scene === 'Theatre') {\n              vm.devices = [\n                {name: 'AC', state: 'on', temp: {qty: 18, unit: '˚C', min: 18, max: 32}},\n                {name: 'TV', state: 'on', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},\n                {name: 'Hifi', state: 'off', vol: 14, icon: 'fas fa-music'},\n                {name: 'Ambient light', state: 'off', icon: 'far fa-lightbulb'}\n              ]\n            } else if (scene === 'Party') {\n              vm.devices = [\n                {name: 'AC', state: 'on', temp: {qty: 20, unit: '˚C', min: 18, max: 32}},\n                {name: 'TV', state: 'off', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},\n                {name: 'Hifi', state: 'on', vol: 14, icon: 'fas fa-music'},\n                {name: 'Ambient light', state: 'on', icon: 'far fa-lightbulb'}\n              ]\n            }\n            vm.progress ++\n          } else {\n            vm.progress ++\n          }\n        }, 20)\n      } else {\n        this.msg = 'This scene is already activated'\n      }\n    }\n  },\n  created () {\n    this.showMe('Relax')\n  }\n}\n</script>\n\n"
  },
  {
    "path": "src/views/logs.vue",
    "content": "<template>\n  <z-view style=\"border-width: 6px\"  label=\"Console\">\n    <ul>\n      <li v-for=\"(log, index) in console\" :key=\"index\">\n        {{log}}\n      </li>\n    </ul>\n    <div slot=\"extension\">\n      <z-spot\n        v-show=\"console.length > 1\"\n        button\n        :angle=\"45\"\n        size=\"s\"\n        :distance=\"120\"\n        label=\"Reset\"\n        @click.native=\"openDialog = true\">\n          <i class=\"fas fa-trash\"></i>\n      </z-spot>\n      <z-dialog v-if=\"openDialog\" self-close v-on:done=\"openDialog = false\">\n        Are your sure?\n        <div slot=extension>\n          <z-spot\n          class=\"success\"\n          button\n          :angle=\"45\"\n          size=\"s\"\n          :distance=\"120\"\n          @click.native=\"reset\">\n            <i class=\"fas fa-check\"></i>\n          </z-spot>\n          <z-spot\n          class=\"danger\"\n          button\n          :angle=\"135\"\n          size=\"s\"\n          :distance=\"120\"\n          @click.native=\"openDialog = false\">\n            <i class=\"fas fa-times\"></i>\n          </z-spot>\n        </div>\n      </z-dialog>\n    </div>\n  </z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      openDialog: false,\n      console: [\n        '12:30pm - Mary arrived home',\n        '12:34pm - Peter arrived home',\n        '1:30pm - Relax scene activated',\n        '1:50pm - Peter arrived home',\n        '4:00pm - Away scene activated',\n        '5:10pm - Movement detected',\n        '5:10pm - Video alert sent to Peter',\n        '6:00pm - At Home scene activated',\n        '6:01pm - Ambient lights turned on',\n        '6:01pm - Playing Mary music list',\n        '6:15pm - Problem with camera device',\n        '6:16pm - Camera is working after reset',\n        '6:45pm - Ambient lights turned off',\n        '7:01pm - Theatre turned on',\n        '8:00pm - Night scene activaded'\n      ]\n    }\n  },\n  methods: {\n    reset () {\n      this.console = ['No events available']\n\n      this.openDialog = false\n    }\n  }\n}\n</script>\n<style>\nli {\n  line-height: 40px;\n  border-bottom: 1px solid white\n}\n</style>\n"
  },
  {
    "path": "src/views/rooms.vue",
    "content": "<template>\n  <z-view>\n    Rooms\n    <section slot=\"extension\">\n      <z-list\n        :items=\"rooms\"\n        :per-page=\"3\">\n          <z-spot\n            :distance=\"60\"\n            slot-scope=\"props\"\n            :index=\"props.index\"\n            :to-view=\"props.name\"\n            :label=\"props.name\"\n            :image-path=\"props.image\"\n            label-pos=\"bottom\">\n            <z-spot slot=\"extension\"\n              v-if=\"props.status\"\n              style=\"background-color: red; border: none;\"\n              :angle='-45'\n              size='xxs'>\n            </z-spot>\n          </z-spot>\n      </z-list>\n      <z-spot\n        button\n        :angle=\"45\"\n        size=\"s\"\n        :distance=\"120\"\n        label=\"Add\"\n        @click.native=\"openDialog = true\">\n          <i class=\"fas fa-plus\"></i>\n      </z-spot>\n      <z-dialog v-if=\"openDialog\" self-close v-on:done=\"openDialog = false\">\n        Add a new room?\n        <div slot=extension>\n          <z-spot\n          class=\"success\"\n          button\n          :angle=\"45\"\n          size=\"s\"\n          :distance=\"120\"\n          @click.native=\"openDialog = false\">\n            <i class=\"fas fa-check\"></i>\n          </z-spot>\n          <z-spot\n          class=\"danger\"\n          button\n          :angle=\"135\"\n          size=\"s\"\n          :distance=\"120\"\n          @click.native=\"openDialog = false\">\n            <i class=\"fas fa-times\"></i>\n          </z-spot>\n        </div>\n      </z-dialog>\n    </section>\n</z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      rooms: [\n        { name: 'Living', devices: 6, image: './living.jpg' },\n        { name: 'Bedroom', devices: 2, status: 'alert' },\n        { name: 'Kitchen', devices: 5 },\n        { name: 'Studio', devices: 1 },\n        { name: 'Bath', devices: 1 }\n      ],\n      openDialog: false\n    }\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/scenes.vue",
    "content": "<template>\n  <z-view\n  label=\"Scenes\"\n  slider\n  :progress=\"progress\"\n  :style=\"styleActive\">\n  <h1>{{activeScene}}</h1>\n  <div style=\"height: 60px;\">\n    {{msg}}\n  </div>\n  <div slot=\"extension\">\n        <z-spot\n          v-for=\"(el, index) in elements\"\n          button\n          size=\"s\"\n          :distance=\"120\"\n          :angle=\"325 + (90 / elements.length * index)\"\n          :style=\"activeScene === el.scene ? styleActive : ''\"\n          :key=\"index\"\n          @click.native=\"showMe(el)\">\n          <i class=\"fas\" :class=\"el.icon\"></i>\n        </z-spot>\n    </div>\n  </z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      activeScene: 'Night',\n      color: 'blue',\n      msg: '',\n      progress: 0,\n      elements: [\n        { scene: 'Day', color: 'orange', icon: 'fa-sun', msg: 'Cooling rooms, blinds opened, playing ambient music' },\n        { scene: 'Night', color: 'blue', icon: 'fa-moon', msg: 'Blinds closed, AC in silence mode, motion sensors active' },\n        { scene: 'Away', color: 'red', icon: 'fa-shield-alt', msg: 'Alarm armed, cameras activated, blinds closed' },\n        { scene: 'At home', color: 'green', icon: 'fa-home', msg: 'Lights in ambient mode, playing relax music, coffee is being prepared' }\n      ]\n    }\n  },\n  computed: {\n    styleActive () {\n      return {\n        borderWidth: '8px',\n        borderColor: this.color,\n        color: this.color\n      }\n    }\n  },\n  methods: {\n    showMe (el) {\n      if (this.activeScene !== el.scene) {\n        this.progress = 5\n        this.activeScene = el.scene\n        this.color = el.color\n        this.msg = 'Activating devices...'\n        var vm = this\n        var id = setInterval(function () {\n          if (vm.progress >= 100) {\n            clearInterval(id)\n            vm.progress = 0\n            vm.msg = el.msg\n          } else if (vm.progress === 40) {\n            vm.msg = 'Applying rules...'\n            vm.progress++\n          } else {\n            vm.progress++\n          }\n        }, 20)\n      } else {\n        this.msg = 'This scene is already activated'\n      }\n    }\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/search.vue",
    "content": "<template>\n  <z-view>\n    <form action=\"search_submit\" method=\"get\" accept-charset=\"utf-8\">\n      <input type=\"text\" name=\"devices\">\n    </form>\n  <div slot=\"extension\">\n         <z-spot\n          :angle=\"45\"\n          size=\"m\"\n          :distance=\"120\"\n          label=\"Search\"\n          to-view=\"devices\">\n          <i class=\"fa fas-search\"></i>\n        </z-spot>\n    </div>\n  </z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      scene: 'Night scene'\n    }\n  },\n  mounted () {\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/settings.vue",
    "content": "<template>\n  <z-view label=\"Settings\">\n  {{ theme }}\n    <div slot=\"extension\">\n        <z-spot\n          v-for=\"(el, index) in elements\"\n          button\n          size=\"xs\"\n          :distance=\"120\"\n          :angle=\"el.angle\"\n          :label=\"el.label\"\n          :label-pos=\"el.labelPos\"\n          :class=\"$zircle.getTheme() === 'theme-' + el.label ||\n          $zircle.getThemeMode() === 'mode-' + el.label ? 'accent' : ''\"\n          :key=\"index\"\n          @click.native=\"changeStyle(el)\"\n          />\n    </div>\n  </z-view>\n</template>\n<script>\nexport default {\n  data () {\n    return {\n      theme: 'Select your theme',\n      elements: [\n        { type: 'theme', angle: -50, label: 'blue', labelPos: 'right' },\n        { type: 'theme', angle: -30, label: 'black', labelPos: 'right' },\n        { type: 'theme', angle: -10, label: 'green', labelPos: 'right' },\n        { type: 'theme', angle: 10, label: 'red', labelPos: 'right' },\n        { type: 'theme', angle: 30, label: 'light-blue', labelPos: 'right' },\n        { type: 'theme', angle: 50, label: 'gray', labelPos: 'right' },\n        { type: 'mode', angle: 210, label: 'dark', labelPos: 'left' },\n        { type: 'mode', angle: 190, label: 'dark-filled', labelPos: 'left' },\n        { type: 'mode', angle: 170, label: 'light', labelPos: 'left' },\n        { type: 'mode', angle: 150, label: 'light-filled', labelPos: 'left' }\n      ]\n    }\n  },\n  methods: {\n    changeStyle (el) {\n      el.type === 'theme'\n        ? this.$zircle.config({ style: { theme: el.label } })\n        : this.$zircle.config({ style: { mode: el.label } })\n      var theme = this.$zircle.getTheme().split('theme-')[1]\n      var mode = this.$zircle.getThemeMode().split('mode-')[1]\n      this.theme = `The theme is ${theme} ${mode}`\n    }\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/status.vue",
    "content": "<template>\n  <z-view label=\"Home status\" style=\"background-color: black\">\n  <canvas slot=\"media\" id=\"smoothie-chart\" style=\"height:50%; width: inherit;\"></canvas>\n  <div slot=\"extension\">\n         <z-spot\n          :angle=\"-45\"\n          size=\"m\"\n          :distance=\"120\"\n          label=\"Events\"\n          to-view=\"logs\">\n          15\n        </z-spot>\n    </div>\n  </z-view>\n</template>\n<script>\nimport { TimeSeries, SmoothieChart } from 'smoothie'\nexport default {\n  data () {\n    return {\n      scene: 'Night scene'\n    }\n  },\n  mounted () {\n    // Random data\n    var line1 = new TimeSeries()\n    // Add random data points at irregular intervals\n    var maxYValue = 10000\n    var addValueLoop = function () {\n      setTimeout(function () {\n        // Generate a random value, centered around zero, raised to the power of 5\n        // so that larger values occur less frequently\n        var value = Math.pow(Math.random() * 2 - 1, 5) * maxYValue\n        line1.append(new Date().getTime(), value)\n        addValueLoop()\n      }, Math.random() * 500)\n    }\n    addValueLoop()\n    var smoothie = new SmoothieChart({\n      grid: {\n        strokeStyle: 'transparent',\n        borderVisible: false\n      },\n      tooltip: true,\n      labels: { disabled: true }\n    })\n    smoothie.addTimeSeries(line1, {\n      strokeStyle: 'rgb(0, 255, 0)',\n      fillStyle: 'rgba(0, 255, 0, 0.4)',\n      lineWidth: 2\n    })\n    smoothie.streamTo(document.getElementById('smoothie-chart'), 100)\n  }\n}\n</script>\n"
  },
  {
    "path": "src/views/tv.vue",
    "content": "<template>\n  <z-view>\n    <iframe slot=\"media\" width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/aJOTlE1K90k\" frameborder=\"0\" allowfullscreen></iframe>\n     Channel 9\n\n          <div slot=\"extension\">\n            <z-spot button\n              :distance='130'\n              :angle='-15'\n              size='s'>\n              +\n            </z-spot>\n            <z-spot button\n              :distance='130'\n              :angle='15'\n              size='s'>\n              -\n            </z-spot>\n            <z-spot button\n              class=\"success\"\n              :distance='110'\n              :angle='-45'\n              size='s'>\n              <i class=\"fa fa-power-off\"></i>\n            </z-spot>\n            <z-spot button\n              :distance='100'\n              :angle='135'\n              :progress=\"14\"\n              size='s'\n              label=\"vol\">\n            </z-spot>\n            <z-spot button\n              class=\"accent\"\n              :distance='100'\n              :angle='45'\n              size='s'\n              label=\"ch.\">\n            </z-spot>\n          </div>\n\n  </z-view>\n</template>\n<script>\n/*eslint-disable*/\nexport default {\n  data () {\n    return {\n      items: [\n        {name: 'tv', state: 'on', vol: 14, bright: 30, channel: '3'},\n        {name: 'lights', state: 'on', color: 'red'},\n        {name: 'lights', state: 'on', color: 'green'},\n        {name: 'lights', state: 'off', color: 'white'},\n        {name: 'Air', state: 'on', temp: 29},\n        {name: 'Camera', state: 'off'}\n      ]\n    }\n  },\n  computed: {\n    retrieveParams () {\n      if (this.$zircle.getParams() !== undefined) {\n        return this.$zircle.getParams().room\n      }\n    }\n  }\n}\n</script>\n\n"
  }
]