"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "components/realtime/Mqtt.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.

Mqtt.vue  (hoppscotch-2.0.0):Mqtt.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="mqtt-url" id="mqtt-url"
v-model="url" v-model="url"
v-focus v-focus
type="url" type="url"
autocomplete="off"
spellcheck="false" spellcheck="false"
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
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
" "
:placeholder="$t('mqtt.url')" :placeholder="$t('mqtt.url')"
:disabled="connectionState"
/> />
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!validUrl" :disabled="!validUrl"
class="w-32" class="w-32"
:label=" :label="
connectionState connectionState
? $t('action.disconnect') ? $t('action.disconnect')
: $t('action.connect') : $t('action.connect')
" "
skipping to change at line 53 skipping to change at line 62
</AppSection> </AppSection>
</Pane> </Pane>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="response"> <AppSection label="response">
<RealtimeLog :title="$t('mqtt.log')" :log="log" /> <RealtimeLog :title="$t('mqtt.log')" :log="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 for="pub_topic" class="font-semibold text-secondaryLight"> <label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
<div class="flex px-4"> <div class="flex px-4">
<input <input
id="pub_topic" id="pub_topic"
v-model="pub_topic" v-model="pub_topic"
class="input" class="input"
:placeholder="$t('mqtt.topic_name')" :placeholder="$t('mqtt.topic_name')"
type="text" type="text"
autocomplete="off"
spellcheck="false" spellcheck="false"
/> />
</div> </div>
<div class="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 text-secondaryLight"> <label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }} {{ $t("mqtt.communication") }}
</label> </label>
</div> </div>
<div class="flex space-x-2 px-4"> <div class="flex space-x-2 px-4">
<input <input
id="mqtt-message" id="mqtt-message"
v-model="msg" v-model="msg"
class="input" class="input"
type="text" type="text"
autocomplete="off"
:placeholder="$t('mqtt.message')" :placeholder="$t('mqtt.message')"
spellcheck="false" spellcheck="false"
/> />
<ButtonPrimary <ButtonPrimary
id="publish" id="publish"
name="get" name="get"
:disabled="!canpublish" :disabled="!canpublish"
:label="$t('mqtt.publish')" :label="$t('mqtt.publish')"
@click.native="publish" @click.native="publish"
/> />
skipping to change at line 115 skipping to change at line 125
> >
<label for="sub_topic" class="font-semibold text-secondaryLight"> <label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
<div class="flex space-x-2 px-4"> <div class="flex space-x-2 px-4">
<input <input
id="sub_topic" id="sub_topic"
v-model="sub_topic" v-model="sub_topic"
type="text" type="text"
autocomplete="off"
:placeholder="$t('mqtt.topic_name')" :placeholder="$t('mqtt.topic_name')"
spellcheck="false" spellcheck="false"
class="input" class="input"
/> />
<ButtonPrimary <ButtonPrimary
id="subscribe" id="subscribe"
name="get" name="get"
:disabled="!cansubscribe" :disabled="!cansubscribe"
:label=" :label="
subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe') subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
skipping to change at line 140 skipping to change at line 151
</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 Paho from "paho-mqtt" import Paho from "paho-mqtt"
import debounce from "~/helpers/utils/debounce" import debounce from "lodash/debounce"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings" import { useSetting } from "~/newstore/settings"
import useWindowSize from "~/helpers/utils/useWindowSize"
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 {
url: "wss://test.mosquitto.org:8081", url: "wss://test.mosquitto.org:8081",
isUrlValid: true, isUrlValid: true,
client: null, client: null,
pub_topic: "", pub_topic: "",
sub_topic: "", sub_topic: "",
msg: "", msg: "",
 End of changes. 10 change blocks. 
7 lines changed or deleted 22 lines changed or added

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