diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue index c5f9510f38..c7f91d082c 100644 --- a/src/client/components/taskmanager.vue +++ b/src/client/components/taskmanager.vue @@ -4,7 +4,20 @@ <Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager </template> <div class="qljqmnzj"> - <MkTab v-model:value="tab" :items="[{ label: 'Stream', value: 'stream', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/> + <MkTab v-model:value="tab" :items="[{ label: 'Windows', value: 'windows', }, { label: 'Stream', value: 'stream', }, { label: 'Stream (Pool)', value: 'streamPool', }, { label: 'API', value: 'api', }]" style="border-bottom: solid 1px var(--divider);"/> + + <div v-if="tab === 'windows'" class="windows"> + <div class="header"> + <div>#ID</div> + <div>Component</div> + <div>Action</div> + </div> + <div v-for="p in popups"> + <div>#{{ p.id }}</div> + <div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div> + <div><button class="_textButton" @click="killPopup(p)">Kill</button></div> + </div> + </div> <div v-if="tab === 'stream'" class="stream"> <div class="header"> <div>#ID</div> @@ -22,12 +35,24 @@ <div>{{ c.out }}</div> </div> </div> + <div v-if="tab === 'streamPool'" class="streamPool"> + <div class="header"> + <div>#ID</div> + <div>Ch</div> + <div>Users</div> + </div> + <div v-for="p in pools"> + <div>#{{ p.id }}</div> + <div>{{ p.channel }}</div> + <div>{{ p.users }}</div> + </div> + </div> </div> </XWindow> </template> <script lang="ts"> -import { defineComponent, markRaw, onBeforeUnmount, ref } from 'vue'; +import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue'; import { faTerminal } from '@fortawesome/free-solid-svg-icons'; import XWindow from '@/components/ui/window.vue'; import MkTab from '@/components/tab.vue'; @@ -47,24 +72,34 @@ export default defineComponent({ emits: ['closed'], setup() { - const connections = ref([]); + const connections = shallowRef([]); + const pools = shallowRef([]); const refreshStreamInfo = () => { - console.log(os.stream.sharedConnections, os.stream.nonSharedConnections); - connections.value = markRaw(os.stream.sharedConnections.map(c => ({ + console.log(os.stream.sharedConnectionPools, os.stream.sharedConnections, os.stream.nonSharedConnections); + const conn = os.stream.sharedConnections.map(c => ({ id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount, })).concat(os.stream.nonSharedConnections.map(c => ({ id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount, - })))); - connections.value.sort((a, b) => (a.id > b.id) ? 1 : -1); + }))); + conn.sort((a, b) => (a.id > b.id) ? 1 : -1); + connections.value = conn; + pools.value = os.stream.sharedConnectionPools; }; const interval = setInterval(refreshStreamInfo, 1000); onBeforeUnmount(() => { clearInterval(interval); }); + const killPopup = p => { + os.popups.value = os.popups.value.filter(x => x !== p); + }; + return { - tab: 'stream', + tab: ref('stream'), + popups: os.popups, connections, + pools, + killPopup, faTerminal, }; }, @@ -73,7 +108,9 @@ export default defineComponent({ <style lang="scss" scoped> .qljqmnzj { - > .stream { + > .windows, + > .stream, + > .streamPool { display: table; width: 100%; padding: 16px; diff --git a/src/client/init.ts b/src/client/init.ts index 070deec0c5..f93252e793 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -252,7 +252,7 @@ if (store.getters.isSignedIn) { } } - const main = stream.useSharedConnection('main', 'system'); + const main = stream.useSharedConnection('main', 'System'); // 自分の情報が更新されたとき main.on('meUpdated', i => { diff --git a/src/client/os.ts b/src/client/os.ts index d26f2676d0..86fdd21b61 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -127,6 +127,7 @@ function isModule(x: any): x is typeof import('*.vue') { return x.default != null; } +let popupIdCount = 0; export const popups = ref([]) as Ref<{ id: any; component: any; @@ -137,7 +138,7 @@ export function popup(component: Component | typeof import('*.vue'), props: Reco if (isModule(component)) component = component.default; markRaw(component); - const id = Math.random().toString(); // TODO: uuidとか使う + const id = ++popupIdCount; const dispose = () => { if (_DEV_) console.log('os:popup close', id, component, props, events); // このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ? diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue index b2097be493..ce54a6672d 100644 --- a/src/client/ui/deck.vue +++ b/src/client/ui/deck.vue @@ -109,7 +109,7 @@ export default defineComponent({ window.addEventListener('wheel', this.onWheel); if (this.$store.getters.isSignedIn) { - this.connection = os.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main', 'UI'); this.connection.on('notification', this.onNotification); } }, diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index caf5052a95..7127d8f12c 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -141,7 +141,7 @@ export default defineComponent({ created() { document.documentElement.style.overflowY = 'scroll'; - this.connection = os.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main', 'UI'); this.connection.on('notification', this.onNotification); if (this.$store.state.deviceUser.widgets.length === 0) { diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue index 9c351f67e1..dbf9430e78 100644 --- a/src/client/ui/zen.vue +++ b/src/client/ui/zen.vue @@ -71,7 +71,7 @@ export default defineComponent({ created() { document.documentElement.style.overflowY = 'scroll'; - this.connection = os.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main', 'UI'); this.connection.on('notification', this.onNotification); },