wip

2 files changed, 104 insertions, 95 deletions

diff --git a/src/web/app/desktop/-tags/home-widgets/access-log.tag b/src/web/app/desktop/-tags/home-widgets/access-log.tag
deleted file mode 100644
index fea18299e8..0000000000
--- a/src/web/app/desktop/-tags/home-widgets/access-log.tag
+++ /dev/null
@@ -1,95 +0,0 @@
-<mk-access-log-home-widget>
-	<template v-if="data.design == 0">
-		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
-	</template>
-	<div ref="log">
-		<p each={ requests }>
-			<span class="ip" style="color:{ fg }; background:{ bg }">{ ip }</span>
-			<span>{ method }</span>
-			<span>{ path }</span>
-		</p>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			background #fff
-			border solid 1px rgba(0, 0, 0, 0.075)
-			border-radius 6px
-
-			> .title
-				z-index 1
-				margin 0
-				padding 0 16px
-				line-height 42px
-				font-size 0.9em
-				font-weight bold
-				color #888
-				box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-				> [data-fa]
-					margin-right 4px
-
-			> div
-				max-height 250px
-				overflow auto
-
-				> p
-					margin 0
-					padding 8px
-					font-size 0.8em
-					color #555
-
-					&:nth-child(odd)
-						background rgba(0, 0, 0, 0.025)
-
-					> .ip
-						margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		import seedrandom from 'seedrandom';
-
-		this.data = {
-			design: 0
-		};
-
-		this.mixin('widget');
-
-		this.mixin('requests-stream');
-		this.connection = this.requestsStream.getConnection();
-		this.connectionId = this.requestsStream.use();
-
-		this.requests = [];
-
-		this.on('mount', () => {
-			this.connection.on('request', this.onRequest);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('request', this.onRequest);
-			this.requestsStream.dispose(this.connectionId);
-		});
-
-		this.onRequest = request => {
-			const random = seedrandom(request.ip);
-			const r = Math.floor(random() * 255);
-			const g = Math.floor(random() * 255);
-			const b = Math.floor(random() * 255);
-			const luma = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); // SMPTE C, Rec. 709 weightings
-			request.bg = `rgb(${r}, ${g}, ${b})`;
-			request.fg = luma >= 165 ? '#000' : '#fff';
-
-			this.requests.push(request);
-			if (this.requests.length > 30) this.requests.shift();
-			this.update();
-
-			this.$refs.log.scrollTop = this.$refs.log.scrollHeight;
-		};
-
-		this.func = () => {
-			if (++this.data.design == 2) this.data.design = 0;
-			this.save();
-		};
-	</script>
-</mk-access-log-home-widget>
diff --git a/src/web/app/desktop/views/components/widgets/access-log.vue b/src/web/app/desktop/views/components/widgets/access-log.vue
new file mode 100644
index 0000000000..d9f85e722f
--- /dev/null
+++ b/src/web/app/desktop/views/components/widgets/access-log.vue
@@ -0,0 +1,104 @@
+<template>
+<div class="mkw-access-log">
+	<template v-if="props.design == 0">
+		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
+	</template>
+	<div ref="log">
+		<p v-for="req in requests">
+			<span class="ip" :style="`color:${ req.fg }; background:${ req.bg }`">{{ req.ip }}</span>
+			<span>{{ req.method }}</span>
+			<span>{{ req.path }}</span>
+		</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../../common/define-widget';
+import seedrandom from 'seedrandom';
+
+export default define({
+	name: 'broadcast',
+	props: () => ({
+		design: 0
+	})
+}).extend({
+	data() {
+		return {
+			requests: [],
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.requestsStream.getConnection();
+		this.connectionId = (this as any).os.streams.requestsStream.use();
+		this.connection.on('request', this.onRequest);
+	},
+	beforeDestroy() {
+		this.connection.off('request', this.onRequest);
+		(this as any).os.streams.requestsStream.dispose(this.connectionId);
+	},
+	methods: {
+		onRequest(request) {
+			const random = seedrandom(request.ip);
+			const r = Math.floor(random() * 255);
+			const g = Math.floor(random() * 255);
+			const b = Math.floor(random() * 255);
+			const luma = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); // SMPTE C, Rec. 709 weightings
+			request.bg = `rgb(${r}, ${g}, ${b})`;
+			request.fg = luma >= 165 ? '#000' : '#fff';
+
+			this.requests.push(request);
+			if (this.requests.length > 30) this.requests.shift();
+
+			(this.$refs.log as any).scrollTop = (this.$refs.log as any).scrollHeight;
+		},
+		func() {
+			if (this.props.design == 1) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-access-log
+	overflow hidden
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> div
+		max-height 250px
+		overflow auto
+
+		> p
+			margin 0
+			padding 8px
+			font-size 0.8em
+			color #555
+
+			&:nth-child(odd)
+				background rgba(0, 0, 0, 0.025)
+
+			> .ip
+				margin-right 4px
+
+</style>