Hacked in boolean type handling for schemas

src/components/sub-menus/add-integration/script.ts

@@ -6,11 +6,12 @@ import { Inject } from '../../../utilities/dependency-injection';
 import { YioStore } from '../../../store';
 import { ServerConnection } from '../../../server';
 import { IKeyValuePair, IDropDownItem, IIntegrationSchema } from '../../../types';
+import { SpotifyAuthentication } from '../../../utilities/spotify-authentication';
 import ActionButton from '../../action-button/index.vue';
 import ActionIconButton from '../../action-icon-button/index.vue';
 import DropDown from '../../drop-down/index.vue';
 import Spotify from '../../spotify/index.vue';
-import { SpotifyAuthentication } from '../../../utilities/spotify-authentication';
+import SwitchToggle from '../../switch-toggle/index.vue';
 
 @Component({
 	name: 'AddIntegration',
@@ -24,6 +25,7 @@ import { SpotifyAuthentication } from '../../../utilities/spotify-authentication
 		};
 	},
 	components: {
+		SwitchToggle,
 		ActionButton,
 		ActionIconButton,
 		DropDown,
@@ -48,7 +50,7 @@ export default class AddIntegration extends Vue {
 	public name: string = '';
 	public type: string = '';
 	public properties: IKeyValuePair<IIntegrationSchema> = {};
-	public propertyValues: IKeyValuePair<string> = {};
+	public propertyValues: IKeyValuePair<string | boolean | number> = {};
 	public newDataKey: string = '';
 	public newDataValue: string = '';
 	public selectedValue: string = this.isIntegrationTypeSelectedSpotify ? 'spotify' : '';
@@ -71,11 +73,13 @@ export default class AddIntegration extends Vue {
 		this.properties = { ...filteredProps };
 		this.propertyValues = { ...Object.keys(filteredProps)
 			.reduce((values, propName) => {
+				const type = filteredProps[propName].type;
+
 				return {
 					...values,
-					[`${propName}`]: ''
+					[`${propName}`]: type === 'string' ? '' : false
 				};
-			}, {} as IKeyValuePair<string>) };
+			}, {} as IKeyValuePair<string | boolean | number>) };
 	}
 
 	public onAddNewIntegration() {

src/components/sub-menus/add-integration/template.html

@@ -26,7 +26,8 @@ <h1 class="title">
                {{key}}
             </div>
             <div class="setting-value">
-               <input class="setting-input" :placeholder="`example: ${property.examples[0]}`" type="text" v-model="propertyValues[key]" />
+               <input v-if="property.type === 'string'" class="setting-input" :placeholder="`example: ${property.examples[0]}`" type="text" v-model="propertyValues[key]" />
+               <switch-toggle v-if="property.type === 'boolean'" v-model="propertyValues[key]"></switch-toggle>
             </div>
          </div>
          <action-button :text="$t('common.save')" :primary="true" @onClick="onSave"></action-button>

src/components/sub-menus/integration-settings/script.ts

@@ -5,11 +5,13 @@ import { Inject } from '../../../utilities/dependency-injection';
 import { ServerConnection } from '../../../server';
 import { IIntegrationInstance, IKeyValuePair, IIntegrationSchema } from '../../../types';
 import ActionButton from '../../action-button/index.vue';
+import SwitchToggle from '../../switch-toggle/index.vue';
 
 @Component({
 	name: 'IntegrationSettings',
 	components: {
-		ActionButton
+		ActionButton,
+		SwitchToggle
 	},
 	subscriptions(this: IntegrationSettings) {
 		return {
@@ -44,7 +46,7 @@ export default class IntegrationSettings extends Vue {
 
 	public supportedIntegrations: IKeyValuePair<IIntegrationSchema>;
 	public properties: IKeyValuePair<IIntegrationSchema> = {};
-	public propertyValues: IKeyValuePair<string> = {};
+	public propertyValues: IKeyValuePair<string | number | boolean> = {};
 
 	public get name() {
 		return this.integration.friendly_name;
@@ -70,7 +72,7 @@ export default class IntegrationSettings extends Vue {
 				...values,
 				[`${propName}`]: this.integration.data[propName]
 			};
-		}, {} as IKeyValuePair<string>) };
+		}, {} as IKeyValuePair<string | number | boolean>) };
 	}
 
 	public onSave() {

src/components/sub-menus/integration-settings/template.html

@@ -6,7 +6,8 @@ <h2 class="integration-title">{{name}}</h2>
          {{key}}
       </div>
       <div class="setting-value">
-         <input class="setting-input" :placeholder="`example: ${property.examples[0]}`" type="text" v-model="propertyValues[key]" />
+         <input v-if="property.type === 'string'" class="setting-input" :placeholder="`example: ${property.examples[0]}`" type="text" v-model="propertyValues[key]" />
+         <switch-toggle v-if="property.type === 'boolean'" v-model="propertyValues[key]"></switch-toggle>
       </div>
    </div>
    <action-button text="Save" :primary="true" @onClick="onSave"></action-button>

src/components/switch-toggle/script.ts

@@ -1,12 +1,17 @@
 import Vue from 'vue';
-import {Component, Model} from 'vue-property-decorator';
+import {Component, Prop} from 'vue-property-decorator';
 
 @Component({
 	name: 'SwitchToggle'
 })
 export default class SwitchToggle extends Vue {
-	@Model('onToggle', {
-		type: Boolean
+	@Prop({
+		type: Boolean,
+		required: true
 	})
-	public readonly checked!: boolean;
+	public readonly value: boolean;
+
+	public get hasSlotContent() {
+		return !!(this.$slots.default || this.$scopedSlots.default);
+	}
 }

src/components/switch-toggle/template.html

@@ -1,6 +1,6 @@
 <div class="container">
-    <div class="label">
+    <div class="label" v-if="hasSlotContent">
         <slot></slot>
     </div>
-    <input class="toggle" type="checkbox" :checked="checked" />
+    <input class="toggle" type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" />
 </div>

src/pages/settings/script.ts

@@ -50,8 +50,4 @@ export default class SettingsPage extends Vue {
 	public updateAutoBrightness(value: boolean) {
 		this.server.setAutoBrightness(value);
 	}
-
-	public updateAutoSoftwareUpdate(value: boolean) {
-		alert('TODO: API ENDPOINT NEEDED');
-	}
 }

src/pages/settings/template.html

@@ -6,14 +6,14 @@ <h1 class="title">
         <div class="row">
             <card :title="$t('pages.settings.darkMode.title')" class="settings-item" @onClick="updateDarkMode(!darkMode)">
                 <template v-slot:rightIcon>
-                    <switch-toggle v-model="darkMode" @onToggle="updateDarkMode"></switch-toggle>
+                    <switch-toggle v-model="darkMode"></switch-toggle>
                 </template>
             </card>
         </div>
         <div class="row">
             <card :title="$t('pages.settings.autoBrightness.title')" class="settings-item" @onClick="updateAutoBrightness(!autoBrightness)">
                 <template v-slot:rightIcon>
-                    <switch-toggle v-model="autoBrightness" @onToggle="updateAutoBrightness"></switch-toggle>
+                    <switch-toggle v-model="autoBrightness"></switch-toggle>
                 </template>
             </card>
             <div class="settings-description">

src/pages/software-update/template.html

@@ -6,7 +6,7 @@ <h1 class="title">
         <div class="row">
             <card :title="$t('pages.softwareUpdate.autoUpdate')" class="item" @onClick="updateAutoSoftwareUpdate(!autoSoftwareUpdate)">
                 <template v-slot:rightIcon>
-                    <switch-toggle v-model="autoSoftwareUpdate" @onToggle="updateAutoSoftwareUpdate"></switch-toggle>
+                    <switch-toggle v-model="autoSoftwareUpdate"></switch-toggle>
                 </template>
             </card>
             <div class="description">

src/server.ts

@@ -25,7 +25,7 @@ export class ServerConnection {
 	private requestId: number;
 
 	constructor() {
-		this.host = window.location.hostname;
+		this.host = '192.168.12.131'; // window.location.hostname;
 		this.port = 946;
 		this.requestId = 0;
 		this.configPollingRequestId = 1316134911;

src/types.ts

@@ -116,7 +116,7 @@ export interface IIntegrationInstance {
 	type: string;
 	friendly_name: string;
 	friendly_name_search_term: string;
-	data: IKeyValuePair<string>;
+	data: IKeyValuePair<string | boolean | number>;
 }
 
 export interface IIntegration {