From 2e8e5c2751aba86a03c564dc7aa2dc7e595caac5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 30 Apr 2019 06:40:02 +0900
Subject: Improve MisskeyPages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ifブロック を追加
* ボタンやスイッチなどのテキストに変数使えるようにした
---
 .../page-editor/els/page-editor.el.button.vue      |  54 +++++++++
 .../page-editor/els/page-editor.el.if.vue          | 113 +++++++++++++++++
 .../page-editor/els/page-editor.el.image.vue       |  78 ++++++++++++
 .../page-editor/els/page-editor.el.input.vue       |  61 ++++++++++
 .../page-editor/els/page-editor.el.section.vue     | 126 +++++++++++++++++++
 .../page-editor/els/page-editor.el.switch.vue      |  48 ++++++++
 .../page-editor/els/page-editor.el.text.vue        |  57 +++++++++
 .../components/page-editor/page-editor.block.vue   |  22 ++--
 .../components/page-editor/page-editor.button.vue  |  54 ---------
 .../components/page-editor/page-editor.image.vue   |  78 ------------
 .../components/page-editor/page-editor.input.vue   |  61 ----------
 .../components/page-editor/page-editor.section.vue | 133 ---------------------
 .../components/page-editor/page-editor.switch.vue  |  48 --------
 .../components/page-editor/page-editor.text.vue    |  57 ---------
 .../views/components/page-editor/page-editor.vue   |  62 ++++++----
 .../app/common/views/pages/page/page.block.vue     |   3 +-
 .../app/common/views/pages/page/page.button.vue    |   2 +-
 src/client/app/common/views/pages/page/page.if.vue |  30 +++++
 .../app/common/views/pages/page/page.input.vue     |   2 +-
 .../app/common/views/pages/page/page.switch.vue    |   2 +-
 src/client/app/common/views/pages/page/page.vue    |   1 +
 21 files changed, 625 insertions(+), 467 deletions(-)
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
 create mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.button.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.image.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.input.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.section.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.switch.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.text.vue
 create mode 100644 src/client/app/common/views/pages/page/page.if.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
