"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

---