Adding simple HoursInput to CreateApplication

src/components/ApplicationInputSwitch.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<LimitedTextField v-if="type === 'text-box-limited'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<HoursPlaying v-else-if="type === 'hours-per'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<TextField v-else-if="type === 'text-box'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<Links v-else-if="type === 'links'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 		<LineInput v-else-if="type === 'line'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
@@ -12,6 +13,7 @@
 
 <script>
 	import LimitedTextField from './inputtypes/LimitedTextField.vue'
+	import HoursPlaying from './inputtypes/HoursPlaying.vue'
 	import TextField from './inputtypes/TextField.vue'
 	import Links from './inputtypes/Links.vue'
 	import LineInput from './inputtypes/LineInput.vue'
@@ -43,6 +45,7 @@
 		},
 		components: {
 			LimitedTextField,
+			HoursPlaying,
 			TextField,
 			Links,
 			LineInput,

src/components/inputtypes/HoursPlaying.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="width">
+		<input class="textarea" type="text" v-model="inputText"/>
+		<span> per </span>
+		<div class="selection">
+			<input type="radio" id="day" value="day" v-model="picked"><label for="day">day</label><span> / </span>
+			<input type="radio" id="week" value="week" v-model="picked"><label for="week">week</label><span> / </span>
+			<input type="radio" id="month" value="month" v-model="picked"><label for="month">month</label>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+				picked: 'day',
+			}
+		},
+		methods: {
+			getContent() {
+				return this.inputText === '' ? '' : this.inputText + ' per ' + this.picked
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+		watch: {
+			inputText: function() {
+				this.$emit('update')
+			},
+			isOkay: function() {
+				this.$emit('okchange')
+			},
+			picked: function() {
+				this.$emit('okchange')
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.selection {
+		display: inline;
+	}
+
+	.selection input {
+		display: none;
+	}
+
+	.selection label {
+		cursor: pointer;
+
+		color: #777;
+		background-color: #333;
+		padding: 0.1em 0.2em;
+	}
+
+	.selection label:hover {
+		color: #fff;
+		background-color: #777;
+	}
+
+	.selection input:checked + label {
+		color: #ddd;
+		background-color: #666;
+	}
+
+	.textarea {
+		width: 5em;
+		margin: auto;
+
+		color: #fff;
+		border: 1px solid #aaa;
+		background-color: #222;
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>