refactor(ui): more pages
This commit is contained in:
liyasthomas
@@ -13,7 +13,7 @@
|
|||||||
justify-between
|
justify-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<label for="paramList" class="font-semibold text-xs">
|
<label class="font-semibold text-xs">
|
||||||
{{ $t("parameter_list") }}
|
{{ $t("parameter_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,6 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<label for="log">{{ title }}</label>
|
<div
|
||||||
|
class="
|
||||||
|
bg-primary
|
||||||
|
border-b border-dividerLight
|
||||||
|
flex flex-1
|
||||||
|
pl-4
|
||||||
|
top-0
|
||||||
|
z-10
|
||||||
|
sticky
|
||||||
|
items-center
|
||||||
|
justify-between
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<label for="log" class="font-semibold text-xs py-2">{{ title }}</label>
|
||||||
|
</div>
|
||||||
<div ref="log" name="log" class="realtime-log">
|
<div ref="log" name="log" class="realtime-log">
|
||||||
<span v-if="log">
|
<span v-if="log">
|
||||||
<span
|
<span
|
||||||
|
|||||||
@@ -1,130 +1,110 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Splitpanes vertical :dbl-click-splitter="false">
|
||||||
<Splitpanes vertical :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<AppSection label="request">
|
||||||
<AppSection label="request">
|
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||||
<ul>
|
<div class="flex-1 inline-flex">
|
||||||
<li>
|
<input
|
||||||
<label for="mqtt-url">{{ $t("url") }}</label>
|
id="mqtt-url"
|
||||||
<input
|
v-model="url"
|
||||||
id="mqtt-url"
|
type="url"
|
||||||
v-model="url"
|
spellcheck="false"
|
||||||
type="url"
|
|
||||||
spellcheck="false"
|
|
||||||
class="input md:rounded-bl-lg"
|
|
||||||
:placeholder="$t('url')"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
id="connect"
|
|
||||||
:disabled="!validUrl"
|
|
||||||
class="
|
|
||||||
rounded-b-lg
|
|
||||||
button
|
|
||||||
md:rounded-bl-none md:rounded-br-lg
|
|
||||||
"
|
|
||||||
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
|
||||||
:label="
|
|
||||||
connectionState ? $t('disconnect') : $t('connect')
|
|
||||||
"
|
|
||||||
reverse
|
|
||||||
@click.native="toggleConnection"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</AppSection>
|
|
||||||
</Pane>
|
|
||||||
<Pane class="overflow-auto">
|
|
||||||
<AppSection label="response">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<RealtimeLog :title="$t('log')" :log="log" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</AppSection>
|
|
||||||
</Pane>
|
|
||||||
</Splitpanes>
|
|
||||||
</Pane>
|
|
||||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
|
||||||
<AppSection label="messages">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>
|
|
||||||
<input
|
|
||||||
id="pub_topic"
|
|
||||||
v-model="pub_topic"
|
|
||||||
class="input"
|
|
||||||
type="text"
|
|
||||||
spellcheck="false"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
id="publish"
|
|
||||||
class="button"
|
|
||||||
name="get"
|
|
||||||
:disabled="!canpublish"
|
|
||||||
icon="send"
|
|
||||||
:label="$t('mqtt_publish')"
|
|
||||||
@click.native="publish"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
id="subscribe"
|
|
||||||
name="get"
|
|
||||||
:disabled="!cansubscribe"
|
|
||||||
class="
|
class="
|
||||||
rounded-b-lg
|
bg-primaryLight
|
||||||
button
|
border border-divider
|
||||||
md:rounded-bl-none md:rounded-br-lg
|
rounded-l-lg
|
||||||
|
font-mono
|
||||||
|
text-secondaryDark
|
||||||
|
w-full
|
||||||
|
py-1
|
||||||
|
px-4
|
||||||
|
transition
|
||||||
|
truncate
|
||||||
|
focus:outline-none focus:border-accent
|
||||||
"
|
"
|
||||||
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
|
:placeholder="$t('url')"
|
||||||
:label="
|
|
||||||
subscriptionState
|
|
||||||
? $t('mqtt_unsubscribe')
|
|
||||||
: $t('mqtt_subscribe')
|
|
||||||
"
|
|
||||||
reverse
|
|
||||||
@click.native="toggleSubscription"
|
|
||||||
/>
|
/>
|
||||||
</li>
|
<ButtonPrimary
|
||||||
|
id="connect"
|
||||||
|
:disabled="!validUrl"
|
||||||
|
class="rounded-l-none"
|
||||||
|
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
||||||
|
:label="connectionState ? $t('disconnect') : $t('connect')"
|
||||||
|
reverse
|
||||||
|
@click.native="toggleConnection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</AppSection>
|
||||||
</AppSection>
|
</Pane>
|
||||||
</Pane>
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
</Splitpanes>
|
<AppSection label="response">
|
||||||
</div>
|
<RealtimeLog :title="$t('log')" :log="log" />
|
||||||
|
</AppSection>
|
||||||
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
|
</Pane>
|
||||||
|
<Pane
|
||||||
|
max-size="30"
|
||||||
|
size="25"
|
||||||
|
min-size="20"
|
||||||
|
class="overflow-auto hide-scrollbar"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
id="publish"
|
||||||
|
class="button"
|
||||||
|
name="get"
|
||||||
|
: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
|
||||||
|
id="subscribe"
|
||||||
|
name="get"
|
||||||
|
:disabled="!cansubscribe"
|
||||||
|
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
|
||||||
|
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
|
||||||
|
:label="
|
||||||
|
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
|
||||||
|
"
|
||||||
|
reverse
|
||||||
|
@click.native="toggleSubscription"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AppSection>
|
||||||
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,148 +1,136 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Splitpanes vertical :dbl-click-splitter="false">
|
||||||
<Splitpanes vertical :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<AppSection label="request">
|
||||||
<AppSection label="request">
|
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||||
<ul>
|
<div class="flex-1 inline-flex">
|
||||||
<li>
|
<input
|
||||||
<label for="socketio-url">{{ $t("url") }}</label>
|
id="socketio-url"
|
||||||
<input
|
v-model="url"
|
||||||
id="socketio-url"
|
type="url"
|
||||||
v-model="url"
|
spellcheck="false"
|
||||||
type="url"
|
:class="{ error: !urlValid }"
|
||||||
spellcheck="false"
|
class="
|
||||||
:class="{ error: !urlValid }"
|
bg-primaryLight
|
||||||
class="input md:rounded-bl-lg"
|
border border-divider
|
||||||
:placeholder="$t('url')"
|
rounded-l-lg
|
||||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
font-mono
|
||||||
/>
|
text-secondaryDark
|
||||||
</li>
|
w-full
|
||||||
<div>
|
py-1
|
||||||
<li>
|
px-4
|
||||||
<label for="socketio-path">{{ $t("path") }}</label>
|
transition
|
||||||
<input
|
truncate
|
||||||
id="socketio-path"
|
focus:outline-none focus:border-accent
|
||||||
v-model="path"
|
"
|
||||||
class="input"
|
:placeholder="$t('url')"
|
||||||
spellcheck="false"
|
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||||
/>
|
/>
|
||||||
</li>
|
<input
|
||||||
</div>
|
id="socketio-path"
|
||||||
<div>
|
v-model="path"
|
||||||
<li>
|
class="
|
||||||
<ButtonSecondary
|
bg-primaryLight
|
||||||
id="connect"
|
border border-divider
|
||||||
:disabled="!urlValid"
|
font-mono
|
||||||
name="connect"
|
text-secondaryDark
|
||||||
class="
|
w-full
|
||||||
rounded-b-lg
|
py-1
|
||||||
button
|
px-4
|
||||||
md:rounded-bl-none md:rounded-br-lg
|
transition
|
||||||
"
|
truncate
|
||||||
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
focus:outline-none focus:border-accent
|
||||||
:label="
|
"
|
||||||
!connectionState ? $t('connect') : $t('disconnect')
|
spellcheck="false"
|
||||||
"
|
/>
|
||||||
reverse
|
<ButtonPrimary
|
||||||
@click.native="toggleConnection"
|
id="connect"
|
||||||
/>
|
:disabled="!urlValid"
|
||||||
</li>
|
name="connect"
|
||||||
</div>
|
class="rounded-l-none"
|
||||||
</ul>
|
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
||||||
</AppSection>
|
:label="!connectionState ? $t('connect') : $t('disconnect')"
|
||||||
</Pane>
|
reverse
|
||||||
<Pane class="overflow-auto">
|
@click.native="toggleConnection"
|
||||||
<AppSection label="response">
|
/>
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</AppSection>
|
|
||||||
</Pane>
|
|
||||||
</Splitpanes>
|
|
||||||
</Pane>
|
|
||||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
|
||||||
<AppSection label="messages">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="flex flex-1">
|
|
||||||
<label>{{ $t("message") }}s</label>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul
|
|
||||||
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
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
v-model="communication.inputs[index]"
|
|
||||||
class="input"
|
|
||||||
name="message"
|
|
||||||
type="text"
|
|
||||||
:readonly="!connectionState"
|
|
||||||
@keyup.enter="connectionState ? sendMessage() : null"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div v-if="index + 1 !== communication.inputs.length">
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
|
||||||
:title="$t('delete')"
|
|
||||||
icon="delete"
|
|
||||||
@click.native="removeCommunicationInput({ index })"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="index + 1 === communication.inputs.length">
|
</AppSection>
|
||||||
<li>
|
</Pane>
|
||||||
<ButtonSecondary
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
id="send"
|
<AppSection label="response">
|
||||||
class="button"
|
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
||||||
name="send"
|
</AppSection>
|
||||||
:disabled="!connectionState"
|
</Pane>
|
||||||
icon="send"
|
</Splitpanes>
|
||||||
:label="$t('send')"
|
</Pane>
|
||||||
@click.native="sendMessage"
|
<Pane
|
||||||
/>
|
max-size="30"
|
||||||
</li>
|
size="25"
|
||||||
</div>
|
min-size="20"
|
||||||
</ul>
|
class="overflow-auto hide-scrollbar"
|
||||||
<ul>
|
>
|
||||||
<li>
|
<AppSection label="messages">
|
||||||
<ButtonSecondary
|
<label for="event_name">{{ $t("event_name") }}</label>
|
||||||
icon="add"
|
<input
|
||||||
:label="$t('add_new')"
|
id="event_name"
|
||||||
@click.native="addCommunicationInput"
|
v-model="communication.eventName"
|
||||||
/>
|
class="input"
|
||||||
</li>
|
name="event_name"
|
||||||
</ul>
|
type="text"
|
||||||
</AppSection>
|
:readonly="!connectionState"
|
||||||
</Pane>
|
/>
|
||||||
</Splitpanes>
|
<div class="flex flex-1">
|
||||||
</div>
|
<label>{{ $t("message") }}s</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
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="communication.inputs[index]"
|
||||||
|
class="input"
|
||||||
|
name="message"
|
||||||
|
type="text"
|
||||||
|
:readonly="!connectionState"
|
||||||
|
@keyup.enter="connectionState ? sendMessage() : null"
|
||||||
|
/>
|
||||||
|
<div v-if="index + 1 !== communication.inputs.length">
|
||||||
|
<ButtonSecondary
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
|
icon="delete"
|
||||||
|
@click.native="removeCommunicationInput({ index })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="index + 1 === communication.inputs.length">
|
||||||
|
<ButtonSecondary
|
||||||
|
id="send"
|
||||||
|
class="button"
|
||||||
|
name="send"
|
||||||
|
:disabled="!connectionState"
|
||||||
|
icon="send"
|
||||||
|
:label="$t('send')"
|
||||||
|
@click.native="sendMessage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ButtonSecondary
|
||||||
|
icon="add"
|
||||||
|
:label="$t('add_new')"
|
||||||
|
@click.native="addCommunicationInput"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AppSection>
|
||||||
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,54 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<AppSection label="request">
|
||||||
<AppSection label="request">
|
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||||
<ul>
|
<div class="flex-1 inline-flex">
|
||||||
<li>
|
<input
|
||||||
<label for="server">{{ $t("server") }}</label>
|
id="server"
|
||||||
<input
|
v-model="server"
|
||||||
id="server"
|
type="url"
|
||||||
v-model="server"
|
:class="{ error: !serverValid }"
|
||||||
type="url"
|
class="
|
||||||
:class="{ error: !serverValid }"
|
bg-primaryLight
|
||||||
class="input md:rounded-bl-lg"
|
border border-divider
|
||||||
:placeholder="$t('url')"
|
rounded-l-lg
|
||||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
font-mono
|
||||||
/>
|
text-secondaryDark
|
||||||
</li>
|
w-full
|
||||||
<div>
|
py-1
|
||||||
<li>
|
px-4
|
||||||
<ButtonSecondary
|
transition
|
||||||
id="start"
|
truncate
|
||||||
:disabled="!serverValid"
|
focus:outline-none focus:border-accent
|
||||||
name="start"
|
"
|
||||||
class="
|
:placeholder="$t('url')"
|
||||||
rounded-b-lg
|
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||||
button
|
/>
|
||||||
md:rounded-bl-none md:rounded-br-lg
|
<ButtonPrimary
|
||||||
"
|
id="start"
|
||||||
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
|
:disabled="!serverValid"
|
||||||
:label="!connectionSSEState ? $t('start') : $t('stop')"
|
name="start"
|
||||||
reverse
|
class="rounded-l-none"
|
||||||
@click.native="toggleSSEConnection"
|
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
|
||||||
/>
|
:label="!connectionSSEState ? $t('start') : $t('stop')"
|
||||||
</li>
|
reverse
|
||||||
</div>
|
@click.native="toggleSSEConnection"
|
||||||
</ul>
|
/>
|
||||||
</AppSection>
|
</div>
|
||||||
</Pane>
|
</div>
|
||||||
<Pane class="overflow-auto">
|
</AppSection>
|
||||||
<AppSection label="response">
|
</Pane>
|
||||||
<ul>
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<li>
|
<AppSection label="response">
|
||||||
<RealtimeLog :title="$t('events')" :log="events.log" />
|
<ul>
|
||||||
<div id="result"></div>
|
<li>
|
||||||
</li>
|
<RealtimeLog :title="$t('events')" :log="events.log" />
|
||||||
</ul>
|
<div id="result"></div>
|
||||||
</AppSection>
|
</li>
|
||||||
</Pane>
|
</ul>
|
||||||
</Splitpanes>
|
</AppSection>
|
||||||
</div>
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,167 +1,177 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Splitpanes vertical :dbl-click-splitter="false">
|
||||||
<Splitpanes vertical :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Pane class="overflow-auto">
|
<AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||||
<AppSection label="request">
|
<div class="flex-1 inline-flex">
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="websocket-url">{{ $t("url") }}</label>
|
|
||||||
<input
|
|
||||||
id="websocket-url"
|
|
||||||
v-model="url"
|
|
||||||
class="input"
|
|
||||||
type="url"
|
|
||||||
spellcheck="false"
|
|
||||||
:class="{ error: !urlValid }"
|
|
||||||
:placeholder="$t('url')"
|
|
||||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
id="connect"
|
|
||||||
:disabled="!urlValid"
|
|
||||||
class="button"
|
|
||||||
name="connect"
|
|
||||||
:icon="!connectionState ? 'sync' : 'sync_disabled'"
|
|
||||||
:label="
|
|
||||||
!connectionState ? $t('connect') : $t('disconnect')
|
|
||||||
"
|
|
||||||
reverse
|
|
||||||
@click.native="toggleConnection"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="flex flex-1">
|
|
||||||
<label>{{ $t("protocols") }}</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul
|
|
||||||
v-for="(protocol, index) of protocols"
|
|
||||||
:key="`protocol-${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
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
v-model="protocol.value"
|
|
||||||
class="input"
|
|
||||||
:placeholder="$t('protocol_count', { count: index + 1 })"
|
|
||||||
name="message"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
|
||||||
:title="
|
|
||||||
protocol.hasOwnProperty('active')
|
|
||||||
? protocol.active
|
|
||||||
? $t('turn_off')
|
|
||||||
: $t('turn_on')
|
|
||||||
: $t('turn_off')
|
|
||||||
"
|
|
||||||
@click.native="
|
|
||||||
protocol.active = protocol.hasOwnProperty('active')
|
|
||||||
? !protocol.active
|
|
||||||
: false
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<i class="material-icons">
|
|
||||||
{{
|
|
||||||
protocol.hasOwnProperty("active")
|
|
||||||
? protocol.active
|
|
||||||
? "check_box"
|
|
||||||
: "check_box_outline_blank"
|
|
||||||
: "check_box"
|
|
||||||
}}
|
|
||||||
</i>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
|
||||||
:title="$t('delete')"
|
|
||||||
icon="delete"
|
|
||||||
@click.native="deleteProtocol({ index })"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
icon="add"
|
|
||||||
:label="$t('add_new')"
|
|
||||||
@click.native="addProtocol"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</AppSection>
|
|
||||||
</Pane>
|
|
||||||
<Pane class="overflow-auto">
|
|
||||||
<AppSection label="response">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</AppSection>
|
|
||||||
</Pane>
|
|
||||||
</Splitpanes>
|
|
||||||
</Pane>
|
|
||||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
|
||||||
<AppSection label="messages">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="websocket-message">{{ $t("message") }}</label>
|
|
||||||
<input
|
<input
|
||||||
id="websocket-message"
|
id="websocket-url"
|
||||||
v-model="communication.input"
|
v-model="url"
|
||||||
name="message"
|
class="
|
||||||
type="text"
|
bg-primaryLight
|
||||||
:readonly="!connectionState"
|
border border-divider
|
||||||
class="input md:rounded-bl-lg"
|
rounded-l-lg
|
||||||
@keyup.enter="connectionState ? sendMessage() : null"
|
font-mono
|
||||||
@keyup.up="connectionState ? walkHistory('up') : null"
|
text-secondaryDark
|
||||||
@keyup.down="connectionState ? walkHistory('down') : null"
|
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"
|
||||||
/>
|
/>
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
id="send"
|
|
||||||
name="send"
|
|
||||||
:disabled="!connectionState"
|
|
||||||
class="
|
|
||||||
rounded-b-lg
|
|
||||||
button
|
|
||||||
md:rounded-bl-none md:rounded-br-lg
|
|
||||||
"
|
|
||||||
icon="send"
|
|
||||||
:label="$t('send')"
|
|
||||||
@click.native="sendMessage"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</AppSection>
|
||||||
</AppSection>
|
<div
|
||||||
</Pane>
|
class="
|
||||||
</Splitpanes>
|
bg-primary
|
||||||
</div>
|
border-b border-dividerLight
|
||||||
|
flex flex-1
|
||||||
|
pl-4
|
||||||
|
top-68px
|
||||||
|
z-10
|
||||||
|
sticky
|
||||||
|
items-center
|
||||||
|
justify-between
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<label class="font-semibold text-xs">
|
||||||
|
{{ $t("protocols") }}
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<ButtonSecondary
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('clear_all')"
|
||||||
|
icon="clear_all"
|
||||||
|
@click.native="clearContent"
|
||||||
|
/>
|
||||||
|
<ButtonSecondary
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('add_new')"
|
||||||
|
icon="add"
|
||||||
|
@click.native="addProtocol"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="(protocol, index) of protocols"
|
||||||
|
:key="`protocol-${index}`"
|
||||||
|
class="
|
||||||
|
divide-x divide-dashed divide-divider
|
||||||
|
border-b border-dashed border-divider
|
||||||
|
flex
|
||||||
|
"
|
||||||
|
:class="{ 'border-t': index == 0 }"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="protocol.value"
|
||||||
|
class="
|
||||||
|
bg-primaryLight
|
||||||
|
flex
|
||||||
|
font-semibold
|
||||||
|
flex-1
|
||||||
|
text-xs
|
||||||
|
py-3
|
||||||
|
px-4
|
||||||
|
focus:outline-none
|
||||||
|
"
|
||||||
|
:placeholder="$t('protocol_count', { count: index + 1 })"
|
||||||
|
name="message"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<ButtonSecondary
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="
|
||||||
|
protocol.hasOwnProperty('active')
|
||||||
|
? protocol.active
|
||||||
|
? $t('turn_off')
|
||||||
|
: $t('turn_on')
|
||||||
|
: $t('turn_off')
|
||||||
|
"
|
||||||
|
:icon="
|
||||||
|
protocol.hasOwnProperty('active')
|
||||||
|
? protocol.active
|
||||||
|
? 'check_box'
|
||||||
|
: 'check_box_outline_blank'
|
||||||
|
: 'check_box'
|
||||||
|
"
|
||||||
|
@click.native="
|
||||||
|
protocol.active = protocol.hasOwnProperty('active')
|
||||||
|
? !protocol.active
|
||||||
|
: false
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ButtonSecondary
|
||||||
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
:title="$t('delete')"
|
||||||
|
icon="delete"
|
||||||
|
@click.native="deleteProtocol({ index })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Pane>
|
||||||
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
|
<AppSection label="response">
|
||||||
|
<RealtimeLog :title="$t('log')" :log="communication.log" />
|
||||||
|
</AppSection>
|
||||||
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
|
</Pane>
|
||||||
|
<Pane
|
||||||
|
max-size="30"
|
||||||
|
size="25"
|
||||||
|
min-size="20"
|
||||||
|
class="overflow-auto hide-scrollbar"
|
||||||
|
>
|
||||||
|
<AppSection label="messages">
|
||||||
|
<label for="websocket-message" class="font-semibold text-xs">
|
||||||
|
{{ $t("message") }}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="websocket-message"
|
||||||
|
v-model="communication.input"
|
||||||
|
name="message"
|
||||||
|
type="text"
|
||||||
|
:readonly="!connectionState"
|
||||||
|
class="input md:rounded-bl-lg"
|
||||||
|
@keyup.enter="connectionState ? sendMessage() : null"
|
||||||
|
@keyup.up="connectionState ? walkHistory('up') : null"
|
||||||
|
@keyup.down="connectionState ? walkHistory('down') : null"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<ButtonSecondary
|
||||||
|
id="send"
|
||||||
|
name="send"
|
||||||
|
:disabled="!connectionState"
|
||||||
|
class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
|
||||||
|
icon="send"
|
||||||
|
:label="$t('send')"
|
||||||
|
@click.native="sendMessage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AppSection>
|
||||||
|
</Pane>
|
||||||
|
</Splitpanes>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -62,7 +62,6 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.tabs {
|
.tabs {
|
||||||
@apply flex;
|
@apply flex;
|
||||||
@apply flex-1;
|
|
||||||
@apply whitespace-nowrap;
|
@apply whitespace-nowrap;
|
||||||
@apply overflow-auto;
|
@apply overflow-auto;
|
||||||
@apply bg-primary;
|
@apply bg-primary;
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
<p v-if="myTeams.length === 0">
|
<p v-if="myTeams.length === 0">
|
||||||
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
|
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
|
||||||
</p>
|
</p>
|
||||||
<div v-else class="overflow-auto">
|
<div v-else class="overflow-auto hide-scrollbar">
|
||||||
<ul class="flex-col">
|
<ul class="flex-col">
|
||||||
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
|
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
|
||||||
<TeamsTeam
|
<TeamsTeam
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Splitpanes vertical :dbl-click-splitter="false">
|
<Splitpanes vertical :dbl-click-splitter="false">
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<AppSection label="import">
|
<AppSection label="import">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<label>{{ $t("collection") }}</label>
|
<label>{{ $t("collection") }}</label>
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<AppSection label="documentation">
|
<AppSection label="documentation">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<label>{{ $t("documentation") }}</label>
|
<label>{{ $t("documentation") }}</label>
|
||||||
@@ -102,7 +102,12 @@
|
|||||||
</Pane>
|
</Pane>
|
||||||
</Splitpanes>
|
</Splitpanes>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane max-size="35" min-size="20" class="overflow-auto">
|
<Pane
|
||||||
|
max-size="30"
|
||||||
|
size="25"
|
||||||
|
min-size="20"
|
||||||
|
class="overflow-auto hide-scrollbar"
|
||||||
|
>
|
||||||
<aside class="lg:max-w-md">
|
<aside class="lg:max-w-md">
|
||||||
<Collections
|
<Collections
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
|
|||||||
@@ -1,147 +1,154 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Splitpanes vertical :dbl-click-splitter="false">
|
<Splitpanes vertical :dbl-click-splitter="false">
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<Splitpanes horizontal :dbl-click-splitter="false">
|
<Splitpanes horizontal :dbl-click-splitter="false">
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<AppSection label="endpoint">
|
<AppSection label="endpoint">
|
||||||
<ul>
|
<div class="bg-primary flex p-4 top-0 z-10 sticky">
|
||||||
<li>
|
<div class="flex-1 inline-flex">
|
||||||
<label for="url">{{ $t("url") }}</label>
|
|
||||||
<input
|
<input
|
||||||
id="url"
|
id="url"
|
||||||
v-model="url"
|
v-model="url"
|
||||||
type="url"
|
type="url"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
class="input md:rounded-bl-lg"
|
class="
|
||||||
|
bg-primaryLight
|
||||||
|
border border-divider
|
||||||
|
rounded-l-lg
|
||||||
|
font-mono
|
||||||
|
text-secondaryDark
|
||||||
|
w-full
|
||||||
|
py-1
|
||||||
|
px-4
|
||||||
|
transition
|
||||||
|
truncate
|
||||||
|
focus:outline-none focus:border-accent
|
||||||
|
"
|
||||||
:placeholder="$t('url')"
|
:placeholder="$t('url')"
|
||||||
@keyup.enter="onPollSchemaClick()"
|
@keyup.enter="onPollSchemaClick()"
|
||||||
/>
|
/>
|
||||||
</li>
|
<ButtonPrimary
|
||||||
<div>
|
id="get"
|
||||||
<li>
|
name="get"
|
||||||
<ButtonSecondary
|
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
|
||||||
id="get"
|
:label="!isPollingSchema ? $t('connect') : $t('disconnect')"
|
||||||
name="get"
|
class="rounded-l-none"
|
||||||
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
|
@click.native="onPollSchemaClick"
|
||||||
:label="
|
/>
|
||||||
!isPollingSchema ? $t('connect') : $t('disconnect')
|
|
||||||
"
|
|
||||||
@click.native="onPollSchemaClick"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
<AppSection label="headers">
|
<AppSection label="headers">
|
||||||
<div class="flex flex-col">
|
<div
|
||||||
<label>{{ $t("headers") }}</label>
|
class="
|
||||||
<ul v-if="headers.length !== 0">
|
bg-primary
|
||||||
<li>
|
border-b border-dividerLight
|
||||||
<div class="flex flex-1">
|
flex flex-1
|
||||||
<label for="headerList">{{ $t("header_list") }}</label>
|
pl-4
|
||||||
<div>
|
top-68px
|
||||||
<ButtonSecondary
|
z-10
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
sticky
|
||||||
:title="$t('clear')"
|
items-center
|
||||||
icon="clear_all"
|
justify-between
|
||||||
@click.native="headers = []"
|
"
|
||||||
/>
|
>
|
||||||
</div>
|
<label class="font-semibold text-xs">{{ $t("headers") }}</label>
|
||||||
</div>
|
<div>
|
||||||
</li>
|
<ButtonSecondary
|
||||||
</ul>
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
<ul
|
:title="$t('clear')"
|
||||||
v-for="(header, index) in headers"
|
icon="clear_all"
|
||||||
:key="`header-${index}`"
|
@click.native="headers = []"
|
||||||
class="
|
/>
|
||||||
divide-y divide-dashed divide-divider
|
<ButtonSecondary
|
||||||
border-b border-dashed border-divider
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
md:divide-x md:divide-y-0
|
:title="$t('add_new')"
|
||||||
|
icon="add"
|
||||||
|
@click.native="addRequestHeader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="(header, index) in headers"
|
||||||
|
:key="`header-${index}`"
|
||||||
|
class="
|
||||||
|
divide-x divide-dashed divide-divider
|
||||||
|
border-b border-dashed border-divider
|
||||||
|
flex
|
||||||
|
"
|
||||||
|
:class="{ 'border-t': index == 0 }"
|
||||||
|
>
|
||||||
|
<SmartAutoComplete
|
||||||
|
:placeholder="$t('header_count', { count: index + 1 })"
|
||||||
|
:source="commonHeaders"
|
||||||
|
:spellcheck="false"
|
||||||
|
:value="header.key"
|
||||||
|
autofocus
|
||||||
|
@input="
|
||||||
|
$store.commit('setGQLHeaderKey', {
|
||||||
|
index,
|
||||||
|
value: $event,
|
||||||
|
})
|
||||||
"
|
"
|
||||||
:class="{ 'border-t': index == 0 }"
|
/>
|
||||||
>
|
<input
|
||||||
<li>
|
class="
|
||||||
<SmartAutoComplete
|
bg-primaryLight
|
||||||
:placeholder="$t('header_count', { count: index + 1 })"
|
flex
|
||||||
:source="commonHeaders"
|
font-semibold
|
||||||
:spellcheck="false"
|
flex-1
|
||||||
:value="header.key"
|
text-xs
|
||||||
autofocus
|
py-3
|
||||||
@input="
|
px-4
|
||||||
$store.commit('setGQLHeaderKey', {
|
focus:outline-none
|
||||||
index,
|
"
|
||||||
value: $event,
|
:placeholder="$t('value_count', { count: index + 1 })"
|
||||||
})
|
:name="`value ${index}`"
|
||||||
"
|
:value="header.value"
|
||||||
/>
|
autofocus
|
||||||
</li>
|
@change="
|
||||||
<li>
|
$store.commit('setGQLHeaderValue', {
|
||||||
<input
|
index,
|
||||||
class="input"
|
value: $event.target.value,
|
||||||
:placeholder="$t('value_count', { count: index + 1 })"
|
})
|
||||||
:name="`value ${index}`"
|
"
|
||||||
:value="header.value"
|
/>
|
||||||
autofocus
|
<div>
|
||||||
@change="
|
<ButtonSecondary
|
||||||
$store.commit('setGQLHeaderValue', {
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
index,
|
:title="
|
||||||
value: $event.target.value,
|
header.hasOwnProperty('active')
|
||||||
})
|
? header.active
|
||||||
"
|
? $t('turn_off')
|
||||||
/>
|
: $t('turn_on')
|
||||||
</li>
|
: $t('turn_off')
|
||||||
<div>
|
"
|
||||||
<li>
|
:icon="
|
||||||
<ButtonSecondary
|
header.hasOwnProperty('active')
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
? header.active
|
||||||
:title="
|
? 'check_box'
|
||||||
header.hasOwnProperty('active')
|
: 'check_box_outline_blank'
|
||||||
? header.active
|
: 'check_box'
|
||||||
? $t('turn_off')
|
"
|
||||||
: $t('turn_on')
|
@click.native="
|
||||||
: $t('turn_off')
|
$store.commit('setActiveGQLHeader', {
|
||||||
"
|
index,
|
||||||
@click.native="
|
value: header.hasOwnProperty('active')
|
||||||
$store.commit('setActiveGQLHeader', {
|
? !header.active
|
||||||
index,
|
: false,
|
||||||
value: header.hasOwnProperty('active')
|
})
|
||||||
? !header.active
|
"
|
||||||
: false,
|
/>
|
||||||
})
|
</div>
|
||||||
"
|
<div>
|
||||||
/>
|
<ButtonSecondary
|
||||||
<i class="material-icons">
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
{{
|
:title="$t('delete')"
|
||||||
header.hasOwnProperty("active")
|
icon="delete"
|
||||||
? header.active
|
@click.native="removeRequestHeader(index)"
|
||||||
? "check_box"
|
/>
|
||||||
: "check_box_outline_blank"
|
</div>
|
||||||
: "check_box"
|
|
||||||
}}
|
|
||||||
</i>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
|
||||||
:title="$t('delete')"
|
|
||||||
icon="delete"
|
|
||||||
@click.native="removeRequestHeader(index)"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<ButtonSecondary
|
|
||||||
icon="add"
|
|
||||||
:label="$t('add_new')"
|
|
||||||
@click.native="addRequestHeader"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
<AppSection label="query">
|
<AppSection label="query">
|
||||||
@@ -212,7 +219,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="overflow-auto">
|
<Pane class="overflow-auto hide-scrollbar">
|
||||||
<AppSection ref="schema" label="schema">
|
<AppSection ref="schema" label="schema">
|
||||||
<div class="flex flex-1">
|
<div class="flex flex-1">
|
||||||
<label>{{ $t("schema") }}</label>
|
<label>{{ $t("schema") }}</label>
|
||||||
|
|||||||
@@ -1,20 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<SmartTabs>
|
||||||
<SmartTabs>
|
<SmartTab id="websocket" :label="$t('websocket')" :selected="true">
|
||||||
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
|
<RealtimeWebsocket />
|
||||||
<RealtimeWebsocket />
|
</SmartTab>
|
||||||
</SmartTab>
|
<SmartTab id="sse" :label="$t('sse')">
|
||||||
<SmartTab :id="'sse'" :label="$t('sse')">
|
<RealtimeSse />
|
||||||
<RealtimeSse />
|
</SmartTab>
|
||||||
</SmartTab>
|
<SmartTab id="socketio" :label="$t('socketio')">
|
||||||
<SmartTab :id="'socketio'" :label="$t('socketio')">
|
<RealtimeSocketio />
|
||||||
<RealtimeSocketio />
|
</SmartTab>
|
||||||
</SmartTab>
|
<SmartTab id="mqtt" :label="$t('mqtt')">
|
||||||
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
|
<RealtimeMqtt />
|
||||||
<RealtimeMqtt />
|
</SmartTab>
|
||||||
</SmartTab>
|
</SmartTabs>
|
||||||
</SmartTabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user