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

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-17 19:17:57 +05:30
parent e424d06026
commit d9ddc184cb
21 changed files with 455 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/firebase/Inputform.vue
View File

@@ -2,25 +2,30 @@
<div class="flex-col">
<div class="show-on-large-screen">
<input
v-model="message"
:aria-label="$t('label')"
type="text"
autofocus
v-model="message"
:placeholder="$t('paste_a_note')"
@keyup.enter="formPost"
class="rounded-t-lg"
@keyup.enter="formPost"
/>
</div>
<div class="border-b show-on-large-screen border-brdColor">
<input
v-model="label"
:aria-label="$t('label')"
type="text"
autofocus
v-model="label"
:placeholder="$t('label')"
@keyup.enter="formPost"
/>
<button class="icon" :disabled="!(this.message || this.label)" value="Save" @click="formPost">
<button
class="icon"
:disabled="!(message || label)"
value="Save"
@click="formPost"
>
<i class="material-icons">add</i>
<span>Add</span>
</button>

2
components/firebase/Logout.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<button class="icon" @click="logout" v-close-popover>
<button v-close-popover class="icon" @click="logout">
<i class="material-icons">exit_to_app</i>
<span>{{ $t("logout") }}</span>
</button>

36
components/firebase/__tests__/Feeds.spec.js
View File

