btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor(ui): more pages

Browse Source
This commit is contained in:
liyasthomas
2021-07-18 13:17:58 +05:30
parent 590c21209c
commit 393e6896ec
11 changed files with 628 additions and 626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/http/Parameters.vue
View File

@@ -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>

16
components/realtime/Log.vue
View File

@@ -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

80
components/realtime/Mqtt.vue
View File

@@ -1,59 +1,58 @@
<template> <template>
<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="request"> <AppSection label="request">
<ul> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<li> <div class="flex-1 inline-flex">
<label for="mqtt-url">{{ $t("url") }}</label>
<input <input
id="mqtt-url" id="mqtt-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')"
/> />
</li> <ButtonPrimary
<div>
<li>
<ButtonSecondary
id="connect" id="connect"
:disabled="!validUrl" :disabled="!validUrl"
class=" class="rounded-l-none"
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionState ? 'sync' : 'sync_disabled'" :icon="!connectionState ? 'sync' : 'sync_disabled'"
:label=" :label="connectionState ? $t('disconnect') : $t('connect')"
connectionState ? $t('disconnect') : $t('connect')
"
reverse reverse
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</li>
</div> </div>
</ul> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<AppSection label="response"> <AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="log" /> <RealtimeLog :title="$t('log')" :log="log" />
</li>
</ul>
</AppSection> </AppSection>
</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"
>
<AppSection label="messages"> <AppSection label="messages">
<ul>
<li>
<label for="pub_topic">{{ $t("mqtt_topic") }}</label> <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
<input <input
id="pub_topic" id="pub_topic"
@@ -62,8 +61,6 @@
type="text" type="text"
spellcheck="false" spellcheck="false"
/> />
</li>
<li>
<label for="mqtt-message">{{ $t("message") }}</label> <label for="mqtt-message">{{ $t("message") }}</label>
<input <input
id="mqtt-message" id="mqtt-message"
@@ -72,9 +69,7 @@
spellcheck="false" spellcheck="false"
class="border-dashed border-divider input md:border-l" class="border-dashed border-divider input md:border-l"
/> />
</li>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
id="publish" id="publish"
class="button" class="button"
@@ -84,11 +79,7 @@
:label="$t('mqtt_publish')" :label="$t('mqtt_publish')"
@click.native="publish" @click.native="publish"
/> />
</li>
</div> </div>
</ul>
<ul>
<li>
<label for="sub_topic">{{ $t("mqtt_topic") }}</label> <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
<input <input
id="sub_topic" id="sub_topic"
@@ -97,34 +88,23 @@
spellcheck="false" spellcheck="false"
class="input md:rounded-bl-lg" class="input md:rounded-bl-lg"
/> />
</li>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
id="subscribe" id="subscribe"
name="get" name="get"
:disabled="!cansubscribe" :disabled="!cansubscribe"
class=" class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="subscriptionState ? 'sync_disabled' : 'sync'" :icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label=" :label="
subscriptionState subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
? $t('mqtt_unsubscribe')
: $t('mqtt_subscribe')
" "
reverse reverse
@click.native="toggleSubscription" @click.native="toggleSubscription"
/> />
</li>
</div> </div>
</ul>
</AppSection> </AppSection>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</div>
</template> </template>
<script> <script>

96
components/realtime/Socketio.vue
View File

