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

🚨 Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-12 10:22:50 +05:30
parent 3b6c8247c5
commit 653e42c2b9
17 changed files with 690 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">