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

Minor UI changes (#295)

Browse Source 
Minor UI changes
This commit is contained in:
Liyas Thomas
2019-11-12 10:57:56 +05:30
committed by GitHub
parent f457cc5107 f65e67d86a
commit 51b370efa6
19 changed files with 894 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/styles.scss
View File

@@ -127,10 +127,6 @@ footer {
color: var(--ac-color);
}
.tagline {
font-size: 18px;
}
.nav-first {
display: flex;
order: 1;
@@ -268,6 +264,8 @@ h3 {
}
.tooltip {
$bgcolor: var(--brd-color);
$fgcolor: var(--fg-color);
display: block !important;
z-index: 10000;
@@ -350,18 +348,16 @@ h3 {
}
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
color: black;
padding: 24px;
border-radius: 5px;
background: $bgcolor;
color: $fgcolor;
padding: 4px;
border-radius: 8px;
box-shadow: 0 5px 30px rgba(black, 0.1);
}
.popover-arrow {
border-color: $color;
border-color: $bgcolor;
}
}
@@ -414,9 +410,10 @@ button {
}
&.icon {
background-color: var(--bg-color);
background-color: transparent;
color: var(--fg-light-color);
fill: var(--fg-light-color);
border-radius: 8px;
&:not([disabled]):hover,
&:not([disabled]):active,
@@ -534,13 +531,6 @@ code {
border-radius: 8px;
}
.hljs,
.hljs-subst {
background-color: var(--bg-dark-color) !important;
color: var(--fg-color) !important;
font-family: 'Roboto Mono', monospace;
}
select,
option {
height: 40px;

33
components/ace-editor.vue
View File

@@ -3,17 +3,16 @@
</template>
<script>
const DEFAULT_THEME = 'dracula';
const DEFAULT_THEME = "dracula";
import ace from 'ace-builds';
import ace from "ace-builds";
import "ace-builds/webpack-resolver";
export default {
props: {
value: {
type: String,
default: ''
default: ""
},
theme: {
type: String,
@@ -21,7 +20,7 @@ export default {
},
lang: {
type: String,
default: 'json',
default: "json"
},
options: {
type: Object,
@@ -32,22 +31,22 @@ export default {
data() {
return {
editor: null,
cacheValue: ''
}
cacheValue: ""
};
},
watch: {
value(value) {
if(value !== this.cacheValue) {
this.editor.session.setValue(value,1);
if (value !== this.cacheValue) {
this.editor.session.setValue(value, 1);
this.cacheValue = value;
}
},
theme() {
this.editor.setTheme('ace/theme/' + this.defineTheme())
this.editor.setTheme("ace/theme/" + this.defineTheme());
},
lang(value) {
this.editor.getSession().setMode('ace/mode/' + value);
this.editor.getSession().setMode("ace/mode/" + value);
},
options(value) {
this.editor.setOptions(value);
@@ -56,10 +55,10 @@ export default {
mounted() {
const editor = ace.edit(this.$refs.editor, {
theme: 'ace/theme/'+ this.defineTheme(),
theme: "ace/theme/" + this.defineTheme(),
mode: "ace/mode/" + this.lang,
...this.options
})
});
editor.setValue(this.value);
@@ -69,10 +68,12 @@ export default {
methods: {
defineTheme() {
if(this.theme) {
if (this.theme) {
return this.theme;
} else {
return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
return (
this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
);
}
}
},
@@ -81,5 +82,5 @@ export default {
this.editor.destroy();
this.editor.container.remove();
}
}
};
</script>

4
components/autocomplete.vue
View File

@@ -23,7 +23,9 @@
@click.prevent="forceSuggestion(suggestion)"
:class="{ active: currentSuggestionIndex === index }"
:key="index"
>{{ suggestion }}</li>
>
{{ suggestion }}
</li>
</ul>
</div>
</template>

35
components/collections/collection.vue
View File

@@ -6,17 +6,29 @@
<i class="material-icons" v-show="!showChildren">arrow_right</i>
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
<i class="material-icons">folder</i>
<span>{{collection.name}}</span>
<span>{{ collection.name }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
<button
class="icon"
@click="removeCollection"
v-tooltip="'Delete collection'"
>
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
<button
class="icon"
@click="$emit('edit-collection')"
v-tooltip="'Edit collection'"
>
<i class="material-icons">create</i>
</button>
<button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
<button
class="icon"
@click="$emit('add-folder')"
v-tooltip="'New Folder'"
>
<i class="material-icons">create_new_folder</i>
</button>
</div>
@@ -33,7 +45,11 @@
v-on:edit-request="$emit('edit-request', $event)"
/>
</li>
<li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
<li
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
>
<label>Collection is empty</label>
</li>
</ul>
@@ -44,7 +60,14 @@
v-bind:collection-index="collectionIndex"
v-bind:folder-index="-1"
v-bind:request-index="index"
v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
v-on:edit-request="
$emit('edit-request', {
request,
collectionIndex,
folderIndex: undefined,
requestIndex: index
})
"
></request>
</li>
</ul>

7
components/collections/editCollection.vue
View File

@@ -17,7 +17,12 @@
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="editingCollection.name" @keyup.enter="saveCollection" />
<input
type="text"
v-model="name"
v-bind:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
</li>
</ul>
</div>

7
components/collections/editFolder.vue
View File

@@ -17,7 +17,12 @@
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="folder.name" @keyup.enter="editFolder" />
<input
type="text"
v-model="name"
v-bind:placeholder="folder.name"
@keyup.enter="editFolder"
/>
</li>
</ul>
</div>

34
components/collections/editRequest.vue
View File

@@ -18,20 +18,42 @@
<ul>
<li>
<label for="selectLabel">Label</label>
<input type="text" id="selectLabel" v-model="requestUpdateData.name" @keyup.enter="saveRequest" :placeholder="request.name" />
<input
type="text"
id="selectLabel"
v-model="requestUpdateData.name"
@keyup.enter="saveRequest"
:placeholder="request.name"
/>
<label for="selectCollection">Collection</label>
<select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>Current Collection</option>
<select
type="text"
id="selectCollection"
v-model="requestUpdateData.collectionIndex"
>
<option :key="undefined" :value="undefined" hidden disabled selected
>Current Collection</option
>
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option>
>{{ collection.name }}</option
>
</select>
<label for="selectFolder">Folder</label>
<select type="text" id="selectFolder" v-model="requestUpdateData.folderIndex">
<select
type="text"
id="selectFolder"
v-model="requestUpdateData.folderIndex"
>
<option :key="undefined" :value="undefined">/</option>
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
<option
v-for="(folder, index) in folders"
:key="index"
:value="index"
>{{ folder.name }}</option
>
</select>
</li>
</ul>

11
components/collections/folder.vue
View File

@@ -6,7 +6,7 @@
<i class="material-icons" v-show="!showChildren">arrow_right</i>
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
<i class="material-icons">folder_open</i>
<span>{{folder.name}}</span>
<span>{{ folder.name }}</span>
</button>
</div>
<div>
@@ -27,7 +27,14 @@
v-bind:collection-index="collectionIndex"
v-bind:folder-index="folderIndex"
v-bind:request-index="index"
v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
v-on:edit-request="
$emit('edit-request', {
request,
collectionIndex,
folderIndex,
requestIndex: index
})
"
></request>
</li>
<li v-if="folder.requests.length === 0">

5
components/collections/index.vue
View File

@@ -5,7 +5,10 @@ TODO:
<template>
<div class="collections-wrapper">
<addCollection v-bind:show="showModalAdd" v-on:hide-modal="displayModalAdd(false)"></addCollection>
<addCollection
v-bind:show="showModalAdd"
v-on:hide-modal="displayModalAdd(false)"
></addCollection>
<editCollection
v-bind:show="showModalEdit"
v-bind:editingCollection="editingCollection"

8
components/collections/request.vue
View File

@@ -3,14 +3,18 @@
<div>
<button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
<i class="material-icons">insert_drive_file</i>
<span>{{request.name}}</span>
<span>{{ request.name }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
<button
class="icon"
@click="$emit('edit-request')"
v-tooltip="'Edit request'"
>
<i class="material-icons">edit</i>
</button>
</div>

35
components/collections/saveRequestAs.vue
View File

@@ -26,27 +26,48 @@
@keyup.enter="saveRequestAs"
/>
<label for="selectCollection">Collection</label>
<select type="text" id="selectCollection" v-model="requestData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>Select a Collection</option>
<select
type="text"
id="selectCollection"
v-model="requestData.collectionIndex"
>
<option :key="undefined" :value="undefined" hidden disabled selected
>Select a Collection</option
>
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option>
>{{ collection.name }}</option
>
</select>
<label for="selectFolder">Folder</label>
<select type="text" id="selectFolder" v-model="requestData.folderIndex">
<select
type="text"
id="selectFolder"
v-model="requestData.folderIndex"
>
<option :key="undefined" :value="undefined">/</option>
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
<option
v-for="(folder, index) in folders"
:key="index"
:value="index"
>{{ folder.name }}</option
>
</select>
<label for="selectRequest">Request</label>
<select type="text" id="selectRequest" v-model="requestData.requestIndex">
<select
type="text"
id="selectRequest"
v-model="requestData.requestIndex"
>
<option :key="undefined" :value="undefined">/</option>
<option
v-for="(folder, index) in requests"
:key="index"
:value="index"
>{{ folder.name }}</option>
>{{ folder.name }}</option
>
</select>
</li>
</ul>

565
components/history.vue
View File

@@ -2,7 +2,12 @@
<pw-section class="green" icon="history" label="History" ref="history">
<ul>
<li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
<input
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
</li>
</ul>
<ul v-if="history.length !== 0" class="labels">
@@ -61,29 +66,54 @@
</transition>
<div class="show-on-small-screen">
<li>
<button class="icon" @click="enableHistoryClearing" v-tooltip="'Clear History'">
<button
class="icon"
@click="enableHistoryClearing"
v-tooltip="'Clear History'"
>
<i class="material-icons">clear_all</i>
</button>
</li>
<li>
<button class="icon" @click="toggleCollapse()" v-tooltip="{ content: !show ? 'Show more' : 'Hide more'}">
<button
class="icon"
@click="toggleCollapse()"
v-tooltip="{ content: !show ? 'Show more' : 'Hide more' }"
>
<i class="material-icons" v-if="!show">first_page</i>
<i class="material-icons" v-else>last_page</i>
</button>
</li>
</div>
</ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="56" :remain="Math.min(5, filteredHistory.length)">
<virtual-list
class="virtual-list"
:class="{ filled: filteredHistory.length }"
:size="56"
:remain="Math.min(5, filteredHistory.length)"
>
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<div class="show-on-small-screen">
<li>
<button class="icon" :class="{ stared: entry.star }" @click="toggleStar(index)" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star'}">
<button
class="icon"
:class="{ stared: entry.star }"
@click="toggleStar(index)"
v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
>
<i class="material-icons" v-if="entry.star">star</i>
<i class="material-icons" v-else>star_border</i>
</button>
</li>
<li>
<button class="icon" v-tooltip="{ content: !entry.usesScripts ? 'No pre-request script' : 'Used pre-request script'}">
<button
class="icon"
v-tooltip="{
content: !entry.usesScripts
? 'No pre-request script'
: 'Used pre-request script'
}"
>
<i class="material-icons" v-if="!entry.usesScripts">http</i>
<i class="material-icons" v-else>code</i>
</button>
@@ -91,51 +121,113 @@
</div>
<div class="show-on-small-screen">
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
<input
aria-label="Time"
type="text"
readonly
:value="entry.time"
v-tooltip="entry.date"
/>
</li>
</div>
<li class="method-list-item">
<input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
<span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
<input
aria-label="Method"
type="text"
readonly
:value="entry.method"
:class="findEntryStatus(entry).className"
:style="{ '--status-code': entry.status }"
/>
<span
class="entry-status-code"
:class="findEntryStatus(entry).className"
:style="{ '--status-code': entry.status }"
>{{ entry.status }}</span
>
</li>
<div class="show-on-small-screen">
<li>
<input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
<input
aria-label="URL"
type="text"
readonly
:value="entry.url"
placeholder="No URL"
/>
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
<input
aria-label="Path"
type="text"
readonly
:value="entry.path"
placeholder="No path"
/>
</li>
</div>
<transition name="smooth">
<div v-if="show" class="show-on-small-screen">
<li>
<input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" />
<input
aria-label="Duration"
type="text"
readonly
:value="entry.duration"
placeholder="No duration"
/>
</li>
<li>
<input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" />
<input
aria-label="Pre Request Script"
type="text"
readonly
:value="entry.preRequestScript"
placeholder="No pre request script"
/>
</li>
</div>
</transition>
<div class="show-on-small-screen">
<li>
<button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
<button
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#' + index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i>
</button>
</li>
<li>
<button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
<button
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#' + index"
@click="useHistory(entry)"
aria-label="Edit"
>
<i class="material-icons">edit</i>
</button>
</li>
</div>
</ul>
</virtual-list>
<ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
<ul
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
>
<li>
<label>Nothing found "{{filterText}}"</label>
<label>Nothing found "{{ filterText }}"</label>
</li>
</ul>
<ul v-if="history.length === 0">
@@ -145,7 +237,12 @@
</ul>
<ul v-if="history.length !== 0">
<li v-if="!isClearingHistory">
<button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
<button
class="icon"
id="clear-history-button"
:disabled="history.length === 0"
@click="enableHistoryClearing"
>
<i class="material-icons">clear_all</i>
<span>Clear All</span>
</button>
@@ -154,8 +251,20 @@
<div class="flex-wrap">
<label for="clear-history-button">Are you sure?</label>
<div>
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
<button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">No</button>
<button
class="icon"
id="confirm-clear-history-button"
@click="clearHistory"
>
Yes
</button>
<button
class="icon"
id="reject-clear-history-button"
@click="disableHistoryClearing"
>
No
</button>
</div>
</div>
</li>
@@ -164,223 +273,223 @@
</template>
<style scoped lang="scss">
.virtual-list {
min-height: 90px;
.virtual-list {
min-height: 90px;
[readonly] {
cursor: default;
}
[readonly] {
cursor: default;
}
}
label {
&:hover {
cursor: pointer;
color: var(--fg-color);
}
}
.smooth-enter-active,
.smooth-leave-active {
transition: all 0.2s;
}
.smooth-enter,
.smooth-leave-to {
opacity: 0;
}
.stared {
color: #f8e81c !important;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 320px;
}
label {
&:hover {
cursor: pointer;
color: var(--fg-color);
}
.labels {
display: none;
}
.smooth-enter-active,
.smooth-leave-active {
transition: all 0.2s;
.entry {
border-bottom: 1px solid var(--brd-color);
}
.smooth-enter,
.smooth-leave-to {
opacity: 0;
}
.stared {
color: #F8E81C !important;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 320px;
}
.labels {
display: none;
}
.entry {
border-bottom: 1px solid var(--brd-color);
}
}
}
</style>
<script>
import VirtualList from "vue-virtual-scroll-list";
import section from "./section";
import {
findStatusGroup
} from "../pages/index";
import VirtualList from "vue-virtual-scroll-list";
import section from "./section";
import { findStatusGroup } from "../pages/index";
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
"pw-section": section,
VirtualList
},
data() {
const localStorageHistory = JSON.parse(
window.localStorage.getItem("history")
);
return {
history: localStorageHistory || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
reverse_sort_label: false,
reverse_sort_time: false,
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false,
show: false
};
},
computed: {
filteredHistory() {
return this.history.filter(entry => {
const filterText = this.filterText.toLowerCase();
return Object.keys(entry).some(key => {
let value = entry[key];
value = typeof value !== "string" ? value.toString() : value;
return value.toLowerCase().includes(filterText);
});
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
"pw-section": section,
VirtualList
},
data() {
const localStorageHistory = JSON.parse(
window.localStorage.getItem("history")
);
return {
history: localStorageHistory || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
reverse_sort_label: false,
reverse_sort_time: false,
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false,
show: false
};
},
computed: {
filteredHistory() {
return this.history.filter(entry => {
const filterText = this.filterText.toLowerCase();
return Object.keys(entry).some(key => {
let value = entry[key];
value = typeof value !== "string" ? value.toString() : value;
return value.toLowerCase().includes(filterText);
});
}
},
methods: {
clearHistory() {
this.history = [];
this.filterText = "";
this.disableHistoryClearing();
updateOnLocalStorage("history", this.history);
this.$toast.error("History Deleted", {
icon: "delete"
});
},
useHistory(entry) {
this.$emit("useHistory", entry);
},
findEntryStatus(entry) {
const foundStatusGroup = findStatusGroup(entry.status);
return (
foundStatusGroup || {
className: ""
}
);
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1);
if (this.history.length === 0) {
this.filterText = "";
}
updateOnLocalStorage("history", this.history);
this.$toast.error("Deleted", {
icon: "delete"
});
},
addEntry(entry) {
this.history.push(entry);
updateOnLocalStorage("history", this.history);
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return;
this.isClearingHistory = true;
},
disableHistoryClearing() {
this.isClearingHistory = false;
},
sort_by_time() {
let byDate = this.history.slice(0);
byDate.sort((a, b) => {
let date_a = a.date.split("/");
let date_b = b.date.split("/");
let time_a = a.time.split(":");
let time_b = b.time.split(":");
let final_a = new Date(
date_a[2],
date_a[1],
date_a[0],
time_a[0],
time_a[1],
time_a[2]
);
let final_b = new Date(
date_b[2],
date_b[1],
date_b[0],
time_b[0],
time_b[1],
time_b[2]
);
if (this.reverse_sort_time) return final_b - final_a;
else return final_a - final_b;
});
this.history = byDate;
this.reverse_sort_time = !this.reverse_sort_time;
},
sort_by_status_code() {
let byCode = this.history.slice(0);
byCode.sort((a, b) => {
if (this.reverse_sort_status_code) return b.status - a.status;
else return a.status - b.status;
});
this.history = byCode;
this.reverse_sort_status_code = !this.reverse_sort_status_code;
},
sort_by_url() {
let byUrl = this.history.slice(0);
byUrl.sort((a, b) => {
if (this.reverse_sort_url)
return a.url == b.url ? 0 : +(a.url < b.url) || -1;
else return a.url == b.url ? 0 : +(a.url > b.url) || -1;
});
this.history = byUrl;
this.reverse_sort_url = !this.reverse_sort_url;
},
sort_by_label() {
let byLabel = this.history.slice(0);
byLabel.sort((a, b) => {
if (this.reverse_sort_label)
return a.label == b.label ? 0 : +(a.label < b.label) || -1;
else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
});
this.history = byLabel;
this.reverse_sort_label = !this.reverse_sort_label;
},
sort_by_path() {
let byPath = this.history.slice(0);
byPath.sort((a, b) => {
if (this.reverse_sort_path)
return a.path == b.path ? 0 : +(a.path < b.path) || -1;
else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
});
this.history = byPath;
this.reverse_sort_path = !this.reverse_sort_path;
},
sort_by_duration() {
let byDuration = this.history.slice(0);
byDuration.sort((a, b) => {
if (this.reverse_sort_duration)
return a.duration == b.duration ? 0 : +(a.duration < b.duration) || -1;
else return a.duration == b.duration ? 0 : +(a.duration > b.duration) || -1;
});
this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse() {
this.show = !this.show
},
toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"];
updateOnLocalStorage("history", this.history);
}
});
}
};
},
methods: {
clearHistory() {
this.history = [];
this.filterText = "";
this.disableHistoryClearing();
updateOnLocalStorage("history", this.history);
this.$toast.error("History Deleted", {
icon: "delete"
});
},
useHistory(entry) {
this.$emit("useHistory", entry);
},
findEntryStatus(entry) {
const foundStatusGroup = findStatusGroup(entry.status);
return (
foundStatusGroup || {
className: ""
}
);
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1);
if (this.history.length === 0) {
this.filterText = "";
}
updateOnLocalStorage("history", this.history);
this.$toast.error("Deleted", {
icon: "delete"
});
},
addEntry(entry) {
this.history.push(entry);
updateOnLocalStorage("history", this.history);
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return;
this.isClearingHistory = true;
},
disableHistoryClearing() {
this.isClearingHistory = false;
},
sort_by_time() {
let byDate = this.history.slice(0);
byDate.sort((a, b) => {
let date_a = a.date.split("/");
let date_b = b.date.split("/");
let time_a = a.time.split(":");
let time_b = b.time.split(":");
let final_a = new Date(
date_a[2],
date_a[1],
date_a[0],
time_a[0],
time_a[1],
time_a[2]
);
let final_b = new Date(
date_b[2],
date_b[1],
date_b[0],
time_b[0],
time_b[1],
time_b[2]
);
if (this.reverse_sort_time) return final_b - final_a;
else return final_a - final_b;
});
this.history = byDate;
this.reverse_sort_time = !this.reverse_sort_time;
},
sort_by_status_code() {
let byCode = this.history.slice(0);
byCode.sort((a, b) => {
if (this.reverse_sort_status_code) return b.status - a.status;
else return a.status - b.status;
});
this.history = byCode;
this.reverse_sort_status_code = !this.reverse_sort_status_code;
},
sort_by_url() {
let byUrl = this.history.slice(0);
byUrl.sort((a, b) => {
if (this.reverse_sort_url)
return a.url == b.url ? 0 : +(a.url < b.url) || -1;
else return a.url == b.url ? 0 : +(a.url > b.url) || -1;
});
this.history = byUrl;
this.reverse_sort_url = !this.reverse_sort_url;
},
sort_by_label() {
let byLabel = this.history.slice(0);
byLabel.sort((a, b) => {
if (this.reverse_sort_label)
return a.label == b.label ? 0 : +(a.label < b.label) || -1;
else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
});
this.history = byLabel;
this.reverse_sort_label = !this.reverse_sort_label;
},
sort_by_path() {
let byPath = this.history.slice(0);
byPath.sort((a, b) => {
if (this.reverse_sort_path)
return a.path == b.path ? 0 : +(a.path < b.path) || -1;
else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
});
this.history = byPath;
this.reverse_sort_path = !this.reverse_sort_path;
},
sort_by_duration() {
let byDuration = this.history.slice(0);
byDuration.sort((a, b) => {
if (this.reverse_sort_duration)
return a.duration == b.duration
? 0
: +(a.duration < b.duration) || -1;
else
return a.duration == b.duration
? 0
: +(a.duration > b.duration) || -1;
});
this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse() {
this.show = !this.show;
},
toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"];
updateOnLocalStorage("history", this.history);
}
}
};
</script>

5
components/section.vue
View File

@@ -1,5 +1,8 @@
<template>
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
<fieldset
:id="label.toLowerCase()"
:class="{ 'no-colored-frames': !frameColorsEnabled }"
>
<legend @click.prevent="collapse">
<span>{{ label }}</span>
<i class="material-icons" v-if="isCollapsed">expand_more</i>

2
components/toggle.vue
View File

@@ -1,6 +1,6 @@
<template>
<div @click="toggle()">
<label class="toggle" :class="{on: on}" ref="toggle">
<label class="toggle" :class="{ on: on }" ref="toggle">
<span class="handle"></span>
</label>
<label class="caption">

10
functions/templating.js
View File

@@ -1,7 +1,7 @@
export default function parseTemplateString(string, variables) {
if(!variables || !string) {
return string;
}
const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
return string.replace(searchTerm, (match, p1) => variables[p1] || '');
if (!variables || !string) {
return string;
}
const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
return string.replace(searchTerm, (match, p1) => variables[p1] || '');
}

338
layouts/default.vue
View File

@@ -1,19 +1,74 @@
<template>
<div class="wrapper">
<header class="header">
<div>
<div class="flex-wrap">
<div class="slide-in">
<nuxt-link to="/">
<h1 class="logo">Postwoman</h1>
</nuxt-link>
<h3 class="tagline">API request builder</h3>
</div>
<a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
<button class="icon">
<img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()" />
<span>GitHub</span>
<div class="flex-wrap">
<a
href="https://github.com/liyasthomas/postwoman"
target="_blank"
rel="noopener"
v-tooltip="'GitHub'"
>
<button class="icon">
<img
id="imgGitHub"
src="~static/icons/github.svg"
alt="GitHub"
:style="logoStyle()"
/>
</button>
</a>
<button
class="icon"
id="installPWA"
@click.prevent="showInstallPrompt()"
v-tooltip="'Install PWA'"
>
<i class="material-icons">offline_bolt</i>
</button>
</a>
<v-popover>
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<a
href="https://opencollective.com/postwoman"
target="_blank"
rel="noopener"
>
<button class="icon">
<i class="material-icons">favorite</i>
<span>Donate</span>
</button>
</a>
</div>
<div>
<button
class="icon"
onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
/>
</svg>
<span>Tweet</span>
</button>
</div>
</template>
</v-popover>
</div>
</div>
</header>
<div class="content">
@@ -24,7 +79,12 @@
We're using manual checks for linkActive because the query string
seems to mess up the nuxt-link active class.
-->
<nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'" aria-label="Home">
<nuxt-link
to="/"
:class="linkActive('/')"
v-tooltip.right="'Home'"
aria-label="Home"
>
<logo alt style="height: 24px;"></logo>
</nuxt-link>
<nuxt-link
@@ -112,32 +172,18 @@
</div>
</div>
<footer class="footer">
<!-- Top section of footer: GitHub/install links -->
<div class="flex-wrap">
<button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
<i class="material-icons">add_to_home_screen</i>
<span>Install PWA</span>
</button>
<button
class="icon"
onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
/>
</svg>
<span>Tweet</span>
</button>
</div>
<!-- Bottom section of footer: version/author information -->
<p class="align-center mono">
<span v-if="version.name">
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
v-bind:href="
'https://github.com/liyasthomas/postwoman/releases/tag/' +
version.name
"
target="_blank"
rel="noopener"
>{{version.name}}</a>
>{{ version.name }}</a
>
<!-- <span v-if="version.hash">
-
<a
@@ -149,132 +195,136 @@
<!-- <span v-if="version.variant">({{version.variant}})</span> -->
&#x2022;
</span>
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener">🦄</a> &#x2022;
<a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener"
>🦄</a
>
&#x2022;
<a href="https://postwoman.launchaco.com" target="_blank" rel="noopener"
>Subscribe</a
>
</p>
</footer>
</div>
</template>
<style lang="scss">
</style>
<style lang="scss"></style>
<script>
import intializePwa from "../assets/js/pwa";
import logo from "../components/logo";
import * as version from "../.postwoman/version.json";
import intializePwa from "../assets/js/pwa";
import logo from "../components/logo";
import * as version from "../.postwoman/version.json";
export default {
components: {
logo
},
export default {
components: {
logo
},
methods: {
linkActive(path) {
return {
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path
};
}
},
data() {
methods: {
linkActive(path) {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// prompt.
showInstallPrompt: null,
logoStyle() {
return (
this.$store.state.postwoman.settings.THEME_CLASS || ""
).includes("light")
? " filter: invert(100%); -webkit-filter: invert(100%);"
: "";
},
version: {}
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path
};
},
beforeMount() {
// Set version data
this.version = version.default;
// Load theme settings
(() => {
// Apply theme from settings.
document.documentElement.className =
this.$store.state.postwoman.settings.THEME_CLASS || "";
// Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b";
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#ffffff"
);
})();
},
mounted() {
if (process.client) {
document.body.classList.add("afterLoad");
}
document
.querySelector("meta[name=theme-color]")
.setAttribute(
"content",
this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
);
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
this.showInstallPrompt = await intializePwa();
let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
if (!cookiesAllowed) {
this.$toast.show("We use cookies", {
icon: "info",
duration: 5000,
theme: "toasted-primary",
action: [
{
text: "Dismiss",
onClick: (e, toastObject) => {
localStorage.setItem("cookiesAllowed", "yes");
toastObject.goAway(0);
}
}
]
});
}
})();
window.addEventListener("scroll", event => {
let mainNavLinks = document.querySelectorAll("nav ul li a");
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section &&
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
},
watch: {
$route() {
this.$toast.clear();
}
}
};
},
data() {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// prompt.
showInstallPrompt: null,
logoStyle() {
return (
this.$store.state.postwoman.settings.THEME_CLASS || ""
).includes("light")
? " filter: invert(100%); -webkit-filter: invert(100%);"
: "";
},
version: {}
};
},
beforeMount() {
// Set version data
this.version = version.default;
// Load theme settings
(() => {
// Apply theme from settings.
document.documentElement.className =
this.$store.state.postwoman.settings.THEME_CLASS || "";
// Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b";
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#ffffff"
);
})();
},
mounted() {
if (process.client) {
document.body.classList.add("afterLoad");
}
document
.querySelector("meta[name=theme-color]")
.setAttribute(
"content",
this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
);
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
this.showInstallPrompt = await intializePwa();
let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
if (!cookiesAllowed) {
this.$toast.show("We use cookies", {
icon: "info",
duration: 5000,
theme: "toasted-primary",
action: [
{
text: "Dismiss",
onClick: (e, toastObject) => {
localStorage.setItem("cookiesAllowed", "yes");
toastObject.goAway(0);
}
}
]
});
}
})();
window.addEventListener("scroll", event => {
let mainNavLinks = document.querySelectorAll("nav ul li a");
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section &&
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
},
watch: {
$route() {
this.$toast.clear();
}
}
};
</script>

227
pages/index.vue
View File

@@ -24,7 +24,12 @@
<div slot="body">
<ul>
<li>
<textarea id="import-text" autofocus rows="8" placeholder="Enter cURL"></textarea>
<textarea
id="import-text"
autofocus
rows="8"
placeholder="Enter cURL"
></textarea>
</li>
</ul>
</div>
@@ -40,7 +45,12 @@
</div>
</pw-modal>
<pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request" ref="preRequest">
<pw-section
v-if="showPreRequestScript"
class="orange"
label="Pre-Request"
ref="preRequest"
>
<ul>
<li>
<div class="flex-wrap">
@@ -107,11 +117,22 @@
</li>
<li>
<label for="label">Label</label>
<input id="label" name="label" type="text" v-model="label" placeholder="(optional)" />
<input
id="label"
name="label"
type="text"
v-model="label"
placeholder="(optional)"
/>
</li>
<li>
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
<button
:disabled="!isValidURL"
@click="sendRequest"
id="send"
ref="sendButton"
>
Send
<span id="hidden-message">Again</span>
<span>
@@ -132,16 +153,16 @@
:source="validContentTypes"
:spellcheck="false"
v-model="contentType"
>Content Type</autocomplete>
>Content Type</autocomplete
>
</li>
</ul>
<ul>
<li>
<span>
<pw-toggle
:on="rawInput"
@change="rawInput = $event"
>Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle>
<pw-toggle :on="rawInput" @change="rawInput = $event"
>Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
>
</span>
</li>
</ul>
@@ -162,27 +183,41 @@
<ul v-for="(param, index) in bodyParams" :key="index">
<li>
<input
:placeholder="'key '+(index+1)"
:name="'bparam'+index"
:placeholder="'key ' + (index + 1)"
:name="'bparam' + index"
:value="param.key"
@change="$store.commit('setKeyBodyParams', { index, value: $event.target.value })"
@change="
$store.commit('setKeyBodyParams', {
index,
value: $event.target.value
})
"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
<input
:placeholder="'value '+(index+1)"
:id="'bvalue'+index"
:name="'bvalue'+index"
:placeholder="'value ' + (index + 1)"
:id="'bvalue' + index"
:name="'bvalue' + index"
:value="param.value"
@change="$store.commit('setValueBodyParams', { index, value: $event.target.value })"
@change="
$store.commit('setValueBodyParams', {
index,
value: $event.target.value
})
"
@keyup.prevent="setRouteQueryState"
/>
</li>
<div>
<li>
<button class="icon" @click="removeRequestBodyParam(index)" id="delParam">
<button
class="icon"
@click="removeRequestBodyParam(index)"
id="delParam"
>
<i class="material-icons">delete</i>
</button>
</li>
@@ -190,7 +225,11 @@
</ul>
<ul>
<li>
<button class="icon" @click="addRequestBodyParam" name="addrequest">
<button
class="icon"
@click="addRequestBodyParam"
name="addrequest"
>
<i class="material-icons">add</i>
<span>Add New</span>
</button>
@@ -227,7 +266,7 @@
id="code"
v-on:click="isHidden = !isHidden"
:disabled="!isValidURL"
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code'}"
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
>
<i class="material-icons" v-if="isHidden">flash_on</i>
<i class="material-icons" v-else>flash_off</i>
@@ -235,19 +274,22 @@
<button
:class="'icon' + (showPreRequestScript ? ' info-response' : '')"
id="preRequestScriptButton"
v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
v-tooltip.bottom="{
content: !showPreRequestScript
? 'Show Pre-Request Script'
: 'Hide Pre-Request Script'
}"
@click="showPreRequestScript = !showPreRequestScript"
>
<i
class="material-icons"
:class="showPreRequestScript"
v-if="!showPreRequestScript"
>code</i>
<i
class="material-icons"
:class="showPreRequestScript"
v-else
>close</i>
>code</i
>
<i class="material-icons" :class="showPreRequestScript" v-else
>close</i
>
</button>
</div>
<div style="text-align: center;">
@@ -272,7 +314,11 @@
>
<i class="material-icons">save</i>
</button>
<button class="icon" @click="clearContent('', $event)" v-tooltip.bottom="'Clear All'">
<button
class="icon"
@click="clearContent('', $event)"
v-tooltip.bottom="'Clear All'"
>
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -349,7 +395,11 @@
</ul>
<ul v-if="auth === 'Basic'">
<li>
<input placeholder="User" name="http_basic_user" v-model="httpUser" />
<input
placeholder="User"
name="http_basic_user"
v-model="httpUser"
/>
</li>
<li>
<input
@@ -367,19 +417,31 @@
ref="switchVisibility"
@click="switchVisibility"
>
<i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
<i class="material-icons" v-if="passwordFieldType !== 'text'">visibility_off</i>
<i class="material-icons" v-if="passwordFieldType === 'text'"
>visibility</i
>
<i class="material-icons" v-if="passwordFieldType !== 'text'"
>visibility_off</i
>
</button>
</li>
</div>
</ul>
<ul v-else-if="auth === 'Bearer Token'">
<li>
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
<input
placeholder="Token"
name="bearer_token"
v-model="bearerToken"
/>
</li>
</ul>
<div class="flex-wrap">
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">Include in URL</pw-toggle>
<pw-toggle
:on="!urlExcludes.auth"
@change="setExclude('auth', !$event)"
>Include in URL</pw-toggle
>
</div>
</pw-section>
</div>
@@ -416,26 +478,40 @@
<ul v-for="(header, index) in headers" :key="index">
<li>
<input
:placeholder="'header '+(index+1)"
:name="'header'+index"
:placeholder="'header ' + (index + 1)"
:name="'header' + index"
:value="header.key"
@change="$store.commit('setKeyHeader', { index, value: $event.target.value })"
@change="
$store.commit('setKeyHeader', {
index,
value: $event.target.value
})
"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
<input
:placeholder="'value '+(index+1)"
:name="'value'+index"
:placeholder="'value ' + (index + 1)"
:name="'value' + index"
:value="header.value"
@change="$store.commit('setValueHeader', { index, value: $event.target.value })"
@change="
$store.commit('setValueHeader', {
index,
value: $event.target.value
})
"
@keyup.prevent="setRouteQueryState"
/>
</li>
<div>
<li>
<button class="icon" @click="removeRequestHeader(index)" id="header">
<button
class="icon"
@click="removeRequestHeader(index)"
id="header"
>
<i class="material-icons">delete</i>
</button>
</li>
@@ -484,24 +560,38 @@
<ul v-for="(param, index) in params" :key="index">
<li>
<input
:placeholder="'parameter '+(index+1)"
:name="'param'+index"
:placeholder="'parameter ' + (index + 1)"
:name="'param' + index"
:value="param.key"
@change="$store.commit('setKeyParams', { index, value: $event.target.value })"
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value
})
"
autofocus
/>
</li>
<li>
<input
:placeholder="'value '+(index+1)"
:name="'value'+index"
:placeholder="'value ' + (index + 1)"
:name="'value' + index"
:value="param.value"
@change="$store.commit('setValueParams', { index, value: $event.target.value })"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value
})
"
/>
</li>
<div>
<li>
<button class="icon" @click="removeRequestParam(index)" id="param">
<button
class="icon"
@click="removeRequestParam(index)"
id="param"
>
<i class="material-icons">delete</i>
</button>
</li>
@@ -538,7 +628,7 @@
</ul>
<ul v-for="(value, key) in response.headers" :key="key">
<li>
<label :for="key">{{key}}</label>
<label :for="key">{{ key }}</label>
<input :id="key" :value="value" :name="key" readonly />
</li>
</ul>
@@ -579,20 +669,25 @@
readOnly: true,
showPrintMargin: false,
useWorker: false
}"
}"
/>
<iframe
:class="{hidden: !previewEnabled}"
:class="{ hidden: !previewEnabled }"
class="covers-response"
ref="previewFrame"
src="about:blank"
></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<div
class="align-right"
v-if="response.body && responseType === 'text/html'"
>
<button class="icon" @click.prevent="togglePreview">
<i class="material-icons" v-if="!previewEnabled">visibility</i>
<i class="material-icons" v-else>visibility_off</i>
<span>{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</span>
<span>{{
previewEnabled ? "Hide Preview" : "Preview HTML"
}}</span>
</button>
</div>
</li>
@@ -622,7 +717,7 @@ import modal from "../components/modal";
import collections from "../components/collections";
import saveRequestAs from "../components/collections/saveRequestAs";
import parseCurlCommand from "../assets/js/curlparser.js";
import AceEditor from '../components/ace-editor';
import AceEditor from "../components/ace-editor";
import getEnvironmentVariablesFromScript from "../functions/preRequest";
import parseTemplateString from "../functions/templating";
@@ -732,8 +827,8 @@ export default {
editRequest: {},
urlExcludes: {},
responseBodyText: '',
responseBodyType: 'text'
responseBodyText: "",
responseBodyType: "text"
};
},
watch: {
@@ -759,19 +854,20 @@ export default {
this.response.body === "Loading..."
) {
this.responseBodyText = this.response.body;
this.responseBodyType = 'text';
this.responseBodyType = "text";
} else {
if(this.responseType === "application/json" ||
this.responseType === "application/hal+json"
if (
this.responseType === "application/json" ||
this.responseType === "application/hal+json"
) {
this.responseBodyText = JSON.stringify(this.response.body, null, 2)
this.responseBodyType = 'json'
this.responseBodyText = JSON.stringify(this.response.body, null, 2);
this.responseBodyType = "json";
} else if (this.responseType === "text/html") {
this.responseBodyText = this.response.body;
this.responseBodyType = 'html'
this.responseBodyType = "html";
} else {
this.responseBodyText = this.response.body;
this.responseBodyType = 'text';
this.responseBodyType = "text";
}
}
},
@@ -1183,7 +1279,14 @@ export default {
behavior: "smooth"
});
},
handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
handleUseHistory({
label,
method,
url,
path,
usesScripts,
preRequestScript
}) {
this.label = label;
this.method = method;
this.url = url;

29
pages/settings.vue
View File

@@ -46,7 +46,11 @@
<pw-toggle
:on="settings.FRAME_COLORS_ENABLED"
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>Multi-color {{ settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled" }}</pw-toggle>
>Multi-color
{{
settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled"
}}</pw-toggle
>
</span>
</li>
</ul>
@@ -62,9 +66,15 @@
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
>Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
>Proxy
{{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle
>
</span>
<a href="https://github.com/liyasthomas/postwoman/wiki/Proxy" target="_blank" rel="noopener">
<a
href="https://github.com/liyasthomas/postwoman/wiki/Proxy"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help</i>
</button>
@@ -77,7 +87,10 @@
<p>
Postwoman's Proxy is hosted by ApolloTV.
<br />
Read the <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">ApolloTV privacy policy</a>.
Read the
<a href="https://apollotv.xyz/legal" target="_blank" rel="noopener"
>ApolloTV privacy policy</a
>.
</p>
</li>
</ul>
@@ -142,14 +155,16 @@ export default {
color: "#000000",
name: "Just Black",
class: "black",
aceEditor: "tomorrow_night_blue"
aceEditor: "vibrant_ink"
},
{
color: "var(--bg-color)",
name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto",
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches ? 'xcode' : 'dracula'
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
? "xcode"
: "dracula"
}
],
// You can define a new color here! It will simply store the color value.
@@ -224,7 +239,7 @@ export default {
},
methods: {
applyTheme({class:name, color, aceEditor}) {
applyTheme({ class: name, color, aceEditor }) {
this.applySetting("THEME_CLASS", name);
this.applySetting("THEME_ACE_EDITOR", aceEditor);
document

25
pages/websocket.vue
View File

@@ -14,7 +14,12 @@
</li>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ toggleConnectionVerb }}
<span>
<i class="material-icons" v-if="!connectionState">sync</i>
@@ -27,7 +32,12 @@
<br />
<pw-section class="purple" label="Communication" id="response" ref="response">
<pw-section
class="purple"
label="Communication"
id="response"
ref="response"
>
<ul>
<li>
<label for="log">Log</label>
@@ -37,7 +47,9 @@
v-for="(logEntry, index) in communication.log"
:style="{ color: logEntry.color }"
:key="index"
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }}
{{ logEntry.payload }}</span
>
</span>
<span v-else>(waiting for connection)</span>
</div>
@@ -57,7 +69,12 @@
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
Send
<span>
<i class="material-icons">send</i>