Pages: Implement radio button

6 files changed, 101 insertions, 2 deletions

diff --git a/src/client/app/common/scripts/collect-page-vars.ts b/src/client/app/common/scripts/collect-page-vars.ts
index 4c40d5d88e..a4096fb2c2 100644
--- a/src/client/app/common/scripts/collect-page-vars.ts
+++ b/src/client/app/common/scripts/collect-page-vars.ts
@@ -32,6 +32,12 @@ export function collectPageVars(content) {
 					type: 'number',
 					value: 0
 				});
+			} else if (x.type === 'radioButton') {
+				pageVars.push({
+					name: x.name,
+					type: 'string',
+					value: x.default || ''
+				});
 			} else if (x.children) {
 				collect(x.children);
 			}
diff --git a/src/client/app/common/views/components/page/page.block.vue b/src/client/app/common/views/components/page/page.block.vue
index 1c421fc2c0..56d1822013 100644
--- a/src/client/app/common/views/components/page/page.block.vue
+++ b/src/client/app/common/views/components/page/page.block.vue
@@ -16,10 +16,11 @@ import XIf from './page.if.vue';
 import XTextarea from './page.textarea.vue';
 import XPost from './page.post.vue';
 import XCounter from './page.counter.vue';
+import XRadioButton from './page.radio-button.vue';
 
 export default Vue.extend({
 	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton
 	},
 
 	props: {
diff --git a/src/client/app/common/views/components/page/page.radio-button.vue b/src/client/app/common/views/components/page/page.radio-button.vue
new file mode 100644
index 0000000000..27c11bebad
--- /dev/null
+++ b/src/client/app/common/views/components/page/page.radio-button.vue
@@ -0,0 +1,37 @@
+<template>
+<div>
+	<div>{{ script.interpolate(value.title) }}</div>
+	<ui-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</ui-radio>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.radio-button.vue
new file mode 100644
index 0000000000..3401c46f47
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -0,0 +1,53 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.radioButton') }}</template>
+
+	<section style="padding: 0 16px 16px 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._radioButton.name') }}</span></ui-input>
+		<ui-input v-model="value.title"><span>{{ $t('blocks._radioButton.title') }}</span></ui-input>
+		<ui-textarea v-model="values"><span>{{ $t('blocks._radioButton.values') }}</span></ui-textarea>
+		<ui-input v-model="value.default"><span>{{ $t('blocks._radioButton.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			values: '',
+			faBolt, faMagic
+		};
+	},
+
+	watch: {
+		values() {
+			Vue.set(this.value, 'values', this.values.split('\n'));
+		}
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.title == null) Vue.set(this.value, 'title', '');
+		if (this.value.values == null) Vue.set(this.value, 'values', []);
+		this.values = this.value.values.join('\n');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue b/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
index c5f3419e7b..4d7293231f 100644
--- a/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
+++ b/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
@@ -19,10 +19,11 @@ import XSwitch from './els/page-editor.el.switch.vue';
 import XIf from './els/page-editor.el.if.vue';
 import XPost from './els/page-editor.el.post.vue';
 import XCounter from './els/page-editor.el.counter.vue';
+import XRadioButton from './els/page-editor.el.radio-button.vue';
 
 export default Vue.extend({
 	components: {
-		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter
+		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton
 	},
 
 	props: {
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.vue b/src/client/app/common/views/pages/page-editor/page-editor.vue
index ade7d86991..0162915c38 100644
--- a/src/client/app/common/views/pages/page-editor/page-editor.vue
+++ b/src/client/app/common/views/pages/page-editor/page-editor.vue
@@ -342,6 +342,7 @@ export default Vue.extend({
 				label: this.$t('input-blocks'),
 				items: [
 					{ value: 'button', text: this.$t('blocks.button') },
+					{ value: 'radioButton', text: this.$t('blocks.radioButton') },
 					{ value: 'textInput', text: this.$t('blocks.textInput') },
 					{ value: 'textareaInput', text: this.$t('blocks.textareaInput') },
 					{ value: 'numberInput', text: this.$t('blocks.numberInput') },