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

feat: init split layouts

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-06 17:31:18 +00:00
committed by GitHub
parent 93d373c032
commit fc5a5aad8d
35 changed files with 1204 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
assets/scss/styles.scss
View File

@@ -178,8 +178,6 @@ select {
@apply cursor-pointer;
@apply appearance-none;
// height: 40px;
&::-ms-expand {
@apply hidden;
}
@@ -295,3 +293,64 @@ input[type="checkbox"] {
margin-bottom: env(safe-area-inset-bottom);
}
}
.splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply transition;
}
.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
}
.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
}
.splitpanes__splitter::before {
@apply absolute;
@apply inset-0;
@apply bg-dividerLight;
@apply opacity-0;
@apply z-1;
@apply transition;
content: "";
}
.splitpanes__splitter::after {
@apply absolute;
@apply inset-0;
@apply z-1;
@apply transition;
@apply flex;
@apply items-center;
@apply justify-center;
@apply text-dividerDark;
@apply font-icon;
}
.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4";
}
.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3";
}
.splitpanes__splitter:hover::before {
@apply opacity-100;
}
.splitpanes--vertical > .splitpanes__splitter::before {
left: -2px;
right: -2px;
height: 100%;
}
.splitpanes--horizontal > .splitpanes__splitter::before {
top: -2px;
bottom: -2px;
width: 100%;
}

2
components/app/Section.vue
View File

@@ -1,5 +1,5 @@
<template>
<section :id="label.toLowerCase()">
<section :id="label.toLowerCase()" class="flex flex-col">
<slot></slot>
</section>
</template>

2
components/collections/graphql/index.vue
View File

@@ -45,7 +45,7 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-divider">
<div class="border-b flex flex-1 border-divider">
<ButtonSecondary
icon="new"
:label="$t('new')"

4
components/collections/index.vue
View File

@@ -7,7 +7,7 @@
aria-label="Search"
type="search"
:placeholder="$t('search')"
class="input rounded-t-lg"
class="px-4 py-2 text-xs flex flex-1"
/>
</div>
<CollectionsChooseType
@@ -53,7 +53,7 @@
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
<div class="border-b row-wrapper border-divider">
<div class="border-b flex flex-1 border-divider">
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&

2
components/environments/Edit.vue
View File

@@ -16,7 +16,7 @@
:placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment"
/>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="variableList">{{ $t("env_variable_list") }}</label>
<div>
<ButtonSecondary

2
components/environments/Environment.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<div>
<ButtonSecondary
icon="layers"

2
components/environments/index.vue
View File

@@ -35,7 +35,7 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-divider">
<div class="border-b flex flex-1 border-divider">
<div>
<ButtonSecondary
icon="add"

22
components/history/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<AppSection label="history">
<AppSection label="history" class="bg-green-200">
<div class="flex">
<input
v-model="filterText"
aria-label="Search"
type="search"
class="px-4 py-2 text-xs flex flex-1"
:placeholder="$t('search')"
class="input rounded-t-lg"
/>
</div>
<div
@@ -39,8 +39,11 @@
<p v-if="history.length === 0">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
<div v-if="!isClearingHistory" class="row-wrapper">
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryLight">
<div
v-if="!isClearingHistory"
class="flex items-center justify-between flex-1"
>
<ButtonSecondary
data-testid="clear_history"
:disabled="history.length === 0"
@@ -51,14 +54,15 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!showMore ? $t('show_more') : $t('hide_more')"
icon="!showMore ? 'unfold_more' : 'unfold_less'"
:icon="!showMore ? 'unfold_more' : 'unfold_less'"
@click.native="toggleCollapse()"
/>
</div>
<div v-else class="row-wrapper">
<p>
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</p>
<div v-else class="flex items-center justify-between flex-1">
<span class="flex items-center">
<i class="material-icons mx-2">help_outline</i>
{{ $t("are_you_sure") }}
</span>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

2
components/http/BodyParameters.vue
View File

@@ -2,7 +2,7 @@
<div>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="reqParamList">{{ $t("request_body") }}</label>
<div>
<ButtonSecondary

