is a light-weight, web based API development suite.
| Websocket.vue (hoppscotch-2.0.0) | : | Websocket.vue (hoppscotch-2.1.0) |
|---|
| <template> | | <template> |
|
| <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical> | | <Splitpanes |
| <Pane class="hide-scrollbar !overflow-auto"> | | class="smart-splitter" |
| <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal> | | :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768" |
| | :class="{ |
| | '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768, |
| | }" |
| | :horizontal="!(windowInnerWidth.x.value >= 768)" |
| | > |
| | <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto"> |
| | <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT"> |
| <Pane class="hide-scrollbar !overflow-auto"> | | <Pane class="hide-scrollbar !overflow-auto"> |
| <AppSection label="request"> | | <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="space-x-2 flex-1 inline-flex"> | | <div class="space-x-2 flex-1 inline-flex"> |
| <input | | <input |
| id="websocket-url" | | id="websocket-url" |
| v-model="url" | | v-model="url" |
| v-focus | | v-focus |
| class=" | | class=" |
| bg-primaryLight | | bg-primaryLight |
| | |
| skipping to change at line 26 | | skipping to change at line 33 |
|---|
| rounded | | rounded |
| text-secondaryDark | | text-secondaryDark |
| w-full | | w-full |
| py-2 | | py-2 |
| px-4 | | px-4 |
| hover:border-dividerDark | | hover:border-dividerDark |
| focus-visible:bg-transparent | | focus-visible:bg-transparent |
| focus-visible:border-dividerDark | | focus-visible:border-dividerDark |
| " | | " |
| type="url" | | type="url" |
|
| | autocomplete="off" |
| spellcheck="false" | | spellcheck="false" |
| :class="{ error: !urlValid }" | | :class="{ error: !urlValid }" |
| :placeholder="$t('websocket.url')" | | :placeholder="$t('websocket.url')" |
|
| | :disabled="connectionState" |
| @keyup.enter="urlValid ? toggleConnection() : null" | | @keyup.enter="urlValid ? toggleConnection() : null" |
| /> | | /> |
| <ButtonPrimary | | <ButtonPrimary |
| id="connect" | | id="connect" |
| :disabled="!urlValid" | | :disabled="!urlValid" |
| class="w-32" | | class="w-32" |
| name="connect" | | name="connect" |
| :label=" | | :label=" |
| !connectionState | | !connectionState |
| ? $t('action.connect') | | ? $t('action.connect') |
| | |
| skipping to change at line 66 | | skipping to change at line 75 |
|---|
| justify-between | | justify-between |
| " | | " |
| > | | > |
| <label class="font-semibold text-secondaryLight"> | | <label class="font-semibold text-secondaryLight"> |
| {{ $t("websocket.protocols") }} | | {{ $t("websocket.protocols") }} |
| </label> | | </label> |
| <div class="flex"> | | <div class="flex"> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.clear_all')" | | :title="$t('action.clear_all')" |
|
| icon="clear_all" | | svg="trash-2" |
| @click.native="clearContent" | | @click.native="clearContent" |
| /> | | /> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('add.new')" | | :title="$t('add.new')" |
|
| icon="add" | | svg="plus" |
| @click.native="addProtocol" | | @click.native="addProtocol" |
| /> | | /> |
| </div> | | </div> |
| </div> | | </div> |
| <div | | <div |
| v-for="(protocol, index) of protocols" | | v-for="(protocol, index) of protocols" |
| :key="`protocol-${index}`" | | :key="`protocol-${index}`" |
| class=" | | class=" |
| divide-x divide-dividerLight | | divide-x divide-dividerLight |
| border-b border-dividerLight | | border-b border-dividerLight |
| flex | | flex |
| " | | " |
| > | | > |
| <input | | <input |
| v-model="protocol.value" | | v-model="protocol.value" |
| class="bg-transparent flex flex-1 py-2 px-4" | | class="bg-transparent flex flex-1 py-2 px-4" |
| :placeholder="$t('count.protocol', { count: index + 1 })" | | :placeholder="$t('count.protocol', { count: index + 1 })" |
| name="message" | | name="message" |
| type="text" | | type="text" |
|
| | autocomplete="off" |
| /> | | /> |
| <span> | | <span> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title=" | | :title=" |
| protocol.hasOwnProperty('active') | | protocol.hasOwnProperty('active') |
| ? protocol.active | | ? protocol.active |
| ? $t('action.turn_off') | | ? $t('action.turn_off') |
| : $t('action.turn_on') | | : $t('action.turn_on') |
| : $t('action.turn_off') | | : $t('action.turn_off') |
| " | | " |
|
| :icon=" | | :svg=" |
| protocol.hasOwnProperty('active') | | protocol.hasOwnProperty('active') |
| ? protocol.active | | ? protocol.active |
|
| ? 'check_circle_outline' | | ? 'check-circle' |
| : 'radio_button_unchecked' | | : 'circle' |
| : 'check_circle_outline' | | : 'check-circle' |
| " | | " |
| color="green" | | color="green" |
| @click.native=" | | @click.native=" |
| protocol.active = protocol.hasOwnProperty('active') | | protocol.active = protocol.hasOwnProperty('active') |
| ? !protocol.active | | ? !protocol.active |
| : false | | : false |
| " | | " |
| /> | | /> |
| </span> | | </span> |
| <span> | | <span> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.remove')" | | :title="$t('action.remove')" |
|
| icon="remove_circle_outline" | | svg="trash" |
| color="red" | | color="red" |
| @click.native="deleteProtocol({ index })" | | @click.native="deleteProtocol({ index })" |
| /> | | /> |
| </span> | | </span> |
| </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> | | <img |
| | :src="`/images/states/${$colorMode.value}/add_category.svg`" |
| | loading="lazy" |
| | class=" |
| | flex-col |
| | my-4 |
| | object-contain object-center |
| | h-16 |
| | w-16 |
| | inline-flex |
| | " |
| | /> |
| <span class="text-center"> | | <span class="text-center"> |
| {{ $t("empty.protocols") }} | | {{ $t("empty.protocols") }} |
| </span> | | </span> |
| </div> | | </div> |
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| <Pane class="hide-scrollbar !overflow-auto"> | | <Pane class="hide-scrollbar !overflow-auto"> |
| <AppSection label="response"> | | <AppSection label="response"> |
| <RealtimeLog | | <RealtimeLog |
| :title="$t('websocket.log')" | | :title="$t('websocket.log')" |
| :log="communication.log" | | :log="communication.log" |
| /> | | /> |
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| </Splitpanes> | | </Splitpanes> |
| </Pane> | | </Pane> |
| <Pane | | <Pane |
|
| v-if="RIGHT_SIDEBAR" | | v-if="SIDEBAR" |
| max-size="35" | | |
| size="25" | | size="25" |
| min-size="20" | | min-size="20" |
| class="hide-scrollbar !overflow-auto" | | class="hide-scrollbar !overflow-auto" |
| > | | > |
| <AppSection label="messages"> | | <AppSection label="messages"> |
| <div class="flex flex-col flex-1 p-4 inline-flex"> | | <div class="flex flex-col flex-1 p-4 inline-flex"> |
| <label | | <label |
| for="websocket-message" | | for="websocket-message" |
| class="font-semibold text-secondaryLight" | | class="font-semibold text-secondaryLight" |
| > | | > |
| {{ $t("websocket.communication") }} | | {{ $t("websocket.communication") }} |
| </label> | | </label> |
| </div> | | </div> |
| <div class="flex space-x-2 px-4"> | | <div class="flex space-x-2 px-4"> |
| <input | | <input |
| id="websocket-message" | | id="websocket-message" |
| v-model="communication.input" | | v-model="communication.input" |
| name="message" | | name="message" |
| type="text" | | type="text" |
|
| | autocomplete="off" |
| :disabled="!connectionState" | | :disabled="!connectionState" |
| :placeholder="$t('websocket.message')" | | :placeholder="$t('websocket.message')" |
| class="input" | | class="input" |
| @keyup.enter="connectionState ? sendMessage() : null" | | @keyup.enter="connectionState ? sendMessage() : null" |
| @keyup.up="connectionState ? walkHistory('up') : null" | | @keyup.up="connectionState ? walkHistory('up') : null" |
| @keyup.down="connectionState ? walkHistory('down') : null" | | @keyup.down="connectionState ? walkHistory('down') : null" |
| /> | | /> |
| <ButtonPrimary | | <ButtonPrimary |
| id="send" | | id="send" |
| name="send" | | name="send" |
| | |
| skipping to change at line 201 | | skipping to change at line 222 |
|---|
| </div> | | </div> |
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| </Splitpanes> | | </Splitpanes> |
| </template> | | </template> |
| | |
| <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 "splitpanes/dist/splitpanes.css" |
|
| | import debounce from "lodash/debounce" |
| import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" | | import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" |
|
| import debounce from "~/helpers/utils/debounce" | | import useWindowSize from "~/helpers/utils/useWindowSize" |
| import { useSetting } from "~/newstore/settings" | | import { useSetting } from "~/newstore/settings" |
| | |
| export default defineComponent({ | | export default defineComponent({ |
| components: { Splitpanes, Pane }, | | components: { Splitpanes, Pane }, |
| setup() { | | setup() { |
| return { | | return { |
|
| RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"), | | windowInnerWidth: useWindowSize(), |
| | SIDEBAR: useSetting("SIDEBAR"), |
| | COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"), |
| | SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"), |
| } | | } |
| }, | | }, |
| data() { | | data() { |
| return { | | return { |
| connectionState: false, | | connectionState: false, |
| connectingState: false, | | connectingState: false, |
|
| url: "wss://echo.websocket.org", | | url: "wss://hoppscotch-websocket.herokuapp.com", |
| isUrlValid: true, | | isUrlValid: true, |
| socket: null, | | socket: null, |
| communication: { | | communication: { |
| log: null, | | log: null, |
| input: "", | | input: "", |
| }, | | }, |
| currentIndex: -1, // index of the message log array to put in input box | | currentIndex: -1, // index of the message log array to put in input box |
| protocols: [], | | protocols: [], |
| activeProtocols: [], | | activeProtocols: [], |
| } | | } |
| | | |
| End of changes. 16 change blocks. |
|---|
| 16 lines changed or deleted | | 41 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 