@@ -1,73 +1,78 @@
<template> <template>
<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="request"> <AppSection label="request">
<ul> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<li> <div class="flex-1 inline-flex">
<label for="socketio-url">{{ $t("url") }}</label>
<input <input
id="socketio-url" id="socketio-url"
v-model="url" v-model="url"
type="url" type="url"
spellcheck="false" spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
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="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
/> />
</li>
<div>
<li>
<label for="socketio-path">{{ $t("path") }}</label>
<input <input
id="socketio-path" id="socketio-path"
v-model="path" v-model="path"
class="input" class="
bg-primaryLight
border border-divider
font-mono
text-secondaryDark
w-full
py-1
px-4
transition
truncate
focus:outline-none focus:border-accent
"
spellcheck="false" spellcheck="false"
/> />
</li> <ButtonPrimary
</div>
<div>
<li>
<ButtonSecondary
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
name="connect" name="connect"
class=" class="rounded-l-none"
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionState ? 'sync' : 'sync_disabled'" :icon="!connectionState ? 'sync' : 'sync_disabled'"
:label=" :label="!connectionState ? $t('connect') : $t('disconnect')"
!connectionState ? $t('connect') : $t('disconnect')
"
reverse reverse
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</li>
</div> </div>
</ul> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<AppSection label="response"> <AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />
</li>
</ul>
</AppSection> </AppSection>
</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"
>
<AppSection label="messages"> <AppSection label="messages">
<ul>
<li>
<label for="event_name">{{ $t("event_name") }}</label> <label for="event_name">{{ $t("event_name") }}</label>
<input <input
id="event_name" id="event_name"
@@ -77,16 +82,10 @@
type="text" type="text"
:readonly="!connectionState" :readonly="!connectionState"
/> />
</li>
</ul>
<ul>
<li>
<div class="flex flex-1"> <div class="flex flex-1">
<label>{{ $t("message") }}s</label> <label>{{ $t("message") }}s</label>
</div> </div>
</li> <div
</ul>
<ul
v-for="(input, index) of communication.inputs" v-for="(input, index) of communication.inputs"
:key="`input-${index}`" :key="`input-${index}`"
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
@@ -96,7 +95,6 @@
md:divide-x md:divide-y-0 md:divide-x md:divide-y-0
" "
> >
<li>
<input <input
v-model="communication.inputs[index]" v-model="communication.inputs[index]"
class="input" class="input"
@@ -105,19 +103,15 @@
:readonly="!connectionState" :readonly="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null" @keyup.enter="connectionState ? sendMessage() : null"
/> />
</li>
<div v-if="index + 1 !== communication.inputs.length"> <div v-if="index + 1 !== communication.inputs.length">
<li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="delete" icon="delete"
@click.native="removeCommunicationInput({ index })" @click.native="removeCommunicationInput({ index })"
/> />
</li>
</div> </div>
<div v-if="index + 1 === communication.inputs.length"> <div v-if="index + 1 === communication.inputs.length">
<li>
<ButtonSecondary <ButtonSecondary
id="send" id="send"
class="button" class="button"
@@ -127,22 +121,16 @@
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"
/> />
</li>
</div> </div>
</ul>
<ul>
<li>
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"
:label="$t('add_new')" :label="$t('add_new')"
@click.native="addCommunicationInput" @click.native="addCommunicationInput"
/> />
</li> </div>
</ul>
</AppSection> </AppSection>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</div>
</template> </template>
<script> <script>

39
components/realtime/Sse.vue
View File

@@ -1,43 +1,45 @@
<template> <template>
<div>
<Splitpanes horizontal :dbl-click-splitter="false"> <Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<AppSection label="request"> <AppSection label="request">
<ul> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<li> <div class="flex-1 inline-flex">
<label for="server">{{ $t("server") }}</label>
<input <input
id="server" id="server"
v-model="server" v-model="server"
type="url" type="url"
:class="{ error: !serverValid }" :class="{ error: !serverValid }"
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="serverValid ? toggleSSEConnection() : null" @keyup.enter="serverValid ? toggleSSEConnection() : null"
/> />
</li> <ButtonPrimary
<div>
<li>
<ButtonSecondary
id="start" id="start"
:disabled="!serverValid" :disabled="!serverValid"
name="start" name="start"
class=" class="rounded-l-none"
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'" :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
:label="!connectionSSEState ? $t('start') : $t('stop')" :label="!connectionSSEState ? $t('start') : $t('stop')"
reverse reverse
@click.native="toggleSSEConnection" @click.native="toggleSSEConnection"
/> />
</li>
</div> </div>
</ul> </div>
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<AppSection label="response"> <AppSection label="response">
<ul> <ul>
<li> <li>
@@ -48,7 +50,6 @@
</AppSection> </AppSection>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</div>
</template> </template>
<script> <script>

166
components/realtime/Websocket.vue
View File