@@ -1,5 +1,7 @@
import feeds from "../Feeds"
import { shallowMount } from "@vue/test-utils"
import feeds from "../Feeds"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
@@ -27,8 +29,6 @@ jest.mock("~/helpers/fb", () => ({
},
}))
import { fb } from "~/helpers/fb"
const factory = () =>
shallowMount(feeds, {
mocks: {
@@ -53,7 +53,9 @@ describe("feeds", () => {
test("renders all the current feeds", () => {
const wrapper = factory()
expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(4)
expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(
4
)
})
test("feeds with no label displays the 'no_label' message", () => {
@@ -63,7 +65,7 @@ describe("feeds", () => {
wrapper
.findAll("label[data-test='list-label']")
.wrappers.map((e) => e.text())
.filter((text) => text == "no_label")
.filter((text) => text === "no_label")
).toHaveLength(2)
})
@@ -74,30 +76,28 @@ describe("feeds", () => {
wrapper
.findAll("li[data-test='list-message']")
.wrappers.map((e) => e.text())
.filter((text) => text == "empty")
.filter((text) => text === "empty")
).toHaveLength(2)
})
test("labels in the list are proper", () => {
const wrapper = factory()
expect(wrapper.findAll("label[data-test='list-label']").wrappers.map((e) => e.text())).toEqual([
"First",
"Second",
"no_label",
"no_label",
])
expect(
wrapper
.findAll("label[data-test='list-label']")
.wrappers.map((e) => e.text())
).toEqual(["First", "Second", "no_label", "no_label"])
})
test("messages in the list are proper", () => {
const wrapper = factory()
expect(wrapper.findAll("li[data-test='list-message']").wrappers.map((e) => e.text())).toEqual([
"First Message",
"empty",
"Third Message",
"empty",
])
expect(
wrapper
.findAll("li[data-test='list-message']")
.wrappers.map((e) => e.text())
).toEqual(["First Message", "empty", "Third Message", "empty"])
})
test("clicking on the delete button deletes the feed", async () => {

6
components/firebase/__tests__/Inputform.spec.js
View File

@@ -1,5 +1,7 @@
import inputform from "../Inputform"
import { shallowMount } from "@vue/test-utils"
import inputform from "../Inputform"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
@@ -9,8 +11,6 @@ jest.mock("~/helpers/fb", () => ({
},
}))
import { fb } from "~/helpers/fb"
const factory = () =>
shallowMount(inputform, {
mocks: {

10
components/firebase/__tests__/Logout.spec.js
View File

@@ -1,5 +1,7 @@
import logout from "../Logout"
import { shallowMount, createLocalVue } from "@vue/test-utils"
import logout from "../Logout"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
@@ -9,8 +11,6 @@ jest.mock("~/helpers/fb", () => ({
},
}))
import { fb } from "~/helpers/fb"
const $toast = {
info: jest.fn(),
show: jest.fn(),
@@ -53,7 +53,9 @@ describe("logout", () => {
})
test("failed signout request fires a error toast", async () => {
fb.signOutUser.mockImplementationOnce(() => Promise.reject("test reject"))
fb.signOutUser.mockImplementationOnce(() =>
Promise.reject(new Error("test reject"))
)
const wrapper = factory()
const button = wrapper.find("button")

32
components/history/__tests__/GraphqlCard.spec.js
View File

@@ -1,5 +1,5 @@
import GraphqlCard from "../graphql/Card"
import { mount } from "@vue/test-utils"
import GraphqlCard from "../graphql/Card"
const factory = (props) => {
return mount(GraphqlCard, {
@@ -35,20 +35,20 @@ describe("GraphqlCard", () => {
const wrapper = factory({
entry: {
type: "graphql",
url: url,
query: query,
url,
query,
star: false,
},
})
expect(wrapper).toBeTruthy()
})
test("toggle-star emitted on clicking on star button", async () => {
test("toggle-star emitted on clicking on star button", () => {
const wrapper = factory({
entry: {
type: "graphql",
url: url,
query: query,
url,
query,
star: true,
},
})
@@ -61,8 +61,8 @@ describe("GraphqlCard", () => {
const wrapper = factory({
entry: {
type: "graphql",
url: url,
query: query,
url,
query,
star: true,
},
})
@@ -85,12 +85,14 @@ describe("GraphqlCard", () => {
const wrapper = factory({
entry: {
type: "graphql",
url: url,
query: query,
url,
query,
star: true,
},
})
await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
await wrapper
.find("button[data-testid='restore_history_entry']")
.trigger("click")
expect(wrapper.emitted("use-entry")).toBeTruthy()
})
@@ -98,12 +100,14 @@ describe("GraphqlCard", () => {
const wrapper = factory({
entry: {
type: "graphql",
url: url,
query: query,
url,
query,
star: true,
},
})
await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
await wrapper
.find("button[data-testid=delete_history_entry]")
.trigger("click")
expect(wrapper.emitted("delete-entry")).toBeTruthy()
})
})

158
components/history/__tests__/History.spec.js
View File

@@ -1,44 +1,44 @@
import { shallowMount } from "@vue/test-utils"
import History from "../"
import { fb } from "~/helpers/fb"
import { shallowMount } from "@vue/test-utils"
const restHistory = [
{
id: "0",
id: 0,
type: "rest",
},
{
id: "1",
id: 1,
type: "rest",
},
{
id: "2",
id: 2,
type: "rest",
},
]
const graphqlHistory = [
{
id: "0",
id: 0,
type: "graphql",
},
{
id: "1",
id: 1,
type: "graphql",
},
{
id: "2",
id: 2,
type: "graphql",
},
]
var localStorageMock = (function () {
var store = {
const localStorageMock = (function () {
const store = {
history: JSON.stringify(restHistory),
graphqlHistory: JSON.stringify(graphqlHistory),
}
return {
getItem: function (key) {
getItem(key) {
return store[key]
},
setItem: jest.fn(),
@@ -105,13 +105,13 @@ beforeEach(() => {
})
describe("Mount History", () => {
test("Mounts rest history without login", async () => {
test("Mounts rest history without login", () => {
const wrapper = factory({
page: "rest",
})
expect(wrapper).toBeTruthy()
})
test("Mounts rest history with login", async () => {
test("Mounts rest history with login", () => {
fb.currentUser = "user"
const wrapper = factory({
page: "rest",
@@ -119,13 +119,13 @@ describe("Mount History", () => {
expect(wrapper).toBeTruthy()
})
test("Mounts graphql history without login", async () => {
test("Mounts graphql history without login", () => {
const wrapper = factory({
page: "rest",
})
expect(wrapper).toBeTruthy()
})
test("Mounts graphql history with login", async () => {
test("Mounts graphql history with login", () => {
fb.currentUser = "user"
const wrapper = factory({
page: "rest",
@@ -142,9 +142,14 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='confirm_clear_history']")
.trigger("click")
expect(fb.clearHistory).not.toHaveBeenCalled()
expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
expect(window.localStorage.setItem).toHaveBeenCalledWith(
"history",
JSON.stringify([])
)
})
test("Clear rest history with login", async () => {
fb.currentUser = "user"
@@ -153,9 +158,14 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='confirm_clear_history']")
.trigger("click")
expect(fb.clearHistory).toHaveBeenCalledTimes(1)
expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
expect(window.localStorage.setItem).toHaveBeenCalledWith(
"history",
JSON.stringify([])
)
})
test("Dont confirm Clear rest history", async () => {
fb.currentUser = "user"
@@ -164,9 +174,14 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='reject_clear_history']")
.trigger("click")
expect(fb.clearHistory).not.toHaveBeenCalled()
expect(window.localStorage.setItem).not.toHaveBeenCalledWith("history", JSON.stringify([]))
expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
"history",
JSON.stringify([])
)
})
test("Clear graphql history without login", async () => {
@@ -176,9 +191,14 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='confirm_clear_history']")
.trigger("click")
expect(fb.clearGraphqlHistory).not.toHaveBeenCalled()
expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
expect(window.localStorage.setItem).toHaveBeenCalledWith(
"graphqlHistory",
JSON.stringify([])
)
})
test("Clear graphql history with login", async () => {
fb.currentUser = "user"
@@ -187,9 +207,14 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='confirm_clear_history']")
.trigger("click")
expect(fb.clearGraphqlHistory).toHaveBeenCalledTimes(1)
expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
expect(window.localStorage.setItem).toHaveBeenCalledWith(
"graphqlHistory",
JSON.stringify([])
)
})
test("Dont confirm Clear graphql history", async () => {
fb.currentUser = "user"
@@ -198,7 +223,9 @@ describe("Clear History", () => {
})
expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
await wrapper.find("button[data-testid='clear_history']").trigger("click")
await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
await wrapper
.find("button[data-testid='reject_clear_history']")
.trigger("click")
expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
"graphqlHistory",
JSON.stringify([])
@@ -207,78 +234,39 @@ describe("Clear History", () => {
})
describe("Use History", () => {
test("use rest history", async () => {
test("use rest history", () => {
fb.currentUser = "user"
const wrapper = factory({
page: "rest",
})
expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
var index = restHistory.length - 1
wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("use-entry")
expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(
restHistory.length
)
const index = restHistory.length - 1
wrapper
.findAll("div[data-testid='rest_card']")
.at(index)
.vm.$emit("use-entry")
expect(wrapper.emitted("useHistory")).toBeTruthy()
expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory[index]])
})
test("use graphql history", async () => {
test("use graphql history", () => {
fb.currentUser = "user"
const wrapper = factory({
page: "graphql",
})
expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
var index = restHistory.length - 1
wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("use-entry")
expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(
graphqlHistory.length
)
const index = restHistory.length - 1
wrapper
.findAll("div[data-testid='graphql_card']")
.at(index)
.vm.$emit("use-entry")
expect(wrapper.emitted("useHistory")).toBeTruthy()
expect(wrapper.emitted("useHistory")[0]).toStrictEqual([graphqlHistory[index]])
})
})
describe("Delete History", () => {
test("delete rest history with login", async () => {
fb.currentUser = "user"
const wrapper = factory({
page: "rest",
})
expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
var index = 1
wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
expect(fb.deleteHistory).toBeCalledWith(restHistory[index])
})
test("delete rest history without login", async () => {
fb.currentUser = null
const wrapper = factory({
page: "rest",
})
expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
var index = 1
wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
expect(window.localStorage.setItem).toBeCalledWith(
"history",
JSON.stringify(restHistory.filter((entry) => entry.id != index))
)
})
test("delete graphql history with login", async () => {
fb.currentUser = "user"
const wrapper = factory({
page: "graphql",
})
expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
var index = 1
wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
expect(fb.deleteGraphqlHistory).toBeCalledWith(graphqlHistory[index])
})
test("delete graphql history without login", async () => {
fb.currentUser = null
const wrapper = factory({
page: "graphql",
})
expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
var index = 1
wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
expect(window.localStorage.setItem).toBeCalledWith(
"graphqlHistory",
JSON.stringify(graphqlHistory.filter((entry) => entry.id != index))
)
expect(wrapper.emitted("useHistory")[0]).toStrictEqual([
graphqlHistory[index],
])
})
})

14
components/history/__tests__/RestCard.spec.js
View File

@@ -1,5 +1,5 @@
import RestCard from "../rest/Card"
import { mount } from "@vue/test-utils"
import RestCard from "../rest/Card"
const factory = (props) => {
return mount(RestCard, {
@@ -26,7 +26,7 @@ const factory = (props) => {
const url = "https://dummydata.com/get"
const entry = {
type: "rest",
url: url,
url,
method: "GET",
status: 200,
star: false,
@@ -37,7 +37,7 @@ describe("RestCard", () => {
expect(wrapper).toBeTruthy()
})
test("toggle-star emitted on clicking on star button", async () => {
test("toggle-star emitted on clicking on star button", () => {
const wrapper = factory({ entry })
wrapper.find("button[data-testid='star_button']").trigger("click")
@@ -46,13 +46,17 @@ describe("RestCard", () => {
test("use-entry emit on clicking the restore button", async () => {
const wrapper = factory({ entry })
await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
await wrapper
.find("button[data-testid='restore_history_entry']")
.trigger("click")
expect(wrapper.emitted("use-entry")).toBeTruthy()
})
test("delete-entry emit on clicking the delete button", async () => {
const wrapper = factory({ entry })
await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
await wrapper
.find("button[data-testid=delete_history_entry]")
.trigger("click")
expect(wrapper.emitted("delete-entry")).toBeTruthy()
})
})

58
components/history/graphql/Card.vue
View File

@@ -13,42 +13,46 @@
/>
</li>
<button
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button"
class="icon"
:class="{ stared: entry.star }"
@click="$emit('toggle-star')"
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
>
<i class="material-icons">
{{ entry.star ? "star" : "star_border" }}
</i>
</button>
<button
data-testid="query_expand"
class="icon"
@click="expand = !expand"
v-tooltip="{
content: expand ? $t('hide_more') : $t('show_more'),
}"
data-testid="query_expand"
class="icon"
@click="expand = !expand"
>
<i class="material-icons">
{{ expand ? "unfold_less" : "unfold_more" }}
</i>
</button>
<v-popover>
<button data-testid="options" class="tooltip-target icon" v-tooltip="$t('options')">
<button
v-tooltip="$t('options')"
data-testid="options"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
data-testid="restore_history_entry"
class="icon"
@click="$emit('use-entry')"
:aria-label="$t('restore')"
v-close-popover
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
@@ -56,11 +60,11 @@
</div>
<div>
<button
v-close-popover
data-testid="delete_history_entry"
class="icon"
@click="$emit('delete-entry')"
:aria-label="$t('delete')"
v-close-popover
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -86,11 +90,11 @@
<div v-if="showMore" class="show-on-large-screen">
<li>
<input
v-tooltip="entry.date"
:aria-label="$t('time')"
type="text"
readonly
:value="entry.time"
v-tooltip="entry.date"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
/>
</li>
@@ -119,24 +123,10 @@
</div>
</template>
<style scoped lang="scss">
.stared {
color: #f8e81c !important;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
export default {
props: {
entry: Object,
entry: { type: Object, default: () => {} },
showMore: Boolean,
},
data() {
@@ -153,3 +143,17 @@ export default {
},
}
</script>
<style scoped lang="scss">
.stared {
color: #f8e81c !important;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

48
components/history/rest/Card.vue
View File

@@ -20,13 +20,13 @@
</li>
<span>
<button
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
data-testid="star_button"
class="icon"
:class="{ stared: entry.star }"
@click="$emit('toggle-star')"
v-tooltip="{
content: !entry.star ? $t('add_star') : $t('remove_star'),
}"
>
<i class="material-icons">
{{ entry.star ? "star" : "star_border" }}
@@ -48,17 +48,17 @@
</button>
</li> -->
<v-popover>
<button class="tooltip-target icon" v-tooltip="$t('options')">
<button v-tooltip="$t('options')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
data-testid="restore_history_entry"
class="icon"
@click="$emit('use-entry')"
:aria-label="$t('edit')"
v-close-popover
@click="$emit('use-entry')"
>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
@@ -66,11 +66,11 @@
</div>
<div>
<button
v-close-popover
data-testid="delete_history_entry"
class="icon"
@click="$emit('delete-entry')"
:aria-label="$t('delete')"
v-close-popover
@click="$emit('delete-entry')"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -95,11 +95,11 @@
<div v-if="showMore" class="show-on-large-screen">
<li>
<input
v-tooltip="entry.date"
:aria-label="$t('time')"
type="text"
readonly
:value="entry.time"
v-tooltip="entry.date"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
/>
</li>
@@ -128,26 +128,12 @@
</div>
</template>
<style scoped lang="scss">
.stared {
color: #f8e81c !important;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
import findStatusGroup from "~/helpers/findStatusGroup"
export default {
props: {
entry: Object,
entry: { type: Object, default: () => {} },
showMore: Boolean,
},
data() {
@@ -167,3 +153,17 @@ export default {
},
}
</script>
<style scoped lang="scss">
.stared {
color: #f8e81c !important;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

9
components/lenses/HeadersRenderer.vue
View File

@@ -1,7 +1,12 @@
<template>
<div>
<p v-for="(value, key) in headers" :key="key">
<input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
<input
:value="`${key} → ${value}`"
:name="key"
class="bg-transparent"
readonly
/>
</p>
</div>
</template>
@@ -9,7 +14,7 @@
<script>
export default {
props: {
headers: {},
headers: { type: Object, default: () => {} },
},
}
</script>

4
components/lenses/ResponseBodyRenderer.vue
View File

@@ -2,8 +2,8 @@
<SmartTabs styles="m-4">
<SmartTab
v-for="(lens, index) in validLenses"
:key="lens.lensName"
:id="lens.lensName"
:key="lens.lensName"
:label="lens.lensName"
:selected="index === 0"
>
@@ -28,7 +28,7 @@ export default {
...getLensRenderers(),
},
props: {
response: {},
response: { type: Object, default: () => {} },
},
computed: {
validLenses() {

54
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -4,13 +4,15 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
@@ -18,31 +20,31 @@
</button>
<button
v-if="response.body"
class="icon"
@click.prevent="togglePreview"
v-tooltip="{
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
}"
class="icon"
@click.prevent="togglePreview"
>
<i class="material-icons">
{{ !previewEnabled ? "visibility" : "visibility_off" }}
</i>
</button>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -64,9 +66,9 @@
styles="rounded-b-lg"
/>
<iframe
ref="previewFrame"
:class="{ hidden: !previewEnabled }"
class="covers-response"
ref="previewFrame"
src="about:blank"
></iframe>
</div>
@@ -79,7 +81,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -94,7 +96,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -128,19 +131,30 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
togglePreview() {
this.previewEnabled = !this.previewEnabled
if (this.previewEnabled) {
if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
if (
this.$refs.previewFrame.getAttribute("data-previewing-url") ===
this.url
)
return
// Use DOMParser to parse document HTML.
const previewDocument = new DOMParser().parseFromString(this.responseBodyText, "text/html")
const previewDocument = new DOMParser().parseFromString(
this.responseBodyText,
"text/html"
)
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
previewDocument.head.innerHTML =
`<base href="${this.url}">` + previewDocument.head.innerHTML
// Finally, set the iframe source to the resulting HTML.
this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
this.$refs.previewFrame.srcdoc =
previewDocument.documentElement.outerHTML
this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
}
},

14
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -4,11 +4,11 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
@@ -23,7 +23,7 @@
<script>
export default {
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -34,13 +34,15 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
},
watch: {
response: {
immediate: true,
handler(newValue) {
handler() {
this.imageSource = ""
const buf = this.response.body

48
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -4,46 +4,45 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body && canDownloadResponse"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<div class="valid-warning" v-if="jsonInvalid">
<p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
</div>
<div id="response-details-wrapper">
<SmartAceEditor
:value="jsonBodyText"
:lang="'json'"
:provideJSONOutline="true"
:provide-j-s-o-n-outline="true"
:options="{
maxLines: responseBodyMaxLines,
minLines: '16',
@@ -60,18 +59,17 @@
</template>
<script>
import { isJSONContentType } from "~/helpers/utils/contenttypes"
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
expandResponse: false,
jsonInvalid: false,
responseBodyMaxLines: 16,
doneButton: '<i class="material-icons">done</i>',
downloadButton: '<i class="material-icons">save_alt</i>',
@@ -81,16 +79,16 @@ export default {
computed: {
jsonBodyText() {
try {
this.jsonInvalid = false
return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
} catch (e) {
// Most probs invalid JSON was returned, so drop prettification (should we warn ?)
this.jsonInvalid = true
return this.responseBodyText
}
},
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
canDownloadResponse() {
return (
@@ -104,7 +102,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -138,7 +137,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}

40
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -4,33 +4,35 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body && canDownloadResponse"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -56,13 +58,13 @@
</template>
<script>
import { isJSONContentType } from "~/helpers/utils/contenttypes"
import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -75,7 +77,9 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
canDownloadResponse() {
return (
@@ -89,7 +93,8 @@ export default {
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -123,7 +128,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}

38
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -4,33 +4,35 @@
<label for="body">{{ $t("response_body") }}</label>
<div>
<button
v-if="response.body"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-if="response.body"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
v-if="response.body"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response.body"
ref="copyResponse"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -61,7 +63,7 @@ import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
export default {
mixins: [TextContentRendererMixin],
props: {
response: {},
response: { type: Object, default: () => {} },
},
data() {
return {
@@ -74,13 +76,16 @@ export default {
},
computed: {
responseType() {
return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
return (this.response.headers["content-type"] || "")
.split(";")[0]
.toLowerCase()
},
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
@@ -114,7 +119,10 @@ export default {
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponse.innerHTML = this.copyButton),
1000
)
},
},
}

52
components/realtime/Log.vue
View File

@@ -1,10 +1,14 @@
<template>
<div class="flex flex-col">
<label for="log">{{ title }}</label>
<div name="log" class="realtime-log" ref="log">
<div ref="log" name="log" class="realtime-log">
<span v-if="log">
<span v-for="(logEntry, index) in log" :style="{ color: logEntry.color }" :key="index"
>@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source) }}{{ logEntry.payload }}</span
<span
v-for="(logEntry, index) in log"
:key="index"
:style="{ color: logEntry.color }"
>@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source)
}}{{ logEntry.payload }}</span
>
</span>
<span v-else>{{ $t("waiting_for_connection") }}</span>
@@ -12,6 +16,30 @@
</div>
</template>
<script>
import { getSourcePrefix } from "~/helpers/utils/string"
export default {
props: {
log: { type: Array, default: () => [] },
title: {
type: String,
default: "",
},
},
updated() {
this.$nextTick(function () {
if (this.$refs.log) {
this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
}
})
},
methods: {
getSourcePrefix,
},
}
</script>
<style scoped lang="scss">
.realtime-log {
@apply p-4;
@@ -35,21 +63,3 @@
}
}
</style>
<script>
import { getSourcePrefix } from "~/helpers/utils/string"
export default {
props: ["log", "title"],
methods: {
getSourcePrefix,
},
updated() {
this.$nextTick(function () {
if (this.$refs.log) {
this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
}
})
},
}
</script>

82
components/realtime/Mqtt.vue
View File

@@ -6,8 +6,8 @@
<label for="mqtt-url">{{ $t("url") }}</label>
<input
id="mqtt-url"
type="url"
v-model="url"
type="url"
spellcheck="false"
class="md:rounded-bl-lg"
:placeholder="$t('url')"
@@ -19,12 +19,14 @@
<button
id="connect"
:disabled="!validUrl"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleConnection"
>
{{ this.connectionState ? $t("disconnect") : $t("connect") }}
{{ connectionState ? $t("disconnect") : $t("connect") }}
<span>
<i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
<i class="material-icons">{{
!connectionState ? "sync" : "sync_disabled"
}}</i>
</span>
</button>
</li>
@@ -35,20 +37,25 @@
<AppSection :label="$t('communication')" no-legend>
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="this.log" />
<RealtimeLog :title="$t('log')" :log="log" />
</li>
</ul>
<ul>
<li>
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>
<input id="pub_topic" type="text" v-model="pub_topic" spellcheck="false" />
<input
id="pub_topic"
v-model="pub_topic"
type="text"
spellcheck="false"
/>
</li>
<li>
<label for="mqtt-message">{{ $t("message") }}</label>
<input
id="mqtt-message"
type="text"
v-model="msg"
type="text"
spellcheck="false"
class="border-dashed md:border-l border-brdColor"
/>
@@ -56,7 +63,12 @@
<div>
<li>
<label for="publish" class="hide-on-small-screen">&nbsp;</label>
<button id="publish" name="get" :disabled="!canpublish" @click="publish">
<button
id="publish"
name="get"
:disabled="!canpublish"
@click="publish"
>
{{ $t("mqtt_publish") }}
<span>
<i class="material-icons">send</i>
@@ -70,8 +82,8 @@
<label for="sub_topic">{{ $t("mqtt_topic") }}</label>
<input
id="sub_topic"
type="text"
v-model="sub_topic"
type="text"
spellcheck="false"
class="md:rounded-bl-lg"
/>
@@ -83,12 +95,18 @@
id="subscribe"
name="get"
:disabled="!cansubscribe"
@click="toggleSubscription"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleSubscription"
>
{{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
{{
subscriptionState
? $t("mqtt_unsubscribe")
: $t("mqtt_subscribe")
}}
<span>
<i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
<i class="material-icons">{{
subscriptionState ? "sync_disabled" : "sync"
}}</i>
</span>
</button>
</li>
@@ -117,6 +135,22 @@ export default {
subscriptionState: false,
}
},
computed: {
validUrl() {
return this.isUrlValid
},
canpublish() {
return this.pub_topic !== "" && this.msg !== "" && this.connectionState
},
cansubscribe() {
return this.sub_topic !== "" && this.connectionState
},
},
watch: {
url() {
this.debouncer()
},
},
mounted() {
if (process.browser) {
this.worker = this.$worker.createRejexWorker()
@@ -126,22 +160,6 @@ export default {
destroyed() {
this.worker.terminate()
},
watch: {
url(val) {
this.debouncer()
},
},
computed: {
validUrl() {
return this.isUrlValid
},
canpublish() {
return this.pub_topic != "" && this.msg != "" && this.connectionState
},
cansubscribe() {
return this.sub_topic != "" && this.connectionState
},
},
methods: {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
@@ -158,10 +176,10 @@ export default {
ts: new Date().toLocaleTimeString(),
},
]
let parseUrl = new URL(this.url)
const parseUrl = new URL(this.url)
this.client = new Paho.Client(
parseUrl.hostname,
parseUrl.port != "" ? Number(parseUrl.port) : 8081,
parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
"postwoman"
)
this.client.connect({
@@ -267,7 +285,9 @@ export default {
})
} catch (e) {
this.log.push({
payload: this.$t("error_occurred") + `while subscribing to topic: ${this.sub_topic}`,
payload:
this.$t("error_occurred") +
`while subscribing to topic: ${this.sub_topic}`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString(),

35
components/realtime/Sse.vue
View File

@@ -1,28 +1,28 @@
<template>
<div class="page">
<AppSection :label="$t('request')" ref="request" no-legend>
<AppSection ref="request" :label="$t('request')" no-legend>
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
<input
id="server"
v-model="server"
type="url"
:class="{ error: !serverValid }"
v-model="server"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
class="md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
</li>
<div>
<li>
<label for="start" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!serverValid"
id="start"
:disabled="!serverValid"
name="start"
@click="toggleSSEConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleSSEConnection"
>
{{ !connectionSSEState ? $t("start") : $t("stop") }}
<span>
@@ -36,7 +36,12 @@
</ul>
</AppSection>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<AppSection
id="response"
ref="response"
:label="$t('communication')"
no-legend
>
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />
@@ -63,8 +68,13 @@ export default {
},
}
},
computed: {
serverValid() {
return this.isUrlValid
},
},
watch: {
server(val) {
server() {
this.debouncer()
},
},
@@ -77,11 +87,6 @@ export default {
destroyed() {
this.worker.terminate()
},
computed: {
serverValid() {
return this.isUrlValid
},
},
methods: {
debouncer: debounce(function () {
this.worker.postMessage({ type: "sse", url: this.server })
@@ -106,7 +111,7 @@ export default {
if (typeof EventSource !== "undefined") {
try {
this.sse = new EventSource(this.server)
this.sse.onopen = (event) => {
this.sse.onopen = () => {
this.connectionSSEState = true
this.events.log = [
{
@@ -120,10 +125,10 @@ export default {
icon: "sync",
})
}
this.sse.onerror = (event) => {
this.sse.onerror = () => {
this.handleSSEError()
}
this.sse.onclose = (event) => {
this.sse.onclose = () => {
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("disconnected_from", { name: this.server }),

66
components/realtime/Websocket.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="page">
<AppSection :label="$t('request')" ref="request" no-legend>
<AppSection ref="request" :label="$t('request')" no-legend>
<ul>
<li>
<label for="websocket-url">{{ $t("url") }}</label>
<input
id="websocket-url"
v-model="url"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
class="md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
:disabled="!urlValid"
name="connect"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleConnection"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<span>
@@ -37,7 +37,12 @@
</ul>
</AppSection>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<AppSection
id="response"
ref="response"
:label="$t('communication')"
no-legend
>
<ul>
<li>
<RealtimeLog :title="$t('log')" :log="communication.log" />
@@ -48,14 +53,14 @@
<label for="websocket-message">{{ $t("message") }}</label>
<input
id="websocket-message"
v-model="communication.input"
name="message"
type="text"
v-model="communication.input"
:readonly="!connectionState"
class="md:rounded-bl-lg"
@keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null"
class="md:rounded-bl-lg"
/>
</li>
<div>
@@ -65,8 +70,8 @@
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="sendMessage"
>
{{ $t("send") }}
<span>
@@ -94,9 +99,19 @@ export default {
log: null,
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
}
},
computed: {
urlValid() {
return this.isUrlValid
},
},
watch: {
url() {
this.debouncer()
},
},
mounted() {
if (process.browser) {
this.worker = this.$worker.createRejexWorker()
@@ -106,16 +121,6 @@ export default {
destroyed() {
this.worker.terminate()
},
computed: {
urlValid() {
return this.isUrlValid
},
},
watch: {
url(val) {
this.debouncer()
},
},
methods: {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
@@ -139,7 +144,7 @@ export default {
]
try {
this.socket = new WebSocket(this.url)
this.socket.onopen = (event) => {
this.socket.onopen = () => {
this.connectionState = true
this.communication.log = [
{
@@ -153,10 +158,10 @@ export default {
icon: "sync",
})
}
this.socket.onerror = (event) => {
this.socket.onerror = () => {
this.handleError()
}
this.socket.onclose = (event) => {
this.socket.onclose = () => {
this.connectionState = false
this.communication.log.push({
payload: this.$t("disconnected_from", { name: this.url }),
@@ -215,20 +220,24 @@ export default {
this.communication.input = ""
},
walkHistory(direction) {
const clientMessages = this.communication.log.filter(({ source }) => source === "client")
const clientMessages = this.communication.log.filter(
({ source }) => source === "client"
)
const length = clientMessages.length
switch (direction) {
case "up":
if (length > 0 && this.currentIndex !== 0) {
//does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
// does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
if (this.currentIndex === -1) {
this.currentIndex = length - 1
this.communication.input = clientMessages[this.currentIndex].payload
this.communication.input =
clientMessages[this.currentIndex].payload
} else if (this.currentIndex === 0) {
this.communication.input = clientMessages[0].payload
} else if (this.currentIndex > 0) {
this.currentIndex = this.currentIndex - 1
this.communication.input = clientMessages[this.currentIndex].payload
this.communication.input =
clientMessages[this.currentIndex].payload
}
}
break
@@ -239,7 +248,8 @@ export default {
this.communication.input = ""
} else if (this.currentIndex < length - 1) {
this.currentIndex = this.currentIndex + 1
this.communication.input = clientMessages[this.currentIndex].payload
this.communication.input =
clientMessages[this.currentIndex].payload
}
}
break