2
components/http/CodegenModal.vue
View File

@@ -41,7 +41,7 @@
/>
</tippy>
</span>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<ButtonSecondary

2
components/http/Headers.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<ButtonSecondary

2
components/http/Parameters.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<ButtonSecondary

2
components/http/RawBody.vue
View File

@@ -2,7 +2,7 @@
<div>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="rawBody">{{ $t("raw_request_body") }}</label>
<div>
<ButtonSecondary

4
components/http/TokenList.vue
View File

@@ -7,7 +7,7 @@
</div>
</template>
<template #body>
<div class="row-wrapper">
<div class="flex flex-1">
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<ButtonSecondary
@@ -35,7 +35,7 @@
<li>
<input class="input" :value="token.value" readonly />
</li>
<div class="row-wrapper">
<div class="flex flex-1">
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

4
components/landing/Hero.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex p-4 relative overflow-hidden">
<div class="flex p-4 relative">
<div class="relative my-16 z-10 max-w-3xl">
<h2
class="
@@ -45,7 +45,7 @@
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:w-full lg:h-full" />
<LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:h-full" />
</div>
</div>
</template>

2
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary

2
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary

2
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary

2
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary

2
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary

227
components/realtime/Mqtt.vue
View File

@@ -1,114 +1,139 @@
<template>
<div>
<AppSection label="request">
<ul>
<li>
<label for="mqtt-url">{{ $t("url") }}</label>
<input
id="mqtt-url"
v-model="url"
type="url"
spellcheck="false"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
/>
</li>
<div>
<li>
<ButtonSecondary
id="connect"
:disabled="!validUrl"
class="button rounded-b-lg 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>
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="log" />
</li>
</ul>
<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="input border-dashed md:border-l border-divider"
/>
</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="button rounded-b-lg 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"
/>
</li>
</div>
</ul>
</AppSection>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="request">
<ul>
<li>
<label for="mqtt-url">{{ $t("url") }}</label>
<input
id="mqtt-url"
v-model="url"
type="url"
spellcheck="false"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
/>
</li>
<div>
<li>
<ButtonSecondary
id="connect"
:disabled="!validUrl"
class="
button
rounded-b-lg
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="input border-dashed md:border-l border-divider"
/>
</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="
button
rounded-b-lg
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"
/>
</li>
</div>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import Paho from "paho-mqtt"
import debounce from "~/helpers/utils/debounce"
export default {
components: { Splitpanes, Pane },
data() {
return {
url: "wss://test.mosquitto.org:8081",

273
components/realtime/Socketio.vue
View File

@@ -1,140 +1,161 @@
<template>
<div>
<AppSection label="request">
<ul>
<li>
<label for="socketio-url">{{ $t("url") }}</label>
<input
id="socketio-url"
v-model="url"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<div>
<li>
<label for="socketio-path">{{ $t("path") }}</label>
<input
id="socketio-path"
v-model="path"
class="input"
spellcheck="false"
/>
</li>
</div>
<div>
<li>
<ButtonSecondary
id="connect"
:disabled="!urlValid"
name="connect"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
@click.native="toggleConnection"
/>
</li>
</div>
</ul>
</AppSection>
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />
</li>
</ul>
<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="row-wrapper">
<label>{{ $t("message") }}s</label>
</div>
</li>
</ul>
<ul
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"
:class="{ 'border-t': index == 0 }"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
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 v-if="index + 1 === communication.inputs.length">
<li>
<ButtonSecondary
id="send"
class="button"
name="send"
:disabled="!connectionState"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addCommunicationInput"
/>
</li>
</ul>
</AppSection>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="request">
<ul>
<li>
<label for="socketio-url">{{ $t("url") }}</label>
<input
id="socketio-url"
v-model="url"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<div>
<li>
<label for="socketio-path">{{ $t("path") }}</label>
<input
id="socketio-path"
v-model="path"
class="input"
spellcheck="false"
/>
</li>
</div>
<div>
<li>
<ButtonSecondary
id="connect"
:disabled="!urlValid"
name="connect"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="
!connectionState ? $t('connect') : $t('disconnect')
"
reverse
@click.native="toggleConnection"
/>
</li>
</div>
</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="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>
</li>
</ul>
<ul
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"
:class="{ 'border-t': index == 0 }"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
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 v-if="index + 1 === communication.inputs.length">
<li>
<ButtonSecondary
id="send"
class="button"
name="send"
:disabled="!connectionState"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addCommunicationInput"
/>
</li>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import { io as Client } from "socket.io-client"
import wildcard from "socketio-wildcard"
import debounce from "~/helpers/utils/debounce"
export default {
components: { Splitpanes, Pane },
data() {
return {
url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",

89
components/realtime/Sse.vue
View File

@@ -1,51 +1,62 @@
<template>
<div>
<AppSection label="request">
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
<input
id="server"
v-model="server"
type="url"
:class="{ error: !serverValid }"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
</li>
<div>
<li>
<ButtonSecondary
id="start"
:disabled="!serverValid"
name="start"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
:label="!connectionSSEState ? $t('start') : $t('stop')"
reverse
@click.native="toggleSSEConnection"
/>
</li>
</div>
</ul>
</AppSection>
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />
<div id="result"></div>
</li>
</ul>
</AppSection>
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="request">
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
<input
id="server"
v-model="server"
type="url"
:class="{ error: !serverValid }"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
</li>
<div>
<li>
<ButtonSecondary
id="start"
:disabled="!serverValid"
name="start"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
:label="!connectionSSEState ? $t('start') : $t('stop')"
reverse
@click.native="toggleSSEConnection"
/>
</li>
</div>
</ul>
</AppSection>
</Pane>
<Pane class="overflow-auto">
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />
<div id="result"></div>
</li>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import debounce from "~/helpers/utils/debounce"
export default {
components: { Splitpanes, Pane },
data() {
return {
connectionSSEState: false,

312
components/realtime/Websocket.vue
View File

@@ -1,157 +1,179 @@
<template>
<div>
<AppSection label="request">
<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="row-wrapper">
<label>{{ $t("protocols") }}</label>
</div>
</li>
</ul>
<ul
v-for="(protocol, index) of protocols"
:key="`protocol-${index}`"
:class="{ 'border-t': index == 0 }"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
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>
<AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />
</li>
</ul>
<ul>
<li>
<label for="websocket-message">{{ $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"
/>
</li>
<div>
<li>
<ButtonSecondary
id="send"
name="send"
:disabled="!connectionState"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
</AppSection>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="request">
<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="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
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
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"
/>
</li>
<div>
<li>
<ButtonSecondary
id="send"
name="send"
:disabled="!connectionState"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import debounce from "~/helpers/utils/debounce"
import "splitpanes/dist/splitpanes.css"
export default {
components: { Splitpanes, Pane },
data() {
return {
connectionState: false,

2
components/smart/Modal.vue
View File

@@ -44,7 +44,7 @@
</div>
</div>
<div v-if="hasFooterSlot" class="p-2">
<div class="row-wrapper">
<div class="flex flex-1">
<slot name="footer"></slot>
</div>
</div>

8
components/smart/Tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="tabs-wrapper">
<div class="tabs-wrapper bg-blue-300">
<div class="tabs" :class="styles">
<div class="flex w-0">
<div class="inline-flex">
@@ -65,17 +65,19 @@ export default {
.tabs {
@apply flex;
@apply flex-1;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply mt-4;
.tab {
@apply flex;
@apply items-center;
@apply justify-center;
@apply p-3;
@apply px-4;
@apply py-2;
@apply text-secondaryLight;
@apply font-semibold;
@apply text-xs;
@apply cursor-pointer;
@apply transition;
@apply border-b-2;

4
components/teams/Edit.vue
View File

@@ -7,7 +7,7 @@
<template #body>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label>{{ $t("label") }}</label>
</div>
</li>
@@ -25,7 +25,7 @@
</ul>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="memberList">{{ $t("team_member_list") }}</label>
<div></div>
</div>

2
components/teams/Team.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="row-wrapper">
<div class="flex flex-1">
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

2
components/teams/index.vue
View File

@@ -23,7 +23,7 @@
:editingteam-i-d="editingteamID"
@hide-modal="displayModalEdit(false)"
/>
<div class="row-wrapper">
<div class="flex flex-1">
<div>
<ButtonSecondary
icon="add"

44
layouts/default.vue
View File

@@ -1,36 +1,28 @@
<template>
<div class="flex h-screen w-screen">
<Splitpanes horizontal class="hoppscotch-theme">
<Pane class="flex-1">
<Splitpanes vertical class="hoppscotch-theme">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="flex flex-1 overflow-auto">
<Splitpanes vertical :dbl-click-splitter="false">
<Pane
v-if="!hideNavigationPane"
style="width: auto"
class="overflow-y-auto bg-primaryLight flex items-stretch"
class="overflow-auto"
>
<AppSidenav />
</Pane>
<Pane class="flex-1">
<Splitpanes
horizontal
:push-other-panes="false"
class="hoppscotch-theme"
>
<Pane v-if="!zenMode" style="height: auto">
<Pane class="flex flex-1 overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane v-if="!zenMode" style="height: auto" class="overflow-auto">
<AppHeader />
</Pane>
<Pane class="flex-1">
<Splitpanes vertical class="hoppscotch-theme">
<Pane class="overflow-y-auto">
<nuxt class="container" :hide-right-pane="hideRightPane" />
</Pane>
</Splitpanes>
<Pane class="flex flex-1 overflow-auto">
<nuxt class="container" :hide-right-pane="hideRightPane" />
</Pane>
</Splitpanes>
</Pane>
</Splitpanes>
</Pane>
<Pane style="height: auto" class="bg-primaryDark">
<Pane style="height: auto" class="overflow-auto">
<div class="flex justify-between">
<div>
<ButtonSecondary
@@ -56,13 +48,15 @@
@click.native="zenMode = !zenMode"
/>
</div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
@click.native="hideRightPane = !hideRightPane"
/>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
@click.native="hideRightPane = !hideRightPane"
/>
</div>
</div>
</Pane>
</Splitpanes>

68
pages/api.vue
View File

@@ -1,10 +1,10 @@
<template>
<!-- eslint-disable -->
<div>
<Splitpanes vertical class="hoppscotch-theme">
<Pane min-size="60" class="bg-violet-100">
<Splitpanes horizontal class="hoppscotch-theme">
<Pane class="bg-indigo-100">
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection ref="request" label="request">
<ul>
<li class="shrink">
@@ -142,7 +142,7 @@
</ul>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<span>
<SmartToggle
v-if="canListParameters"
@@ -175,7 +175,7 @@
"
/>
</div>
<div class="row-wrapper">
<div class="flex flex-1">
<span>
<ButtonSecondary
@click.native="showCurlImportModal = !showCurlImportModal"
@@ -262,7 +262,7 @@
<AppSection label="authentication">
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="auth">{{ $t("authentication") }}</label>
<div>
<ButtonSecondary
@@ -317,7 +317,7 @@
</ul>
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<input
class="input"
placeholder="Token"
@@ -343,7 +343,7 @@
</div>
</li>
</ul>
<div class="row-wrapper">
<div class="flex flex-1">
<SmartToggle
:on="!URL_EXCLUDES.auth"
@change="setExclude('auth', !$event)"
@@ -359,7 +359,7 @@
>
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="token-name">{{ $t("token_name") }}</label>
<div>
<ButtonSecondary
@@ -487,7 +487,7 @@
<AppSection v-if="showPreRequestScript" label="preRequest">
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label>
<div>
<ButtonSecondary
@@ -521,7 +521,7 @@
<AppSection v-if="testsEnabled" label="postRequestTests">
<ul>
<li>
<div class="row-wrapper">
<div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label>
<div>
<ButtonSecondary
@@ -547,7 +547,7 @@
completeMode="test"
/>
<div v-if="testReports.length !== 0">
<div class="row-wrapper">
<div class="flex flex-1">
<label>Test Reports</label>
<div>
<ButtonSecondary
@@ -570,7 +570,7 @@
</div>
<p
v-else-if="testReport.result"
class="row-wrapper info"
class="flex flex-1 info"
>
<span :class="testReport.styles.class">
<i class="material-icons">
@@ -595,7 +595,7 @@
</SmartTabs>
</section>
</Pane>
<Pane class="bg-purple-100">
<Pane class="overflow-auto">
<HttpResponse
:response="response"
:active="runningRequest"
@@ -604,27 +604,25 @@
</Pane>
</Splitpanes>
</Pane>
<Pane max-size="40" class="bg-pink-100">
<aside class="lg:max-w-md">
<section>
<SmartTabs>
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
<History
:page="'rest'"
@useHistory="handleUseHistory"
ref="historyComponent"
/>
</SmartTab>
<Pane max-size="35" min-size="20" class="overflow-auto">
<aside class="h-full bg-yellow-200">
<SmartTabs>
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
<History
:page="'rest'"
@useHistory="handleUseHistory"
ref="historyComponent"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<Collections />
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<Collections />
</SmartTab>
<SmartTab :id="'env'" :label="$t('environments')">
<Environments />
</SmartTab>
</SmartTabs>
</section>
<SmartTab :id="'env'" :label="$t('environments')">
<Environments />
</SmartTab>
</SmartTabs>
</aside>
</Pane>
</Splitpanes>
@@ -673,7 +671,7 @@
</div>
</template>
<template #body>
<div class="row-wrapper">
<div class="flex flex-1">
<label for="token-req-list">{{ $t("token_req_list") }}</label>
<div>
<ButtonSecondary

214
pages/doc.vue
View File

@@ -1,116 +1,123 @@
<template>
<div class="page">
<div class="content">
<div class="">
<AppSection label="import">
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p>
{{ $t("generate_docs_message") }}
</p>
<div class="row-wrapper">
<label for="collectionUpload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="JSON"
icon="folder"
:label="$t('import_collections')"
@click.native="$refs.collectionUpload.click()"
<div>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="import">
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p>
{{ $t("generate_docs_message") }}
</p>
<div class="flex flex-1">
<label for="collectionUpload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="JSON"
icon="folder"
:label="$t('import_collections')"
@click.native="$refs.collectionUpload.click()"
/>
</label>
<input
ref="collectionUpload"
class="input"
name="collectionUpload"
type="file"
@change="uploadCollection"
/>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="collectionJSON = '[]'"
/>
</div>
</div>
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
</label>
<input
ref="collectionUpload"
class="input"
name="collectionUpload"
type="file"
@change="uploadCollection"
/>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="collectionJSON = '[]'"
icon="topic"
:label="$t('generate_docs')"
@click.native="getDoc"
/>
</div>
</div>
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
<ButtonSecondary
icon="topic"
:label="$t('generate_docs')"
@click.native="getDoc"
/>
</div>
</AppSection>
<AppSection label="documentation">
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="items.length === 0">
{{ $t("generate_docs_first") }}
</p>
<div v-else class="row-wrapper">
<div
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null
"
>
<ButtonSecondary
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment"
label="$t('create_secret_gist')"
@click.native="createDocsGist"
/>
</AppSection>
</Pane>
<Pane class="overflow-auto">
<AppSection label="documentation">
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="items.length === 0">
{{ $t("generate_docs_first") }}
</p>
<div v-else class="flex flex-1">
<div
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null
"
>
<ButtonSecondary
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment"
label="$t('create_secret_gist')"
@click.native="createDocsGist"
/>
</div>
</div>
<div>
<span
v-for="(collection, index) in items"
:key="`collection-${index}`"
>
<DocsCollection :collection="collection" />
</span>
</div>
</div>
</div>
<div>
<span
v-for="(collection, index) in items"
:key="`collection-${index}`"
>
<DocsCollection :collection="collection" />
</span>
</div>
</div>
</AppSection>
</div>
<aside class="lg:max-w-md">
<Collections
:selected="selected"
:doc="true"
@use-collection="useSelectedCollection($event)"
@remove-collection="removeSelectedCollection($event)"
/>
</aside>
</div>
</AppSection>
</Pane>
</Splitpanes>
</Pane>
<Pane max-size="35" min-size="20" class="overflow-auto">
<aside class="lg:max-w-md">
<Collections
:selected="selected"
:doc="true"
@use-collection="useSelectedCollection($event)"
@remove-collection="removeSelectedCollection($event)"
/>
</aside>
</Pane>
</Splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import Mustache from "mustache"
import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md"
@@ -118,6 +125,7 @@ import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md"
export default {
components: { Splitpanes, Pane },
data() {
return {
collectionJSON: "[]",

856
pages/graphql.vue
View File

@@ -1,443 +1,448 @@
<template>
<div class="page">
<div class="content">
<div class="">
<AppSection label="endpoint">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
<input
id="url"
v-model="url"
type="url"
spellcheck="false"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="onPollSchemaClick()"
<div>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto">
<AppSection label="endpoint">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
<input
id="url"
v-model="url"
type="url"
spellcheck="false"
class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="onPollSchemaClick()"
/>
</li>
<div>
<li>
<ButtonSecondary
id="get"
name="get"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label="
!isPollingSchema ? $t('connect') : $t('disconnect')
"
@click.native="onPollSchemaClick"
/>
</li>
</div>
</ul>
</AppSection>
<AppSection label="headers">
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
<li>
<div class="flex flex-1">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="headers = []"
/>
</div>
</div>
</li>
</ul>
<ul
v-for="(header, index) in headers"
:key="`${header.value}_${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"
autofocus
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
/>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
@click.native="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active')
? !header.active
: false,
})
"
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.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="removeRequestHeader(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</div>
</AppSection>
<AppSection label="query">
<div class="flex flex-1 gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
icon="play_arrow"
@click.native="runQuery()"
/>
<ButtonSecondary
ref="copyQueryButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
:icon="copyQueryIcon"
@click.native="copyQuery"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
:icon="prettifyIcon"
@click.native="doPrettifyQuery"
/>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
@click.native="saveRequest"
/>
</div>
</div>
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
@update-query="updateQuery"
/>
</li>
<div>
<li>
<ButtonSecondary
id="get"
name="get"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label="!isPollingSchema ? $t('connect') : $t('disconnect')"
@click.native="onPollSchemaClick"
</AppSection>
<AppSection label="variables">
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<SmartAceEditor
v-model="variableString"
:lang="'json'"
:options="{
maxLines: 10,
minLines: 5,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</li>
</div>
</ul>
</AppSection>
<AppSection label="headers">
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto">
<AppSection ref="schema" label="schema">
<div class="flex flex-1">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
<ButtonSecondary
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse
? $t('expand_response')
: $t('collapse_response')
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
:icon="copySchemaIcon"
@click.native="copySchema"
/>
</div>
</div>
<SmartAceEditor
v-if="schema"
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
minLines: 16,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')"
name="status"
readonly
type="text"
/>
</AppSection>
<AppSection ref="response" label="response">
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="flex flex-1">
<label for="responseField">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="headers = []"
:title="$t('download_file')"
:icon="downloadResponseIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
v-if="response"
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyResponseIcon"
@click.native="copyResponse"
/>
</div>
</div>
</li>
</ul>
<ul
v-for="(header, index) in headers"
:key="`${header.value}_${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"
autofocus
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
/>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
@click.native="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active')
? !header.active
: false,
})
"
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.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="removeRequestHeader(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</div>
</AppSection>
<AppSection ref="schema" label="schema">
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
<ButtonSecondary
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse
? $t('expand_response')
: $t('collapse_response')
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
:icon="copySchemaIcon"
@click.native="copySchema"
/>
</div>
</div>
<SmartAceEditor
v-if="schema"
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
minLines: 16,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')"
name="status"
readonly
type="text"
/>
</AppSection>
<AppSection label="query">
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
icon="play_arrow"
@click.native="runQuery()"
/>
<ButtonSecondary
ref="copyQueryButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
:icon="copyQueryIcon"
@click.native="copyQuery"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
:icon="prettifyIcon"
@click.native="doPrettifyQuery"
/>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
@click.native="saveRequest"
/>
</div>
</div>
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
@update-query="updateQuery"
/>
</AppSection>
<AppSection label="variables">
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<SmartAceEditor
v-model="variableString"
:lang="'json'"
:options="{
maxLines: 10,
minLines: 5,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</div>
</AppSection>
<AppSection ref="response" label="response">
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="row-wrapper">
<label for="responseField">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
<SmartAceEditor
v-if="response"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadResponseIcon"
@click.native="downloadResponse"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<ButtonSecondary
v-if="response"
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyResponseIcon"
@click.native="copyResponse"
/>
</div>
</div>
<SmartAceEditor
v-if="response"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
name="status"
readonly
type="text"
/>
</div>
</AppSection>
</div>
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
name="status"
readonly
type="text"
:placeholder="$t('search')"
class="input rounded-t-lg"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<div
v-for="field in filteredQueryFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="$t('mutations')"
>
<div
v-for="field in filteredMutationFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
ref="typesTab"
:label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
>
<GraphqlType
:gql-type="type"
:gql-types="graphqlTypes"
:is-highlighted="
isGqlTypeHighlighted({ gqlType: type })
"
:highlighted-fields="
getGqlTypeHighlightedFields({ gqlType: type })
"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
</div>
</SmartTabs>
</section>
<p
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
>
{{ $t("send_request_first") }}
</p>
</div>
</AppSection>
</SmartTab>
</Pane>
</Splitpanes>
</Pane>
<Pane max-size="35" min-size="20" class="overflow-auto">
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="input rounded-t-lg"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<div
v-for="field in filteredQueryFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')">
<History
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="$t('mutations')"
>
<div
v-for="field in filteredMutationFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
ref="typesTab"
:label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
>
<GraphqlType
:gql-type="type"
:gql-types="graphqlTypes"
:is-highlighted="
isGqlTypeHighlighted({ gqlType: type })
"
:highlighted-fields="
getGqlTypeHighlightedFields({ gqlType: type })
"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
</div>
</SmartTabs>
</section>
<p
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
>
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')">
<History
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
</SmartTabs>
</aside>
</Pane>
</Splitpanes>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
</SmartTabs>
</aside>
</div>
<CollectionsSaveRequest
mode="graphql"
:show="showSaveRequestModal"
@@ -448,6 +453,7 @@
</template>
<script>
import { Splitpanes, Pane } from "splitpanes"
import * as gql from "graphql"
import { commonHeaders } from "~/helpers/headers"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
@@ -456,10 +462,10 @@ import { getSettingSubject } from "~/newstore/settings"
import { addGraphqlHistoryEntry } from "~/newstore/history"
export default {
components: { Splitpanes, Pane },
beforeRouteLeave(_to, _from, next) {
this.isPollingSchema = false
if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
next()
},
data() {
@@ -1122,8 +1128,6 @@ export default {
.gqlTabs {
@apply relative;
@apply overflow-auto;
max-height: calc(100vh - 192px);
}
.gqlRunQuery {

35
pages/realtime.vue
View File

@@ -1,24 +1,19 @@
<template>
<div class="page">
<section id="options">
<SmartTabs>
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
<RealtimeWebsocket />
</SmartTab>
<SmartTab :id="'sse'" :label="$t('sse')">
<RealtimeSse />
</SmartTab>
<SmartTab :id="'socketio'" :label="$t('socketio')">
<RealtimeSocketio />
</SmartTab>
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
<RealtimeMqtt />
</SmartTab>
</SmartTabs>
</section>
<div>
<SmartTabs>
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
<RealtimeWebsocket />
</SmartTab>
<SmartTab :id="'sse'" :label="$t('sse')">
<RealtimeSse />
</SmartTab>
<SmartTab :id="'socketio'" :label="$t('socketio')">
<RealtimeSocketio />
</SmartTab>
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
<RealtimeMqtt />
</SmartTab>
</SmartTabs>
</div>
</template>

2
pages/settings.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page">
<div>
<div class="space-y-8">
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="md:col-span-1 p-8">