@@ -1,69 +1,102 @@
<template> <template>
<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="request"> <AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
<ul> <div class="flex-1 inline-flex">
<li>
<label for="websocket-url">{{ $t("url") }}</label>
<input <input
id="websocket-url" id="websocket-url"
v-model="url" v-model="url"
class="input" 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
"
type="url" type="url"
spellcheck="false" spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
:placeholder="$t('url')" :placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
/> />
</li> <ButtonPrimary
<div>
<li>
<ButtonSecondary
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
class="button" class="rounded-l-none"
name="connect" name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'" :icon="!connectionState ? 'sync' : 'sync_disabled'"
:label=" :label="!connectionState ? $t('connect') : $t('disconnect')"
!connectionState ? $t('connect') : $t('disconnect')
"
reverse reverse
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</li>
</div> </div>
</ul> </AppSection>
<ul> <div
<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=" class="
divide-y divide-dashed divide-divider bg-primary
border-b border-dashed border-divider border-b border-dividerLight
md:divide-x md:divide-y-0 flex flex-1
pl-4
top-68px
z-10
sticky
items-center
justify-between
" "
> >
<li> <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 <input
v-model="protocol.value" v-model="protocol.value"
class="input" class="
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('protocol_count', { count: index + 1 })" :placeholder="$t('protocol_count', { count: index + 1 })"
name="message" name="message"
type="text" type="text"
/> />
</li>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title=" :title="
@@ -73,61 +106,47 @@
: $t('turn_on') : $t('turn_on')
: $t('turn_off') : $t('turn_off')
" "
:icon="
protocol.hasOwnProperty('active')
? protocol.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native=" @click.native="
protocol.active = protocol.hasOwnProperty('active') protocol.active = protocol.hasOwnProperty('active')
? !protocol.active ? !protocol.active
: false : false
" "
/> />
<i class="material-icons">
{{
protocol.hasOwnProperty("active")
? protocol.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div> </div>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="delete" icon="delete"
@click.native="deleteProtocol({ index })" @click.native="deleteProtocol({ index })"
/> />
</li>
</div> </div>
</ul> </div>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addProtocol"
/>
</li>
</ul>
</AppSection>
</Pane> </Pane>
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<AppSection label="response"> <AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />
</li>
</ul>
</AppSection> </AppSection>
</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"
>
<AppSection label="messages"> <AppSection label="messages">
<ul> <label for="websocket-message" class="font-semibold text-xs">
<li> {{ $t("message") }}
<label for="websocket-message">{{ $t("message") }}</label> </label>
<input <input
id="websocket-message" id="websocket-message"
v-model="communication.input" v-model="communication.input"
@@ -139,29 +158,20 @@
@keyup.up="connectionState ? walkHistory('up') : null" @keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null" @keyup.down="connectionState ? walkHistory('down') : null"
/> />
</li>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
id="send" id="send"
name="send" name="send"
:disabled="!connectionState" :disabled="!connectionState"
class=" class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
icon="send" icon="send"
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"
/> />
</li>
</div> </div>
</ul>
</AppSection> </AppSection>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</div>
</template> </template>
<script> <script>

1
components/smart/Tabs.vue
View File

@@ -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;

2
components/teams/index.vue
View File

@@ -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

13
pages/doc.vue
View File

@@ -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"

117
pages/graphql.vue
View File

@@ -1,45 +1,59 @@
<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>
<li>
<ButtonSecondary
id="get" id="get"
name="get" name="get"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'" :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label=" :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
!isPollingSchema ? $t('connect') : $t('disconnect') class="rounded-l-none"
"
@click.native="onPollSchemaClick" @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
top-68px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">{{ $t("headers") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -47,21 +61,24 @@
icon="clear_all" icon="clear_all"
@click.native="headers = []" @click.native="headers = []"
/> />
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add_new')"
icon="add"
@click.native="addRequestHeader"
/>
</div> </div>
</div> </div>
</li> <div
</ul>
<ul
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`header-${index}`" :key="`header-${index}`"
class=" class="
divide-y divide-dashed divide-divider divide-x divide-dashed divide-divider
border-b border-dashed border-divider border-b border-dashed border-divider
md:divide-x md:divide-y-0 flex
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
> >
<li>
<SmartAutoComplete <SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })" :placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders" :source="commonHeaders"
@@ -75,10 +92,17 @@
}) })
" "
/> />
</li>
<li>
<input <input
class="input" class="
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })" :placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`" :name="`value ${index}`"
:value="header.value" :value="header.value"
@@ -90,9 +114,7 @@
}) })
" "
/> />
</li>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title=" :title="
@@ -102,6 +124,13 @@
: $t('turn_on') : $t('turn_on')
: $t('turn_off') : $t('turn_off')
" "
:icon="
header.hasOwnProperty('active')
? header.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native=" @click.native="
$store.commit('setActiveGQLHeader', { $store.commit('setActiveGQLHeader', {
index, index,
@@ -111,37 +140,15 @@
}) })
" "
/> />
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div> </div>
<div> <div>
<li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('delete')"
icon="delete" icon="delete"
@click.native="removeRequestHeader(index)" @click.native="removeRequestHeader(index)"
/> />
</li>
</div> </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>

10
pages/realtime.vue
View File

@@ -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>