new file mode 100644
index 0000000000..3e2d3fe19d
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
@@ -0,0 +1,54 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.button') }}</template>
+
+	<section class="xfhsjczc">
+		<ui-input v-model="value.text"><span>{{ $t('blocks._button.text') }}</span></ui-input>
+		<ui-select v-model="value.action">
+			<template #label>{{ $t('blocks._button.action') }}</template>
+			<option value="dialog">{{ $t('blocks._button._action.dialog') }}</option>
+			<option value="resetRandom">{{ $t('blocks._button._action.resetRandom') }}</option>
+		</ui-select>
+		<ui-input v-if="value.action === 'dialog'" v-model="value.content"><span>{{ $t('blocks._button._action._dialog.content') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt } 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 {
+			faBolt
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+		if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
+		if (this.value.content == null) Vue.set(this.value, 'content', null);
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.xfhsjczc
+	padding 0 16px 0 16px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
new file mode 100644
index 0000000000..46920fafdc
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
@@ -0,0 +1,113 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faQuestion"/> {{ $t('blocks.if') }}</template>
+	<template #func>
+		<button @click="add()">
+			<fa :icon="faPlus"/>
+		</button>
+	</template>
+
+	<section class="romcojzs">
+		<ui-select v-model="value.var">
+			<template #label>{{ $t('blocks._if.variable') }}</template>
+			<option v-for="v in aiScript.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
+			<optgroup :label="$t('script.pageVariables')">
+				<option v-for="v in aiScript.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
+			</optgroup>
+			<optgroup :label="$t('script.enviromentVariables')">
+				<option v-for="v in aiScript.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
+			</optgroup>
+		</ui-select>
+
+		<div class="children">
+			<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
+		</div>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+import { faPlus, faQuestion } 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
+	},
+
+	inject: ['getPageBlockList'],
+
+	props: {
+		value: {
+			required: true
+		},
+		aiScript: {
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			faPlus, faQuestion
+		};
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlock = require('../page-editor.block.vue').default
+	},
+
+	created() {
+		if (this.value.children == null) Vue.set(this.value, 'children', []);
+		if (this.value.var === undefined) Vue.set(this.value, 'var', null);
+	},
+
+	methods: {
+		async add() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('choose-block'),
+				select: {
+					items: this.getPageBlockList()
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			const id = uuid.v4();
+			this.value.children.push({ id, type });
+		},
+
+		updateItem(v) {
+			const i = this.value.children.findIndex(x => x.id === v.id);
+			const newValue = [
+				...this.value.children.slice(0, i),
+				v,
+				...this.value.children.slice(i + 1)
+			];
+			this.value.children = newValue;
+			this.$emit('input', this.value);
+		},
+
+		remove(el) {
+			const i = this.value.children.findIndex(x => x.id === el.id);
+			const newValue = [
+				...this.value.children.slice(0, i),
+				...this.value.children.slice(i + 1)
+			];
+			this.value.children = newValue;
+			this.$emit('input', this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.romcojzs
+	padding 0 16px 16px 16px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
new file mode 100644
index 0000000000..5ada8c77ba
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
@@ -0,0 +1,78 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faImage"/> {{ $t('blocks.image') }}</template>
+	<template #func>
+		<button @click="choose()">
+			<fa :icon="faFolderOpen"/>
+		</button>
+	</template>
+
+	<section class="oyyftmcf">
+		<x-file-thumbnail class="preview" v-if="file" :file="file" :detail="true" fit="contain" @click="choose()"/>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+import XFileThumbnail from '../../drive-file-thumbnail.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer, XFileThumbnail
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			file: null,
+			faPencilAlt, faImage, faFolderOpen
+		};
+	},
+
+	created() {
+		if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
+	},
+
+	mounted() {
+		if (this.value.fileId == null) {
+			this.choose();
+		} else {
+			this.$root.api('drive/files/show', {
+				fileId: this.value.fileId
+			}).then(file => {
+				this.file = file;
+			});
+		}
+	},
+
+	methods: {
+		async choose() {
+			this.$chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.file = file;
+				this.value.fileId = file.id;
+			});
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.oyyftmcf
+	> .preview
+		height 150px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue
new file mode 100644
index 0000000000..b2bcb33c3d
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue
@@ -0,0 +1,61 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.input') }}</template>
+
+	<section class="dnvasjon">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._input.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._input.text') }}</span></ui-input>
+		<ui-select v-model="value.inputType">
+			<template #label>{{ $t('blocks._input.inputType') }}</template>
+			<option value="string">{{ $t('blocks._input._inputType.string') }}</option>
+			<option value="number">{{ $t('blocks._input._inputType.number') }}</option>
+		</ui-select>
+		<ui-input v-model="value.default" :type="value.inputType"><span>{{ $t('blocks._input.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faSquareRootAlt } 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 {
+			faBolt, faSquareRootAlt
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.inputType == null) Vue.set(this.value, 'inputType', 'string');
+
+		this.$watch('value.inputType', t => {
+			if (this.value.default != null) {
+				if (t === 'number') this.value.default = parseInt(this.value.default, 10);
+				if (t === 'string') this.value.default = this.value.default.toString();
+			}
+		});
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.dnvasjon
+	padding 0 16px 0 16px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
new file mode 100644
index 0000000000..6133faf666
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
@@ -0,0 +1,126 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
+	<template #func>
+		<button @click="rename()">
+			<fa :icon="faPencilAlt"/>
+		</button>
+		<button @click="add()">
+			<fa :icon="faPlus"/>
+		</button>
+	</template>
+
+	<section class="ilrvjyvi">
+		<div class="children">
+			<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
+		</div>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	inject: ['getPageBlockList'],
+
+	props: {
+		value: {
+			required: true
+		},
+		aiScript: {
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			faStickyNote, faPlus, faPencilAlt
+		};
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlock = require('../page-editor.block.vue').default
+	},
+
+	created() {
+		if (this.value.title == null) Vue.set(this.value, 'title', null);
+		if (this.value.children == null) Vue.set(this.value, 'children', []);
+	},
+
+	mounted() {
+		if (this.value.title == null) {
+			this.rename();
+		}
+	},
+
+	methods: {
+		async rename() {
+			const { canceled, result: title } = await this.$root.dialog({
+				title: 'Enter title',
+				input: {
+					type: 'text',
+					default: this.value.title
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			this.value.title = title;
+		},
+
+		async add() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('choose-block'),
+				select: {
+					items: this.getPageBlockList()
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			const id = uuid.v4();
+			this.value.children.push({ id, type });
+		},
+
+		updateItem(v) {
+			const i = this.value.children.findIndex(x => x.id === v.id);
+			const newValue = [
+				...this.value.children.slice(0, i),
+				v,
+				...this.value.children.slice(i + 1)
+			];
+			this.value.children = newValue;
+			this.$emit('input', this.value);
+		},
+
+		remove(el) {
+			const i = this.value.children.findIndex(x => x.id === el.id);
+			const newValue = [
+				...this.value.children.slice(0, i),
+				...this.value.children.slice(i + 1)
+			];
+			this.value.children = newValue;
+			this.$emit('input', this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ilrvjyvi
+	> .children
+		padding 16px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
new file mode 100644
index 0000000000..3404404d99
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
@@ -0,0 +1,48 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.switch') }}</template>
+
+	<section class="kjuadyyj">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._switch.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._switch.text') }}</span></ui-input>
+		<ui-switch v-model="value.default"><span>{{ $t('blocks._switch.default') }}</span></ui-switch>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faSquareRootAlt } 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 {
+			faBolt, faSquareRootAlt
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.kjuadyyj
+	padding 0 16px 16px 16px
+
+</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
new file mode 100644
index 0000000000..b6b56a29fd
--- /dev/null
+++ b/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
@@ -0,0 +1,57 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.text') }}</template>
+
+	<section class="ihymsbbe">
+		<textarea v-model="value.text"></textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAlignLeft } 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 {
+			faAlignLeft,
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.ihymsbbe
+	> textarea
+		display block
+		-webkit-appearance none
+		-moz-appearance none
+		appearance none
+		width 100%
+		min-width 100%
+		min-height 150px
+		border none
+		box-shadow none
+		padding 16px
+		background transparent
+		color var(--text)
+</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.block.vue b/src/client/app/common/views/components/page-editor/page-editor.block.vue
index a3e1488d1b..86ee3f6888 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.block.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.block.vue
@@ -1,25 +1,29 @@
 <template>
-<component :is="'x-' + value.type" :value="value" @input="v => updateItem(v)" @remove="() => $emit('remove', value)" :key="value.id"/>
+<component :is="'x-' + value.type" :value="value" @input="v => updateItem(v)" @remove="() => $emit('remove', value)" :key="value.id" :ai-script="aiScript"/>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import XSection from './page-editor.section.vue';
-import XText from './page-editor.text.vue';
-import XImage from './page-editor.image.vue';
-import XButton from './page-editor.button.vue';
-import XInput from './page-editor.input.vue';
-import XSwitch from './page-editor.switch.vue';
+import XSection from './els/page-editor.el.section.vue';
+import XText from './els/page-editor.el.text.vue';
+import XImage from './els/page-editor.el.image.vue';
+import XButton from './els/page-editor.el.button.vue';
+import XInput from './els/page-editor.el.input.vue';
+import XSwitch from './els/page-editor.el.switch.vue';
+import XIf from './els/page-editor.el.if.vue';
 
 export default Vue.extend({
 	components: {
-		XSection, XText, XImage, XButton, XInput, XSwitch
+		XSection, XText, XImage, XButton, XInput, XSwitch, XIf
 	},
 
 	props: {
 		value: {
 			required: true
-		}
+		},
+		aiScript: {
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.button.vue b/src/client/app/common/views/components/page-editor/page-editor.button.vue
deleted file mode 100644
index d5fc243818..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.button.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.button') }}</template>
-
-	<section class="xfhsjczc">
-		<ui-input v-model="value.text"><span>{{ $t('blocks._button.text') }}</span></ui-input>
-		<ui-select v-model="value.action">
-			<template #label>{{ $t('blocks._button.action') }}</template>
-			<option value="dialog">{{ $t('blocks._button._action.dialog') }}</option>
-			<option value="resetRandom">{{ $t('blocks._button._action.resetRandom') }}</option>
-		</ui-select>
-		<ui-input v-if="value.action === 'dialog'" v-model="value.content"><span>{{ $t('blocks._button._action._dialog.content') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faBolt } from '@fortawesome/free-solid-svg-icons';
-import XContainer from './page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-		if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
-		if (this.value.content == null) Vue.set(this.value, 'content', null);
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.xfhsjczc
-	padding 0 16px 0 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.image.vue b/src/client/app/common/views/components/page-editor/page-editor.image.vue
deleted file mode 100644
index 0bc1816e8d..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.image.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faImage"/> {{ $t('blocks.image') }}</template>
-	<template #func>
-		<button @click="choose()">
-			<fa :icon="faFolderOpen"/>
-		</button>
-	</template>
-
-	<section class="oyyftmcf">
-		<x-file-thumbnail class="preview" v-if="file" :file="file" :detail="true" fit="contain" @click="choose()"/>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
-import XContainer from './page-editor.container.vue';
-import XFileThumbnail from '../drive-file-thumbnail.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer, XFileThumbnail
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			file: null,
-			faPencilAlt, faImage, faFolderOpen
-		};
-	},
-
-	created() {
-		if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
-	},
-
-	mounted() {
-		if (this.value.fileId == null) {
-			this.choose();
-		} else {
-			this.$root.api('drive/files/show', {
-				fileId: this.value.fileId
-			}).then(file => {
-				this.file = file;
-			});
-		}
-	},
-
-	methods: {
-		async choose() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.file = file;
-				this.value.fileId = file.id;
-			});
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.oyyftmcf
-	> .preview
-		height 150px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.input.vue b/src/client/app/common/views/components/page-editor/page-editor.input.vue
deleted file mode 100644
index 4e13840439..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.input.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.input') }}</template>
-
-	<section class="dnvasjon">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._input.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._input.text') }}</span></ui-input>
-		<ui-select v-model="value.inputType">
-			<template #label>{{ $t('blocks._input.inputType') }}</template>
-			<option value="string">{{ $t('blocks._input._inputType.string') }}</option>
-			<option value="number">{{ $t('blocks._input._inputType.number') }}</option>
-		</ui-select>
-		<ui-input v-model="value.default" :type="value.inputType"><span>{{ $t('blocks._input.default') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
-import XContainer from './page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faSquareRootAlt
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-		if (this.value.inputType == null) Vue.set(this.value, 'inputType', 'string');
-
-		this.$watch('value.inputType', t => {
-			if (this.value.default != null) {
-				if (t === 'number') this.value.default = parseInt(this.value.default, 10);
-				if (t === 'string') this.value.default = this.value.default.toString();
-			}
-		});
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.dnvasjon
-	padding 0 16px 0 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.section.vue b/src/client/app/common/views/components/page-editor/page-editor.section.vue
deleted file mode 100644
index d7a247b0b1..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.section.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
-	<template #func>
-		<button @click="rename()">
-			<fa :icon="faPencilAlt"/>
-		</button>
-		<button @click="add()">
-			<fa :icon="faPlus"/>
-		</button>
-	</template>
-
-	<section class="ilrvjyvi">
-		<div class="children">
-			<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id"/>
-		</div>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
-import XContainer from './page-editor.container.vue';
-import * as uuid from 'uuid';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faStickyNote, faPlus, faPencilAlt
-		};
-	},
-
-	beforeCreate() {
-		this.$options.components.XBlock = require('./page-editor.block.vue').default
-	},
-
-	created() {
-		if (this.value.title == null) Vue.set(this.value, 'title', null);
-		if (this.value.children == null) Vue.set(this.value, 'children', []);
-	},
-
-	mounted() {
-		if (this.value.title == null) {
-			this.rename();
-		}
-	},
-
-	methods: {
-		async rename() {
-			const { canceled, result: title } = await this.$root.dialog({
-				title: 'Enter title',
-				input: {
-					type: 'text',
-					default: this.value.title
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.value.title = title;
-		},
-
-		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
-				type: null,
-				title: this.$t('choose-block'),
-				select: {
-					items: [{
-						value: 'section', text: this.$t('blocks.section')
-					}, {
-						value: 'text', text: this.$t('blocks.text')
-					}, {
-						value: 'image', text: this.$t('blocks.image')
-					}, {
-						value: 'button', text: this.$t('blocks.button')
-					}, {
-						value: 'input', text: this.$t('blocks.input')
-					}, {
-						value: 'switch', text: this.$t('blocks.switch')
-					}]
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			const id = uuid.v4();
-			this.value.children.push({ id, type });
-		},
-
-		updateItem(v) {
-			const i = this.value.children.findIndex(x => x.id === v.id);
-			const newValue = [
-				...this.value.children.slice(0, i),
-				v,
-				...this.value.children.slice(i + 1)
-			];
-			this.value.children = newValue;
-			this.$emit('input', this.value);
-		},
-
-		remove(el) {
-			const i = this.value.children.findIndex(x => x.id === el.id);
-			const newValue = [
-				...this.value.children.slice(0, i),
-				...this.value.children.slice(i + 1)
-			];
-			this.value.children = newValue;
-			this.$emit('input', this.value);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.ilrvjyvi
-	> .children
-		padding 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.switch.vue b/src/client/app/common/views/components/page-editor/page-editor.switch.vue
deleted file mode 100644
index a9cfa2844f..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.switch.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.switch') }}</template>
-
-	<section class="kjuadyyj">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._switch.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._switch.text') }}</span></ui-input>
-		<ui-switch v-model="value.default"><span>{{ $t('blocks._switch.default') }}</span></ui-switch>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
-import XContainer from './page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faSquareRootAlt
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.kjuadyyj
-	padding 0 16px 16px 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.text.vue b/src/client/app/common/views/components/page-editor/page-editor.text.vue
deleted file mode 100644
index 7368931b2f..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.text.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.text') }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
-import XContainer from './page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faAlignLeft,
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.ihymsbbe
-	> textarea
-		display block
-		-webkit-appearance none
-		-moz-appearance none
-		appearance none
-		width 100%
-		min-width 100%
-		min-height 150px
-		border none
-		box-shadow none
-		padding 16px
-		background transparent
-		color var(--text)
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.vue b/src/client/app/common/views/components/page-editor/page-editor.vue
index 8b25828515..f39985952b 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.vue
@@ -2,16 +2,16 @@
 <div>
 	<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
 		<header>
-			<div class="title"><fa :icon="faStickyNote"/> {{ pageId ? $t('edit-page') : $t('new-page') }}</div>
+			<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
 			<div class="buttons">
-				<button @click="del()"><fa :icon="faTrashAlt"/></button>
+				<button @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
 				<button @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
-				<button @click="save()"><fa :icon="faSave"/></button>
+				<button @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
 			</div>
 		</header>
 
 		<section>
-			<a class="view" v-if="pageId" :href="`/@${ $store.state.i.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
+			<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
 
 			<ui-input v-model="title">
 				<span>{{ $t('title') }}</span>
@@ -23,7 +23,7 @@
 				</ui-input>
 
 				<ui-input v-model="name">
-					<template #prefix>{{ url }}/@{{ $store.state.i.username }}/pages/</template>
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
 					<span>{{ $t('url') }}</span>
 				</ui-input>
 
@@ -45,10 +45,10 @@
 			</template>
 
 			<div class="content" v-for="child in content">
-				<x-block :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id"/>
+				<x-block :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
 			</div>
 
-			<ui-button @click="add()"><fa :icon="faPlus"/></ui-button>
+			<ui-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
 		</section>
 	</div>
 
@@ -70,7 +70,7 @@
 				</template>
 			</div>
 
-			<ui-button @click="addVariable()" class="add"><fa :icon="faPlus"/></ui-button>
+			<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
 
 			<ui-info><span v-html="$t('variables-info')"></span><a @click="() => moreDetails = true" style="display:block;">{{ $t('more-details') }}</a></ui-info>
 
@@ -106,11 +106,17 @@ export default Vue.extend({
 		page: {
 			type: String,
 			required: false
-		}
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	data() {
 		return {
+			author: this.$store.state.i,
 			pageId: null,
 			currentName: null,
 			title: '',
@@ -157,6 +163,7 @@ export default Vue.extend({
 			this.$root.api('pages/show', {
 				pageId: this.page,
 			}).then(page => {
+				this.author = page.user;
 				this.pageId = page.id;
 				this.title = page.title;
 				this.name = page.name;
@@ -180,7 +187,9 @@ export default Vue.extend({
 
 	provide() {
 		return {
-			getScriptBlockList: this.getScriptBlockList
+			readonly: this.readonly,
+			getScriptBlockList: this.getScriptBlockList,
+			getPageBlockList: this.getPageBlockList
 		}
 	},
 
@@ -250,19 +259,7 @@ export default Vue.extend({
 				type: null,
 				title: this.$t('choose-block'),
 				select: {
-					items: [{
-						value: 'section', text: this.$t('blocks.section')
-					}, {
-						value: 'text', text: this.$t('blocks.text')
-					}, {
-						value: 'image', text: this.$t('blocks.image')
-					}, {
-						value: 'button', text: this.$t('blocks.button')
-					}, {
-						value: 'input', text: this.$t('blocks.input')
-					}, {
-						value: 'switch', text: this.$t('blocks.switch')
-					}]
+					items: this.getPageBlockList()
 				},
 				showCancelButton: true
 			});
@@ -324,6 +321,24 @@ export default Vue.extend({
 			this.variables = newValue;
 		},
 
+		getPageBlockList() {
+			return [{
+				value: 'section', text: this.$t('blocks.section')
+			}, {
+				value: 'text', text: this.$t('blocks.text')
+			}, {
+				value: 'image', text: this.$t('blocks.image')
+			}, {
+				value: 'button', text: this.$t('blocks.button')
+			}, {
+				value: 'input', text: this.$t('blocks.input')
+			}, {
+				value: 'switch', text: this.$t('blocks.switch')
+			}, {
+				value: 'if', text: this.$t('blocks.if')
+			}];
+		},
+
 		getScriptBlockList(type: string = null) {
 			const list = [];
 
@@ -436,6 +451,7 @@ export default Vue.extend({
 		> .view
 			display inline-block
 			margin 16px 0 0 0
+			font-size 14px
 
 		> .content
 			margin-bottom 16px
diff --git a/src/client/app/common/views/pages/page/page.block.vue b/src/client/app/common/views/pages/page/page.block.vue
index 48a89f9de7..e3a758ed4e 100644
--- a/src/client/app/common/views/pages/page/page.block.vue
+++ b/src/client/app/common/views/pages/page/page.block.vue
@@ -10,10 +10,11 @@ import XImage from './page.image.vue';
 import XButton from './page.button.vue';
 import XInput from './page.input.vue';
 import XSwitch from './page.switch.vue';
+import XIf from './page.if.vue';
 
 export default Vue.extend({
 	components: {
-		XText, XSection, XImage, XButton, XInput, XSwitch
+		XText, XSection, XImage, XButton, XInput, XSwitch, XIf
 	},
 
 	props: {
diff --git a/src/client/app/common/views/pages/page/page.button.vue b/src/client/app/common/views/pages/page/page.button.vue
index 5063d27122..b77d856d5d 100644
--- a/src/client/app/common/views/pages/page/page.button.vue
+++ b/src/client/app/common/views/pages/page/page.button.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<ui-button class="kudkigyw" @click="click()">{{ value.text }}</ui-button>
+	<ui-button class="kudkigyw" @click="click()">{{ script.interpolate(value.text) }}</ui-button>
 </div>
 </template>
 
diff --git a/src/client/app/common/views/pages/page/page.if.vue b/src/client/app/common/views/pages/page/page.if.vue
new file mode 100644
index 0000000000..9dbeaf64fb
--- /dev/null
+++ b/src/client/app/common/views/pages/page/page.if.vue
@@ -0,0 +1,30 @@
+<template>
+<div v-show="script.vars.find(x => x.name === value.var).value">
+	<x-block v-for="child in value.children" :value="child" :page="page" :script="script" :key="child.id" :h="h"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		},
+		page: {
+			required: true
+		},
+		h: {
+			required: true
+		}
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlock = require('./page.block.vue').default
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page/page.input.vue b/src/client/app/common/views/pages/page/page.input.vue
index cda5550337..9f4cfd91f3 100644
--- a/src/client/app/common/views/pages/page/page.input.vue
+++ b/src/client/app/common/views/pages/page/page.input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ value.text }}</ui-input>
+	<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ script.interpolate(value.text) }}</ui-input>
 </div>
 </template>
 
diff --git a/src/client/app/common/views/pages/page/page.switch.vue b/src/client/app/common/views/pages/page/page.switch.vue
index 962ab84bb5..d36ecbfba1 100644
--- a/src/client/app/common/views/pages/page/page.switch.vue
+++ b/src/client/app/common/views/pages/page/page.switch.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="hkcxmtwj">
-	<ui-switch v-model="v">{{ value.text }}</ui-switch>
+	<ui-switch v-model="v">{{ script.interpolate(value.text) }}</ui-switch>
 </div>
 </template>
 
diff --git a/src/client/app/common/views/pages/page/page.vue b/src/client/app/common/views/pages/page/page.vue
index e7e8f76d53..7cbd3ed81b 100644
--- a/src/client/app/common/views/pages/page/page.vue
+++ b/src/client/app/common/views/pages/page/page.vue
@@ -38,6 +38,7 @@ class Script {
 	}
 
 	public interpolate(str: string) {
+		if (str == null) return null;
 		return str.replace(/\{(.+?)\}/g, match => {
 			const v = this.vars.find(x => x.name === match.slice(1, -1).trim()).value;
 			return v == null ? 'NULL' : v.toString();
-- 
cgit v1.2.3-freya