"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "components/realtime/Websocket.vue" between
hoppscotch-2.0.0.tar.gz and hoppscotch-2.1.0.tar.gz

About: Hoppscotch 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

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)