refactor(ui): remaining realtime pages
This commit is contained in:
liyasthomas
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="response">
|
||||
<RealtimeLog :title="$t('log')" :log="log" />
|
||||
</AppSection>
|
||||
@@ -51,49 +51,75 @@
|
||||
max-size="35"
|
||||
size="25"
|
||||
min-size="20"
|
||||
class="!overflow-auto hide-scrollbar"
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>
|
||||
<input
|
||||
id="pub_topic"
|
||||
v-model="pub_topic"
|
||||
class="input"
|
||||
type="text"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<label for="mqtt-message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="mqtt-message"
|
||||
v-model="msg"
|
||||
type="text"
|
||||
spellcheck="false"
|
||||
class="border-dashed border-divider input md:border-l"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<label for="pub_topic" class="font-semibold">
|
||||
{{ $t("mqtt_topic") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex px-4">
|
||||
<input
|
||||
id="pub_topic"
|
||||
v-model="pub_topic"
|
||||
class="input"
|
||||
:placeholder="$t('topic_name')"
|
||||
type="text"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="bg-primary flex flex-1 p-4 items-center justify-between">
|
||||
<label for="mqtt-message" class="font-semibold">{{
|
||||
$t("communication")
|
||||
}}</label>
|
||||
</div>
|
||||
<div class="flex px-4">
|
||||
<input
|
||||
id="mqtt-message"
|
||||
v-model="msg"
|
||||
class="input !rounded-r-none"
|
||||
type="text"
|
||||
:placeholder="$t('message')"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
id="publish"
|
||||
name="get"
|
||||
class="rounded-l-none"
|
||||
:disabled="!canpublish"
|
||||
icon="send"
|
||||
:label="$t('mqtt_publish')"
|
||||
@click.native="publish"
|
||||
/>
|
||||
</div>
|
||||
<label for="sub_topic">{{ $t("mqtt_topic") }}</label>
|
||||
<input
|
||||
id="sub_topic"
|
||||
v-model="sub_topic"
|
||||
type="text"
|
||||
spellcheck="false"
|
||||
class="input md:rounded-bl-lg"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
<div
|
||||
class="
|
||||
border-t border-dividerLight
|
||||
flex flex-col flex-1
|
||||
mt-4
|
||||
p-4
|
||||
inline-flex
|
||||
"
|
||||
>
|
||||
<label for="sub_topic" class="font-semibold">{{
|
||||
$t("mqtt_topic")
|
||||
}}</label>
|
||||
</div>
|
||||
<div class="flex px-4">
|
||||
<input
|
||||
id="sub_topic"
|
||||
v-model="sub_topic"
|
||||
type="text"
|
||||
:placeholder="$t('topic_name')"
|
||||
spellcheck="false"
|
||||
class="input !rounded-r-none"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
id="subscribe"
|
||||
name="get"
|
||||
:disabled="!cansubscribe"
|
||||
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
|
||||
class="rounded-l-none"
|
||||
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
|
||||
:label="
|
||||
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
@@ -59,7 +59,7 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="response">
|
||||
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
||||
</AppSection>
|
||||
@@ -71,63 +71,73 @@
|
||||
max-size="35"
|
||||
size="25"
|
||||
min-size="20"
|
||||
class="!overflow-auto hide-scrollbar"
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<label for="event_name">{{ $t("event_name") }}</label>
|
||||
<input
|
||||
id="event_name"
|
||||
v-model="communication.eventName"
|
||||
class="input"
|
||||
name="event_name"
|
||||
type="text"
|
||||
:readonly="!connectionState"
|
||||
/>
|
||||
<div class="flex flex-1">
|
||||
<label>{{ $t("message") }}s</label>
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<label for="events" class="font-semibold">
|
||||
{{ $t("events") }}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-for="(input, index) of communication.inputs"
|
||||
:key="`input-${index}`"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
class="
|
||||
divide-y divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
md:divide-x md:divide-y-0
|
||||
"
|
||||
>
|
||||
<div class="flex px-4">
|
||||
<input
|
||||
v-model="communication.inputs[index]"
|
||||
id="event_name"
|
||||
v-model="communication.eventName"
|
||||
class="input"
|
||||
name="message"
|
||||
name="event_name"
|
||||
:placeholder="$t('event_name')"
|
||||
type="text"
|
||||
:readonly="!connectionState"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
:disabled="!connectionState"
|
||||
/>
|
||||
<div v-if="index + 1 !== communication.inputs.length">
|
||||
</div>
|
||||
<div class="bg-primary flex flex-1 p-4 items-center justify-between">
|
||||
<label class="font-semibold">{{ $t("communication") }}</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
:title="$t('add_new')"
|
||||
icon="add"
|
||||
@click.native="addCommunicationInput"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="index + 1 === communication.inputs.length">
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
icon="send"
|
||||
:label="$t('send')"
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 px-4">
|
||||
<div
|
||||
v-for="(input, index) of communication.inputs"
|
||||
:key="`input-${index}`"
|
||||
>
|
||||
<div class="flex">
|
||||
<input
|
||||
v-model="communication.inputs[index]"
|
||||
class="input !rounded-r-none"
|
||||
name="message"
|
||||
:placeholder="$t('message_count', { count: index + 1 })"
|
||||
type="text"
|
||||
:disabled="!connectionState"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="index + 1 !== communication.inputs.length"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="delete"
|
||||
class="rounded-l-none"
|
||||
color="red"
|
||||
outline
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
v-if="index + 1 === communication.inputs.length"
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
class="rounded-l-none"
|
||||
icon="send"
|
||||
:label="$t('send')"
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('add_new')"
|
||||
@click.native="addCommunicationInput"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</AppSection>
|
||||
</Pane>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="response">
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@@ -1,42 +1,44 @@
|
||||
<template>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
<input
|
||||
id="websocket-url"
|
||||
v-model="url"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
font-semibold font-mono
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-1
|
||||
px-4
|
||||
transition
|
||||
truncate
|
||||
focus:outline-none focus:border-accent
|
||||
"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
:placeholder="$t('url')"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="rounded-l-none"
|
||||
name="connect"
|
||||
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
||||
:label="!connectionState ? $t('connect') : $t('disconnect')"
|
||||
reverse
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="request">
|
||||
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||
<div class="flex-1 inline-flex">
|
||||
<input
|
||||
id="websocket-url"
|
||||
v-model="url"
|
||||
class="
|
||||
bg-primaryLight
|
||||
border border-divider
|
||||
rounded-l
|
||||
font-semibold font-mono
|
||||
text-secondaryDark
|
||||
w-full
|
||||
py-1
|
||||
px-4
|
||||
transition
|
||||
truncate
|
||||
focus:outline-none focus:border-accent
|
||||
"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
:placeholder="$t('url')"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="rounded-l-none"
|
||||
name="connect"
|
||||
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
||||
:label="!connectionState ? $t('connect') : $t('disconnect')"
|
||||
reverse
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
<div
|
||||
@@ -45,7 +47,7 @@
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-68px
|
||||
top-16
|
||||
z-10
|
||||
sticky
|
||||
items-center
|
||||
@@ -131,7 +133,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</Pane>
|
||||
<Pane class="!overflow-auto hide-scrollbar">
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="response">
|
||||
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
||||
</AppSection>
|
||||
@@ -143,31 +145,32 @@
|
||||
max-size="35"
|
||||
size="25"
|
||||
min-size="20"
|
||||
class="!overflow-auto hide-scrollbar"
|
||||
class="hide-scrollbar !overflow-auto"
|
||||
>
|
||||
<AppSection label="messages">
|
||||
<div class="flex flex-col flex-1 p-4 inline-flex">
|
||||
<label for="websocket-message" class="font-semibold pb-4">
|
||||
{{ $t("message") }}
|
||||
<label for="websocket-message" class="font-semibold">
|
||||
{{ $t("communication") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex px-4">
|
||||
<input
|
||||
id="websocket-message"
|
||||
v-model="communication.input"
|
||||
name="message"
|
||||
type="text"
|
||||
:readonly="!connectionState"
|
||||
class="input"
|
||||
:disabled="!connectionState"
|
||||
:placeholder="$t('message')"
|
||||
class="input !rounded-r-none"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
@keyup.up="connectionState ? walkHistory('up') : null"
|
||||
@keyup.down="connectionState ? walkHistory('down') : null"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
<ButtonPrimary
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
|
||||
class="rounded-l-none"
|
||||
icon="send"
|
||||
:label="$t('send')"
|
||||
@click.native="sendMessage"
|
||||
|
||||
Reference in New Issue
Block a user