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

fix(ui): realtime pages

Browse Source
This commit is contained in:
liyasthomas
2021-08-04 22:07:12 +05:30
parent b524af174a
commit b2baeb0a5d
15 changed files with 164 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/collections/my/Request.vue
View File

@@ -110,6 +110,7 @@
<script> <script>
import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest" import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession" import { setRESTRequest } from "~/newstore/RESTSession"
export default { export default {
props: { props: {
request: { type: Object, default: () => {} }, request: { type: Object, default: () => {} },

1
components/collections/teams/Request.vue
View File

@@ -103,6 +103,7 @@
<script> <script>
import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest" import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession" import { setRESTRequest } from "~/newstore/RESTSession"
export default { export default {
props: { props: {
request: { type: Object, default: () => {} }, request: { type: Object, default: () => {} },

1
components/graphql/QueryEditor.vue
View File

@@ -9,7 +9,6 @@ import ace from "ace-builds"
import "ace-builds/webpack-resolver" import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools" import "ace-builds/src-noconflict/ext-language_tools"
import "ace-builds/src-noconflict/mode-graphqlschema" import "ace-builds/src-noconflict/mode-graphqlschema"
import * as gql from "graphql" import * as gql from "graphql"
import { getAutocompleteSuggestions } from "graphql-language-service-interface" import { getAutocompleteSuggestions } from "graphql-language-service-interface"
import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode" import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"

6
components/history/index.vue
View File

@@ -22,8 +22,8 @@
py-2 py-2
pr-2 pr-2
pl-9 pl-9
focus:outline-none
truncate truncate
focus:outline-none
" "
:placeholder="$t('search')" :placeholder="$t('search')"
/> />
@@ -138,7 +138,9 @@ export default {
}) })
}, },
useHistory(entry) { useHistory(entry) {
setRESTRequest(entry) if (this.page === "rest") setRESTRequest(entry)
// TODO: restore gql entry to request section
else console.log("not implemented yet")
}, },
deleteHistory(entry) { deleteHistory(entry) {
if (this.page === "rest") deleteRESTHistoryEntry(entry) if (this.page === "rest") deleteRESTHistoryEntry(entry)

1
components/http/Headers.vue
View File

@@ -165,7 +165,6 @@ import {
deleteRESTHeader, deleteRESTHeader,
deleteAllRESTHeaders, deleteAllRESTHeaders,
} from "~/newstore/RESTSession" } from "~/newstore/RESTSession"
import { commonHeaders } from "~/helpers/headers" import { commonHeaders } from "~/helpers/headers"
import { getSettingSubject } from "~/newstore/settings" import { getSettingSubject } from "~/newstore/settings"

2
components/realtime/Log.vue
View File

@@ -57,7 +57,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.realtime-log { .realtime-log {
@apply p-4; @apply p-4;
@apply bg-primaryDark; @apply bg-primaryLight;
@apply text-secondary; @apply text-secondary;
@apply overflow-auto; @apply overflow-auto;

3
components/realtime/Mqtt.vue
View File

@@ -68,7 +68,7 @@
spellcheck="false" spellcheck="false"
/> />
</div> </div>
<div class="bg-primary flex flex-1 p-4 items-center justify-between"> <div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold">{{ <label for="mqtt-message" class="font-semibold">{{
$t("communication") $t("communication")
}}</label> }}</label>
@@ -133,6 +133,7 @@
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import Paho from "paho-mqtt" import Paho from "paho-mqtt"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"

3
components/realtime/Socketio.vue
View File

@@ -93,7 +93,7 @@
:disabled="!connectionState" :disabled="!connectionState"
/> />
</div> </div>
<div class="bg-primary flex flex-1 p-4 items-center justify-between"> <div class="flex flex-1 p-4 items-center justify-between">
<label class="font-semibold">{{ $t("communication") }}</label> <label class="font-semibold">{{ $t("communication") }}</label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
@@ -149,6 +149,7 @@
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { io as Client } from "socket.io-client" import { io as Client } from "socket.io-client"
import wildcard from "socketio-wildcard" import wildcard from "socketio-wildcard"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"

69
components/realtime/Sse.vue
View File

@@ -1,42 +1,40 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="flex-1 inline-flex">
<div class="flex-1 inline-flex"> <input
<input id="server"
id="server" v-model="server"
v-model="server" type="url"
type="url" :class="{ error: !serverValid }"
:class="{ error: !serverValid }" class="
class=" bg-primaryLight
bg-primaryLight border border-divider
border border-divider rounded-l
rounded-l font-semibold font-mono
font-semibold font-mono text-secondaryDark
text-secondaryDark w-full
w-full py-2
py-2 px-4
px-4 transition
transition truncate
truncate focus:border-accent focus:outline-none
focus:outline-none focus:border-accent "
" :placeholder="$t('url')"
:placeholder="$t('url')" @keyup.enter="serverValid ? toggleSSEConnection() : null"
@keyup.enter="serverValid ? toggleSSEConnection() : null" />
/> <ButtonPrimary
<ButtonPrimary id="start"
id="start" :disabled="!serverValid"
:disabled="!serverValid" name="start"
name="start" class="rounded-l-none w-22"
class="rounded-l-none w-22" :label="!connectionSSEState ? $t('start') : $t('stop')"
:label="!connectionSSEState ? $t('start') : $t('stop')" :loading="connectingState"
:loading="connectingState" @click.native="toggleSSEConnection"
@click.native="toggleSSEConnection" />
/>
</div>
</div> </div>
</AppSection> </div>
</Pane> </Pane>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
@@ -53,6 +51,7 @@
<script> <script>
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"

207
components/realtime/Websocket.vue
View File

@@ -39,113 +39,113 @@
/> />
</div> </div>
</div> </div>
</AppSection> <div
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-upperPrimaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold">
{{ $t("websocket.protocols") }}
</label>
<div class="flex">
<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-dividerLight
border-b border-dividerLight
flex
"
:class="{ 'border-t': index == 0 }"
>
<input
v-model="protocol.value"
class=" class="
bg-primaryLight bg-primary
flex border-b border-dividerLight
font-semibold font-mono flex flex-1
flex-1 top-upperPrimaryStickyFold
py-2 pl-4
px-4 z-10
focus:outline-none sticky
items-center
justify-between
" "
:placeholder="$t('count.protocol', { count: index + 1 })" >
name="message" <label class="font-semibold">
type="text" {{ $t("websocket.protocols") }}
/> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title=" :title="$t('clear_all')"
protocol.hasOwnProperty('active') icon="clear_all"
? protocol.active @click.native="clearContent"
? $t('action.turn_off') />
: $t('action.turn_on') <ButtonSecondary
: $t('action.turn_off') v-tippy="{ theme: 'tooltip' }"
" :title="$t('add.new')"
:icon=" icon="add"
protocol.hasOwnProperty('active') @click.native="addProtocol"
? protocol.active />
? 'check_box' </div>
: 'check_box_outline_blank'
: 'check_box'
"
color="green"
@click.native="
protocol.active = protocol.hasOwnProperty('active')
? !protocol.active
: false
"
/>
</div> </div>
<div> <div
<ButtonSecondary v-for="(protocol, index) of protocols"
v-tippy="{ theme: 'tooltip' }" :key="`protocol-${index}`"
:title="$t('delete')" class="
icon="delete" divide-x divide-dividerLight
color="red" border-b border-dividerLight
@click.native="deleteProtocol({ index })" flex
"
:class="{ 'border-t': index == 0 }"
>
<input
v-model="protocol.value"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
px-4
focus:outline-none
"
:placeholder="$t('count.protocol', { count: index + 1 })"
name="message"
type="text"
/> />
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
protocol.hasOwnProperty('active')
? protocol.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
protocol.hasOwnProperty('active')
? protocol.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
color="green"
@click.native="
protocol.active = protocol.hasOwnProperty('active')
? !protocol.active
: false
"
/>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
color="red"
@click.native="deleteProtocol({ index })"
/>
</div>
</div> </div>
</div> <div
<div v-if="protocols.length === 0"
v-if="protocols.length === 0" class="
class=" flex flex-col
flex flex-col text-secondaryLight
text-secondaryLight p-4
p-4 items-center
items-center justify-center
justify-center "
" >
> <i class="opacity-75 pb-2 material-icons">topic</i>
<i class="opacity-75 pb-2 material-icons">topic</i> <span class="text-center">
<span class="text-center"> {{ $t("empty.protocols") }}
{{ $t("empty.protocols") }} </span>
</span> </div>
</div> </AppSection>
</Pane> </Pane>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
@@ -197,10 +197,11 @@
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
import "splitpanes/dist/splitpanes.css"
import { useSetting } from "~/newstore/settings" import { useSetting } from "~/newstore/settings"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane }, components: { Splitpanes, Pane },
setup() { setup() {

1
helpers/tern.js
View File

@@ -1,5 +1,4 @@
import tern from "tern" import tern from "tern"
import { registerTernLinter } from "./ternlint" import { registerTernLinter } from "./ternlint"
import ECMA_DEF from "~/helpers/terndoc/ecma.json" import ECMA_DEF from "~/helpers/terndoc/ecma.json"
import PW_PRE_DEF from "~/helpers/terndoc/pw-pre.json" import PW_PRE_DEF from "~/helpers/terndoc/pw-pre.json"

1
pages/documentation.vue
View File

@@ -175,6 +175,7 @@
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import Mustache from "mustache" import Mustache from "mustache"
import { currentUser$ } from "~/helpers/fb/auth" import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md" import DocsTemplate from "~/assets/md/docs.md"

1
pages/graphql.vue
View File

@@ -604,6 +604,7 @@
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import * as gql from "graphql" import * as gql from "graphql"
import { commonHeaders } from "~/helpers/headers" import { commonHeaders } from "~/helpers/headers"
import { getPlatformSpecialKey } from "~/helpers/platformutils" import { getPlatformSpecialKey } from "~/helpers/platformutils"

1
pages/index.vue
View File

@@ -83,7 +83,6 @@ import {
} from "@nuxtjs/composition-api" } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css" import "splitpanes/dist/splitpanes.css"
import { map } from "rxjs/operators" import { map } from "rxjs/operators"
import { useSetting } from "~/newstore/settings" import { useSetting } from "~/newstore/settings"
import { import {

18
pages/realtime.vue
View File

@@ -1,15 +1,23 @@
<template> <template>
<SmartTabs> <SmartTabs
<SmartTab id="websocket" :label="$t('tab.websocket')" :selected="true"> class="h-full overflow-hidden"
styles="sticky top-0 z-10 !overflow-visible"
>
<SmartTab
id="websocket"
:label="$t('tab.websocket')"
:selected="true"
class="h-full"
>
<RealtimeWebsocket /> <RealtimeWebsocket />
</SmartTab> </SmartTab>
<SmartTab id="sse" :label="$t('sse')"> <SmartTab id="sse" :label="$t('sse')" class="h-full">
<RealtimeSse /> <RealtimeSse />
</SmartTab> </SmartTab>
<SmartTab id="socketio" :label="$t('socketio')"> <SmartTab id="socketio" :label="$t('socketio')" class="h-full">
<RealtimeSocketio /> <RealtimeSocketio />
</SmartTab> </SmartTab>
<SmartTab id="mqtt" :label="$t('tab.mqtt')"> <SmartTab id="mqtt" :label="$t('tab.mqtt')" class="h-full">
<RealtimeMqtt /> <RealtimeMqtt />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>