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

: rotating_light: Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-25 13:44:34 +05:30
parent 96adfa0b5a
commit a09d7d76d3
35 changed files with 3133 additions and 2620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -228,6 +228,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
<td align="center"><a href="https://github.com/nityanandagohain"><img src="https://github.com/nityanandagohain.png?size=100" width="100px;" alt="Nityananda Gohain"/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/terranblake"><img src="https://github.com/terranblake.png?size=100" width="100px;" alt="Terran Blake"/><br /><sub><b>Terran Blake</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=terranblake" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://github.com/hosseinnedaee.png?size=100" width="100px;" alt="Hossein Nedaee"/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/vlad0337187"><img src="https://github.com/vlad0337187.png?size=100" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
</tr>
</table>

39
assets/css/fonts.scss
View File

@@ -1,13 +1,13 @@
/* Material Design Icons */
@font-face {
font-family: 'Material Icons';
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(~@/assets/fonts/material-icons-v48.woff2) format('woff2');
src: url(~@/assets/fonts/material-icons-v48.woff2) format("woff2");
}
.material-icons {
font-family: 'Material Icons';
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
@@ -18,35 +18,42 @@
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
/* Roboto Mono 400 */
@font-face {
font-family: 'Roboto Mono';
font-family: "Roboto Mono";
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'),
url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Roboto Mono"), local("RobotoMono-Regular"),
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Poppins 500 */
@font-face {
font-family: 'Poppins';
font-family: "Poppins";
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'),
url('~@/assets/fonts/poppins-v9-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('~@/assets/fonts/poppins-v9-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Poppins Medium"), local("Poppins-Medium"),
url("~@/assets/fonts/poppins-v9-latin-500.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-500.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@font-face {
font-family: 'Poppins';
font-family: "Poppins";
font-style: normal;
font-weight: 700;
src: local('Poppins Bold'), local('Poppins-Bold'),
url('~@/assets/fonts/poppins-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('~@/assets/fonts/poppins-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
src: local("Poppins Bold"), local("Poppins-Bold"),
url("~@/assets/fonts/poppins-v9-latin-700.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-700.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

19
assets/css/styles.scss
View File

@@ -2,9 +2,11 @@ $responsiveWidth: 720px;
// Make theme transition smoother.
body.afterLoad {
&, & * {
&,
& * {
transition: background-color 0.2s ease-in-out,
border 0.2s ease-in-out;
border 0.2s ease-in-out;
}
}
@@ -180,7 +182,7 @@ h3.title {
header,
footer {
& > div {
&>div {
display: flex;
padding: 16px;
width: 100%;
@@ -218,7 +220,6 @@ button {
transition: all 0.2s ease-in-out;
fill: var(--act-color);
height: 40px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
cursor: pointer;
span {
@@ -353,7 +354,7 @@ input[type="checkbox"] {
display: none;
&,
& + label {
&+label {
vertical-align: middle;
cursor: pointer;
@@ -372,7 +373,7 @@ input[type="checkbox"] {
}
}
&:checked + label:before {
&:checked+label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
@@ -567,7 +568,7 @@ div.tab {
display: none;
}
input[type="radio"] + label {
input[type="radio"]+label {
padding: 8px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
@@ -578,11 +579,11 @@ input[type="radio"] + label {
}
}
input[type="radio"]:checked + label {
input[type="radio"]:checked+label {
border-color: var(--fg-color);
}
input[type="radio"]:checked + label + div.tab {
input[type="radio"]:checked+label+div.tab {
display: block;
}

4
assets/css/themes.scss
View File

@@ -1,6 +1,5 @@
/**
Main Themes:
- dark (default)
- light
- black
@@ -33,6 +32,7 @@
:root {
@include darkTheme;
}
@media(prefers-color-scheme: dark) {
:root.auto {
@include darkTheme;
@@ -64,6 +64,7 @@
:root.light {
@include lightTheme;
}
@media(prefers-color-scheme: light) {
:root.auto {
@include lightTheme;
@@ -91,6 +92,7 @@
// Active text color
--act-color: #000000;
}
:root.black {
@include blackTheme;
}

383
assets/js/curlparser.js
View File

@@ -2,222 +2,229 @@ import * as cookie from "cookie";
import * as URL from "url";
import * as querystring from "querystring";
/**
* given this: [ 'msg1=value1', 'msg2=value2' ]
* output this: 'msg1=value1&msg2=value2'
* @param dataArguments
*/
function joinDataArguments(dataArguments) {
let data = '';
dataArguments.forEach(function(argument, i) {
if (i === 0) {
data += argument;
} else {
data += '&' + argument;
}
})
return data;
let data = "";
dataArguments.forEach(function(argument, i) {
if (i === 0) {
data += argument;
} else {
data += "&" + argument;
}
});
return data;
}
function parseCurlCommand(curlCommand) {
let newlineFound = /\r|\n/.exec(curlCommand);
if (newlineFound) {
// remove newlines
curlCommand = curlCommand.replace(/\\\r|\\\n/g, '');
}
// yargs parses -XPOST as separate arguments. just prescreen for it.
curlCommand = curlCommand.replace(/ -XPOST/, ' -X POST');
curlCommand = curlCommand.replace(/ -XGET/, ' -X GET');
curlCommand = curlCommand.replace(/ -XPUT/, ' -X PUT');
curlCommand = curlCommand.replace(/ -XPATCH/, ' -X PATCH');
curlCommand = curlCommand.replace(/ -XDELETE/, ' -X DELETE');
curlCommand = curlCommand.trim();
let parsedArguments = require("yargs-parser")(curlCommand);
let cookieString;
let cookies;
let url = parsedArguments._[1];
if (!url) {
for (let argName in parsedArguments) {
if (typeof parsedArguments[argName] === 'string') {
if (['http', 'www.'].includes(parsedArguments[argName])) {
url = parsedArguments[argName];
}
}
let newlineFound = /\r|\n/.exec(curlCommand);
if (newlineFound) {
// remove newlines
curlCommand = curlCommand.replace(/\\\r|\\\n/g, "");
}
// yargs parses -XPOST as separate arguments. just prescreen for it.
curlCommand = curlCommand.replace(/ -XPOST/, " -X POST");
curlCommand = curlCommand.replace(/ -XGET/, " -X GET");
curlCommand = curlCommand.replace(/ -XPUT/, " -X PUT");
curlCommand = curlCommand.replace(/ -XPATCH/, " -X PATCH");
curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE");
curlCommand = curlCommand.trim();
let parsedArguments = require("yargs-parser")(curlCommand);
let cookieString;
let cookies;
let url = parsedArguments._[1];
if (!url) {
for (let argName in parsedArguments) {
if (typeof parsedArguments[argName] === "string") {
if (["http", "www."].includes(parsedArguments[argName])) {
url = parsedArguments[argName];
}
}
}
let headers;
}
let headers;
let parseHeaders = function(headerFieldName) {
if (parsedArguments[headerFieldName]) {
if (!headers) {
headers = {};
}
if (!Array.isArray(parsedArguments[headerFieldName])) {
parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
}
parsedArguments[headerFieldName].forEach(function(header) {
if (header.includes('Cookie')) {
// stupid javascript tricks: closure
cookieString = header;
} else {
let colonIndex = header.indexOf(':');
let headerName = header.substring(0, colonIndex);
let headerValue = header.substring(colonIndex + 1).trim();
headers[headerName] = headerValue;
}
})
let parseHeaders = function(headerFieldName) {
if (parsedArguments[headerFieldName]) {
if (!headers) {
headers = {};
}
if (!Array.isArray(parsedArguments[headerFieldName])) {
parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
}
parsedArguments[headerFieldName].forEach(function(header) {
if (header.includes("Cookie")) {
// stupid javascript tricks: closure
cookieString = header;
} else {
let colonIndex = header.indexOf(":");
let headerName = header.substring(0, colonIndex);
let headerValue = header.substring(colonIndex + 1).trim();
headers[headerName] = headerValue;
}
});
}
};
parseHeaders('H');
parseHeaders('header');
if (parsedArguments.A) {
if (!headers) {
headers = [];
}
headers['User-Agent'] = parsedArguments.A;
} else if (parsedArguments['user-agent']) {
if (!headers) {
headers = [];
}
headers['User-Agent'] = parsedArguments['user-agent'];
parseHeaders("H");
parseHeaders("header");
if (parsedArguments.A) {
if (!headers) {
headers = [];
}
headers["User-Agent"] = parsedArguments.A;
} else if (parsedArguments["user-agent"]) {
if (!headers) {
headers = [];
}
headers["User-Agent"] = parsedArguments["user-agent"];
}
if (parsedArguments.b) {
cookieString = parsedArguments.b;
}
if (parsedArguments.cookie) {
cookieString = parsedArguments.cookie;
}
let multipartUploads;
if (parsedArguments.F) {
multipartUploads = {};
if (!Array.isArray(parsedArguments.F)) {
parsedArguments.F = [parsedArguments.F];
}
parsedArguments.F.forEach(function(multipartArgument) {
// input looks like key=value. value could be json or a file path prepended with an @
let splitArguments = multipartArgument.split('=', 2);
let key = splitArguments[0];
let value = splitArguments[1];
multipartUploads[key] = value;
})
}
if (cookieString) {
let cookieParseOptions = {
decode: function(s) { return s }
}
// separate out cookie headers into separate data structure
// note: cookie is case insensitive
cookies = cookie.parse(cookieString.replace(/^Cookie: /gi, ''), cookieParseOptions);
}
let method;
if (parsedArguments.X === 'POST') {
method = 'post';
} else if (parsedArguments.X === 'PUT' ||
parsedArguments['T']) {
method = 'put';
} else if (parsedArguments.X === 'PATCH') {
method = 'patch';
} else if (parsedArguments.X === 'DELETE') {
method = 'delete';
} else if (parsedArguments.X === 'OPTIONS') {
method = 'options';
} else if ((parsedArguments['d'] ||
parsedArguments['data'] ||
parsedArguments['data-ascii'] ||
parsedArguments['data-binary'] ||
parsedArguments['F'] ||
parsedArguments['form']) && !((parsedArguments['G'] || parsedArguments['get']))) {
method = 'post';
} else if (parsedArguments['I'] ||
parsedArguments['head']) {
method = 'head';
} else {
method = 'get';
if (parsedArguments.b) {
cookieString = parsedArguments.b;
}
if (parsedArguments.cookie) {
cookieString = parsedArguments.cookie;
}
let multipartUploads;
if (parsedArguments.F) {
multipartUploads = {};
if (!Array.isArray(parsedArguments.F)) {
parsedArguments.F = [parsedArguments.F];
}
parsedArguments.F.forEach(function(multipartArgument) {
// input looks like key=value. value could be json or a file path prepended with an @
let splitArguments = multipartArgument.split("=", 2);
let key = splitArguments[0];
let value = splitArguments[1];
multipartUploads[key] = value;
});
}
if (cookieString) {
let cookieParseOptions = {
decode: function(s) {
return s;
}
};
// separate out cookie headers into separate data structure
// note: cookie is case insensitive
cookies = cookie.parse(
cookieString.replace(/^Cookie: /gi, ""),
cookieParseOptions
);
}
let method;
if (parsedArguments.X === "POST") {
method = "post";
} else if (parsedArguments.X === "PUT" || parsedArguments["T"]) {
method = "put";
} else if (parsedArguments.X === "PATCH") {
method = "patch";
} else if (parsedArguments.X === "DELETE") {
method = "delete";
} else if (parsedArguments.X === "OPTIONS") {
method = "options";
} else if (
(parsedArguments["d"] ||
parsedArguments["data"] ||
parsedArguments["data-ascii"] ||
parsedArguments["data-binary"] ||
parsedArguments["F"] ||
parsedArguments["form"]) &&
!(parsedArguments["G"] || parsedArguments["get"])
) {
method = "post";
} else if (parsedArguments["I"] || parsedArguments["head"]) {
method = "head";
} else {
method = "get";
}
let compressed = !!parsedArguments.compressed;
let urlObject = URL.parse(url); // eslint-disable-line
let compressed = !!parsedArguments.compressed;
let urlObject = URL.parse(url); // eslint-disable-line
// if GET request with data, convert data to query string
// NB: the -G flag does not change the http verb. It just moves the data into the url.
if (parsedArguments['G'] || parsedArguments['get']) {
urlObject.query = urlObject.query ? urlObject.query : '';
let option = 'd' in parsedArguments ? 'd' : 'data' in parsedArguments ? 'data' : null;
if (option) {
let urlQueryString = '';
// if GET request with data, convert data to query string
// NB: the -G flag does not change the http verb. It just moves the data into the url.
if (parsedArguments["G"] || parsedArguments["get"]) {
urlObject.query = urlObject.query ? urlObject.query : "";
let option =
"d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null;
if (option) {
let urlQueryString = "";
if (!url.includes('?')) {
url += '?';
} else {
urlQueryString += '&';
}
if (!url.includes("?")) {
url += "?";
} else {
urlQueryString += "&";
}
if (typeof(parsedArguments[option]) === 'object') {
urlQueryString += parsedArguments[option].join('&');
} else {
urlQueryString += parsedArguments[option];
}
urlObject.query += urlQueryString;
url += urlQueryString;
delete parsedArguments[option];
}
if (typeof parsedArguments[option] === "object") {
urlQueryString += parsedArguments[option].join("&");
} else {
urlQueryString += parsedArguments[option];
}
urlObject.query += urlQueryString;
url += urlQueryString;
delete parsedArguments[option];
}
let query = querystring.parse(urlObject.query, null, null, { maxKeys: 10000 });
}
let query = querystring.parse(urlObject.query, null, null, {
maxKeys: 10000
});
urlObject.search = null // Clean out the search/query portion.
let request = {
url: url,
urlWithoutQuery: URL.format(urlObject)
}
if (compressed) {
request['compressed'] = true;
}
urlObject.search = null; // Clean out the search/query portion.
let request = {
url: url,
urlWithoutQuery: URL.format(urlObject)
};
if (compressed) {
request["compressed"] = true;
}
if (Object.keys(query).length > 0) {
request.query = query;
}
if (headers) {
request.headers = headers;
}
request['method'] = method;
if (Object.keys(query).length > 0) {
request.query = query;
}
if (headers) {
request.headers = headers;
}
request["method"] = method;
if (cookies) {
request.cookies = cookies;
request.cookieString = cookieString.replace('Cookie: ', '');
}
if (multipartUploads) {
request.multipartUploads = multipartUploads;
}
if (parsedArguments.data) {
request.data = parsedArguments.data;
} else if (parsedArguments['data-binary']) {
request.data = parsedArguments['data-binary']
request.isDataBinary = true;
} else if (parsedArguments['d']) {
request.data = parsedArguments['d'];
} else if (parsedArguments['data-ascii']) {
request.data = parsedArguments['data-ascii'];
}
if (cookies) {
request.cookies = cookies;
request.cookieString = cookieString.replace("Cookie: ", "");
}
if (multipartUploads) {
request.multipartUploads = multipartUploads;
}
if (parsedArguments.data) {
request.data = parsedArguments.data;
} else if (parsedArguments["data-binary"]) {
request.data = parsedArguments["data-binary"];
request.isDataBinary = true;
} else if (parsedArguments["d"]) {
request.data = parsedArguments["d"];
} else if (parsedArguments["data-ascii"]) {
request.data = parsedArguments["data-ascii"];
}
if (parsedArguments['u']) {
request.auth = parsedArguments['u'];
}
if (parsedArguments['user']) {
request.auth = parsedArguments['user'];
}
if (Array.isArray(request.data)) {
request.dataArray = request.data
request.data = joinDataArguments(request.data);
}
if (parsedArguments["u"]) {
request.auth = parsedArguments["u"];
}
if (parsedArguments["user"]) {
request.auth = parsedArguments["user"];
}
if (Array.isArray(request.data)) {
request.dataArray = request.data;
request.data = joinDataArguments(request.data);
}
if (parsedArguments['k'] || parsedArguments['insecure']) {
request.insecure = true;
}
return request;
if (parsedArguments["k"] || parsedArguments["insecure"]) {
request.insecure = true;
}
return request;
}
export default parseCurlCommand;

2
assets/js/pwa.js
View File

@@ -35,8 +35,6 @@ export default () => {
});
// When the app is uninstalled, add the prompts back
return async () => {
if (deferredPrompt) {
deferredPrompt.prompt();

16
build.js
View File

@@ -1,10 +1,12 @@
const axios = require("axios");
const fs = require("fs");
const { spawnSync } = require("child_process");
const {
spawnSync
} = require("child_process");
const runCommand = (command, args) =>
spawnSync(command, args)
.stdout.toString()
.replace(/\n/g, "");
.stdout.toString()
.replace(/\n/g, "");
const FAIL_ON_ERROR = false;
const PW_BUILD_DATA_DIR = "./.postwoman";
@@ -27,7 +29,9 @@ try {
.get("https://api.github.com/repos/liyasthomas/postwoman/releases")
// If we can't get it from GitHub, we'll resort to getting it from package.json
.catch(ex => ({
data: [{ tag_name: require("./package.json").version }]
data: [{
tag_name: require("./package.json").version
}]
}))).data[0]["tag_name"];
}
@@ -37,8 +41,8 @@ try {
version.variant =
process.env.TRAVIS_BRANCH ||
runCommand("git", ["branch"])
.split("* ")[1]
.split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
.split("* ")[1]
.split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
if (["", "master"].includes(version.variant))
delete version.variant;

296
components/autocomplete.vue
View File

@@ -29,176 +29,182 @@
</template>
<style lang="scss" scoped>
.autocomplete-wrapper {
position: relative;
.autocomplete-wrapper {
position: relative;
input:focus + ul.suggestions,
ul.suggestions:hover {
display: block;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
li {
width: 100%;
input:focus + ul.suggestions,
ul.suggestions:hover {
display: block;
padding: 8px 16px;
font-size: 18px;
font-family: 'Roboto Mono', monospace;
white-space: pre-wrap;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
li {
width: 100%;
display: block;
padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
}
</style>
<script>
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
placeholder: {
type: String,
default: "Start typing...",
required: false
},
source: {
type: Array,
required: true
}
},
placeholder: {
type: String,
default: "Start typing...",
required: false
watch: {
value() {
this.$emit("input", this.value);
}
},
source: {
type: Array,
required: true
}
},
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
watch: {
value() {
this.$emit("input", this.value);
}
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
return;
}
},
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
}
},
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
};
};
</script>

98
components/collections/addCollection.vue
View File

@@ -1,64 +1,64 @@
<template>
<div>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">New Collection</h3>
<div>
<button class="icon" @click="hideModal" >
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">New Collection</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" placeholder="My New Collection" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewCollection">
<i class="material-icons">add</i>
<span>Create</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" placeholder="My New Collection" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewCollection">
<i class="material-icons">add</i>
<span>Create</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show: Boolean,
show: Boolean
},
components: {
modal,
modal
},
data() {
return {
name: undefined,
}
return {
name: undefined
};
},
methods: {
addNewCollection() {
this.$store.commit('postwoman/addNewCollection', { name: this.$data.name })
this.$emit('hide-modal')
},
hideModal() {
this.$emit('hide-modal')
},
},
};
addNewCollection() {
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name
});
this.$emit("hide-modal");
},
hideModal() {
this.$emit("hide-modal");
}
}
};
</script>

105
components/collections/addFolder.vue
View File

@@ -1,64 +1,67 @@
<template>
<modal v-if="show" @close="show = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">New Folder</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" placeholder="My New Folder" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewFolder">
<i class="material-icons">add</i>
<span>Create</span>
</button>
</li>
</ul>
</div>
</modal>
<modal v-if="show" @close="show = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">New Folder</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" placeholder="My New Folder" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewFolder">
<i class="material-icons">add</i>
<span>Create</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show : Boolean,
collection : Object,
collectionIndex : Number,
show: Boolean,
collection: Object,
collectionIndex: Number
},
components: {
modal,
modal
},
data() {
return {
name: undefined,
}
return {
name: undefined
};
},
methods: {
addNewFolder() {
this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
this.hideModal()
},
hideModal() {
this.$emit('hide-modal')
},
},
};
addNewFolder() {
this.$store.commit("postwoman/addNewFolder", {
folder: { name: this.$data.name },
collectionIndex: this.$props.collectionIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
}
};
</script>

170
components/collections/collection.vue
View File

@@ -1,103 +1,103 @@
<template>
<div>
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren">
<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>
</button>
</div>
<div>
<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'">
<i class="material-icons">create</i>
</button>
<button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
<i class="material-icons">create_new_folder</i>
</button>
</div>
</div>
<div v-show="showChildren">
<ul>
<li v-for="(folder, index) in collection.folders" :key="folder.name">
<folder
v-bind:folder = "folder"
v-bind:folderIndex = "index"
v-bind:collection-index = "collectionIndex"
v-on:edit-folder = "editFolder(collectionIndex, folder, index)"
v-on:edit-request = "$emit('edit-request', $event)"
/>
</li>
<li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
<label>Collection is empty</label>
</li>
</ul>
<ul>
<li v-for="(request, index) in collection.requests" :key="index">
<request
v-bind:request = "request"
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 })"
></request>
</li>
</ul>
</div>
<div>
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren">
<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>
</button>
</div>
<div>
<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'">
<i class="material-icons">create</i>
</button>
<button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
<i class="material-icons">create_new_folder</i>
</button>
</div>
</div>
<div v-show="showChildren">
<ul>
<li v-for="(folder, index) in collection.folders" :key="folder.name">
<folder
v-bind:folder="folder"
v-bind:folderIndex="index"
v-bind:collection-index="collectionIndex"
v-on:edit-folder="editFolder(collectionIndex, folder, index)"
v-on:edit-request="$emit('edit-request', $event)"
/>
</li>
<li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
<label>Collection is empty</label>
</li>
</ul>
<ul>
<li v-for="(request, index) in collection.requests" :key="index">
<request
v-bind:request="request"
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 })"
></request>
</li>
</ul>
</div>
</div>
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
import folder from './folder';
import request from './request';
import folder from "./folder";
import request from "./request";
export default {
export default {
components: {
folder,
request,
folder,
request
},
props: {
collectionIndex : Number,
collection : Object,
collectionIndex: Number,
collection: Object
},
data () {
return {
showChildren : false,
selectedFolder : {},
};
data() {
return {
showChildren: false,
selectedFolder: {}
};
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
removeCollection() {
if (!confirm("Are you sure you want to remove this collection?")) return;
this.$store.commit('postwoman/removeCollection', {
collectionIndex: this.collectionIndex,
});
},
editFolder(collectionIndex, folder, folderIndex) {
this.$emit('edit-folder', { collectionIndex, folder, folderIndex })
},
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
removeCollection() {
if (!confirm("Are you sure you want to remove this collection?")) return;
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex
});
},
editFolder(collectionIndex, folder, folderIndex) {
this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
}
}
};
};
</script>

108
components/collections/editCollection.vue
View File

@@ -1,67 +1,71 @@
<template>
<div>
<modal v-if="show" @close="hideModel">
<div slot='header'>
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Collection</h3>
<div>
<button class="icon" @click="hideModel" >
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModel">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Collection</h3>
<div>
<button class="icon" @click="hideModel">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveCollection">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveCollection">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show : Boolean,
editingCollection : Object,
editingCollectionIndex : Number,
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number
},
components: {
modal,
modal
},
data() {
return {
name: undefined,
}
return {
name: undefined
};
},
methods: {
saveCollection() {
const collectionUpdated = { ...this.$props.editingCollection, name: this.$data.name }
this.$store.commit('postwoman/editCollection', { collection: collectionUpdated, collectionIndex: this.$props.editingCollectionIndex })
this.$emit('hide-modal');
},
hideModel() {
this.$emit('hide-modal');
},
},
};
saveCollection() {
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name
};
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex
});
this.$emit("hide-modal");
},
hideModel() {
this.$emit("hide-modal");
}
}
};
</script>

114
components/collections/editFolder.vue
View File

@@ -1,70 +1,70 @@
<template>
<modal v-if="show" @close="show = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Folder</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="folder.name" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="editFolder">
<i class="material-icons">add</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
<modal v-if="show" @close="show = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Folder</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="name" v-bind:placeholder="folder.name" />
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="editFolder">
<i class="material-icons">add</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show : Boolean,
collection : Object,
collectionIndex : Number,
folder : Object,
folderIndex : Number,
show: Boolean,
collection: Object,
collectionIndex: Number,
folder: Object,
folderIndex: Number
},
components: {
modal,
modal
},
data() {
return {
name: undefined,
}
return {
name: undefined
};
},
methods: {
editFolder() {
this.$store.commit('postwoman/editFolder', {
collectionIndex : this.$props.collectionIndex,
folder : { ...this.$props.folder, name: this.$data.name },
folderIndex : this.$props.folderIndex,
})
this.hideModal()
},
hideModal() {
this.$emit('hide-modal')
},
},
};
editFolder() {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.$props.collectionIndex,
folder: { ...this.$props.folder, name: this.$data.name },
folderIndex: this.$props.folderIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
}
};
</script>

202
components/collections/editRequest.vue
View File

@@ -1,132 +1,122 @@
<!--
Made this component to be separate from `saveRequest` as it handles request editing
only related to it's positioning and naming inside of collections.
-->
<template>
<div>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Request</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Request</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
<select type="text" v-model="requestUpdateData.collectionIndex" >
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key = "index"
:value = "index">
{{ collection.name }}
</option>
</select>
<select type="text" v-model="requestUpdateData.folderIndex">
<option
:key = "undefined"
:value = "undefined">
</option>
<option
v-for="(folder, index) in folders"
:key = "index"
:value = "index">
{{ folder.name }}
</option>
</select>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequest">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
<select type="text" v-model="requestUpdateData.collectionIndex">
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option>
</select>
<select type="text" v-model="requestUpdateData.folderIndex">
<option :key="undefined" :value="undefined"></option>
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
</select>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequest">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show : Boolean,
collectionIndex : Number,
folderIndex : Number,
request : Object,
requestIndex : Number,
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
request: Object,
requestIndex: Number
},
components: {
modal,
modal
},
data() {
return {
requestUpdateData : {
name : undefined,
collectionIndex : undefined,
folderIndex : undefined,
},
return {
requestUpdateData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined
}
};
},
watch: {
'requestUpdateData.collectionIndex': function resetFolderIndex() {
"requestUpdateData.collectionIndex": function resetFolderIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestUpdateData.folderIndex = undefined
},
this.$data.requestUpdateData.folderIndex = undefined;
}
},
computed: {
folders() {
const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
if (!userSelectedAnyCollection) return []
folders() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex].folders
},
return this.$store.state.postwoman.collections[
this.$data.requestUpdateData.collectionIndex
].folders;
}
},
methods: {
saveRequest() {
const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
saveRequest() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
const requestUpdated = {
...this.$props.request,
name : this.$data.requestUpdateData.name || this.$props.request.name,
collection : userSelectedAnyCollection ? this.$data.requestUpdateData.collectionIndex : this.$props.collectionIndex,
folder : this.$data.requestUpdateData.folderIndex,
}
const requestUpdated = {
...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name,
collection: userSelectedAnyCollection
? this.$data.requestUpdateData.collectionIndex
: this.$props.collectionIndex,
folder: this.$data.requestUpdateData.folderIndex
};
// pass data separately to don't depend on request's collection, folder fields
// probably, they should be deprecated because they don't describe request itself
this.$store.commit('postwoman/editRequest', {
requestOld : this.$props.request,
requestOldCollectionIndex : this.$props.collectionIndex,
requestOldFolderIndex : this.$props.folderIndex,
requestOldIndex : this.$props.requestIndex,
requestNew : requestUpdated,
requestNewCollectionIndex : requestUpdated.collection,
requestNewFolderIndex : requestUpdated.folder,
});
// pass data separately to don't depend on request's collection, folder fields
// probably, they should be deprecated because they don't describe request itself
this.$store.commit("postwoman/editRequest", {
requestOld: this.$props.request,
requestOldCollectionIndex: this.$props.collectionIndex,
requestOldFolderIndex: this.$props.folderIndex,
requestOldIndex: this.$props.requestIndex,
requestNew: requestUpdated,
requestNewCollectionIndex: requestUpdated.collection,
requestNewFolderIndex: requestUpdated.folder
});
this.hideModal()
},
hideModal() {
this.$emit('hide-modal')
},
},
};
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
}
};
</script>

144
components/collections/folder.vue
View File

@@ -1,90 +1,90 @@
<template>
<div>
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren">
<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>
</button>
</div>
<div>
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
<i class="material-icons">edit</i>
</button>
</div>
</div>
<div v-show="showChildren">
<ul>
<li v-for="(request, index) in folder.requests" :key="index">
<request
v-bind:request = "request"
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 })"
></request>
</li>
<li v-if="folder.requests.length === 0">
<label>Folder is empty</label>
</li>
</ul>
</div>
<div>
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren">
<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>
</button>
</div>
<div>
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
<i class="material-icons">edit</i>
</button>
</div>
</div>
<div v-show="showChildren">
<ul>
<li v-for="(request, index) in folder.requests" :key="index">
<request
v-bind:request="request"
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 })"
></request>
</li>
<li v-if="folder.requests.length === 0">
<label>Folder is empty</label>
</li>
</ul>
</div>
</div>
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
import request from './request';
import request from "./request";
export default {
export default {
props: {
folder : Object,
collectionIndex : Number,
folderIndex : Number,
folder: Object,
collectionIndex: Number,
folderIndex: Number
},
components: {
request,
request
},
data () {
return {
showChildren: false,
};
data() {
return {
showChildren: false
};
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
selectRequest(request) {
this.$store.commit('postwoman/selectRequest', { request });
},
removeFolder() {
if (!confirm("Are you sure you want to remove this folder?")) return;
this.$store.commit('postwoman/removeFolder', {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
});
},
editFolder() {
this.$emit('edit-folder')
},
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
selectRequest(request) {
this.$store.commit("postwoman/selectRequest", { request });
},
removeFolder() {
if (!confirm("Are you sure you want to remove this folder?")) return;
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex
});
},
editFolder() {
this.$emit("edit-folder");
}
}
};
};
</script>

197
components/collections/importExportCollections.vue
View File

@@ -1,110 +1,117 @@
<template>
<div>
<modal v-if="show" @close="hideModel">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3>
<div>
<button class="icon" @click="hideModel">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModel">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3>
<div>
<button class="icon" @click="hideModel">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<textarea v-model='collectionJson' rows="8">
</textarea>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="openDialogChooseFileToReplaceWith">
<i class="material-icons">get_app</i>
<span>Replace with JSON</span>
<input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
</button>
</li>
<li>
<button class="icon" @click="openDialogChooseFileToImportFrom">
<i class="material-icons">get_app</i>
<span>Import from JSON</span>
<input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
</button>
</li>
<li>
<button class="icon" @click="exportJSON">
<i class="material-icons">get_app</i>
<span>Export JSON</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<textarea v-model="collectionJson" rows="8"></textarea>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="openDialogChooseFileToReplaceWith">
<i class="material-icons">get_app</i>
<span>Replace with JSON</span>
<input
type="file"
@change="replaceWithJSON"
style="display: none;"
ref="inputChooseFileToReplaceWith"
/>
</button>
</li>
<li>
<button class="icon" @click="openDialogChooseFileToImportFrom">
<i class="material-icons">get_app</i>
<span>Import from JSON</span>
<input
type="file"
@change="importFromJSON"
style="display: none;"
ref="inputChooseFileToImportFrom"
/>
</button>
</li>
<li>
<button class="icon" @click="exportJSON">
<i class="material-icons">get_app</i>
<span>Export JSON</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show: Boolean,
show: Boolean
},
components: {
modal,
modal
},
computed: {
collectionJson () {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
},
methods: {
hideModel() {
this.$emit('hide-modal');
},
openDialogChooseFileToReplaceWith() {
this.$refs.inputChooseFileToReplaceWith.click();
},
openDialogChooseFileToImportFrom() {
this.$refs.inputChooseFileToImportFrom.click();
},
replaceWithJSON() {
let reader = new FileReader();
reader.onload = (event) => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit('postwoman/replaceCollections', collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = (event) => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit('postwoman/importCollections', collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, '\r\n');
let blob = new Blob([text], {
type: 'text/json'
});
let anchor = document.createElement('a');
anchor.download = 'postwoman-collection.json';
anchor.href = window.URL.createObjectURL(blob);
anchor.target = '_blank';
anchor.style.display = 'none';
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
},
};
hideModel() {
this.$emit("hide-modal");
},
openDialogChooseFileToReplaceWith() {
this.$refs.inputChooseFileToReplaceWith.click();
},
openDialogChooseFileToImportFrom() {
this.$refs.inputChooseFileToImportFrom.click();
},
replaceWithJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/replaceCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/importCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, "\r\n");
let blob = new Blob([text], {
type: "text/json"
});
let anchor = document.createElement("a");
anchor.download = "postwoman-collection.json";
anchor.href = window.URL.createObjectURL(blob);
anchor.target = "_blank";
anchor.style.display = "none";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
}
};
</script>

206
components/collections/index.vue
View File

@@ -5,50 +5,41 @@ 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"
v-bind:editingCollectionIndex = "editingCollectionIndex"
v-on:hide-modal = 'displayModalEdit(false)'
>
</editCollection>
v-bind:show="showModalEdit"
v-bind:editingCollection="editingCollection"
v-bind:editingCollectionIndex="editingCollectionIndex"
v-on:hide-modal="displayModalEdit(false)"
></editCollection>
<addFolder
v-bind:show = "showModalAddFolder"
v-bind:collection = "editingCollection"
v-bind:collectionIndex = "editingCollectionIndex"
v-on:hide-modal = 'displayModalAddFolder(false)'
>
</addFolder>
v-bind:show="showModalAddFolder"
v-bind:collection="editingCollection"
v-bind:collectionIndex="editingCollectionIndex"
v-on:hide-modal="displayModalAddFolder(false)"
></addFolder>
<editFolder
v-bind:show = "showModalEditFolder"
v-bind:collection = "editingCollection"
v-bind:collectionIndex = "editingCollectionIndex"
v-bind:folder = "editingFolder"
v-bind:folderIndex = "editingFolderIndex"
v-on:hide-modal = 'displayModalEditFolder(false)'
>
</editFolder>
v-bind:show="showModalEditFolder"
v-bind:collection="editingCollection"
v-bind:collectionIndex="editingCollectionIndex"
v-bind:folder="editingFolder"
v-bind:folderIndex="editingFolderIndex"
v-on:hide-modal="displayModalEditFolder(false)"
></editFolder>
<editRequest
v-bind:show = "showModalEditRequest"
v-bind:collectionIndex = "editingCollectionIndex"
v-bind:folderIndex = "editingFolderIndex"
v-bind:request = "editingRequest"
v-bind:requestIndex = "editingRequestIndex"
v-on:hide-modal = "displayModalEditRequest(false)"
>
</editRequest>
v-bind:show="showModalEditRequest"
v-bind:collectionIndex="editingCollectionIndex"
v-bind:folderIndex="editingFolderIndex"
v-bind:request="editingRequest"
v-bind:requestIndex="editingRequestIndex"
v-on:hide-modal="displayModalEditRequest(false)"
></editRequest>
<importExportCollections
v-bind:show = "showModalImportExport"
v-on:hide-modal = 'displayModalImportExport(false)'
>
</importExportCollections>
v-bind:show="showModalImportExport"
v-on:hide-modal="displayModalImportExport(false)"
></importExportCollections>
<div class='flex-wrap'>
<div class="flex-wrap">
<div>
<button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
@@ -66,14 +57,13 @@ TODO:
<ul>
<li v-for="(collection, index) in collections" :key="collection.name">
<collection
v-bind:collection-index = "index"
v-bind:collection = "collection"
v-on:edit-collection = "editCollection(collection, index)"
v-on:add-folder = "addFolder(collection, index)"
v-on:edit-folder = "editFolder($event)"
v-on:edit-request = "editRequest($event)"
>
</collection>
v-bind:collection-index="index"
v-bind:collection="collection"
v-on:edit-collection="editCollection(collection, index)"
v-on:add-folder="addFolder(collection, index)"
v-on:edit-folder="editFolder($event)"
v-on:edit-request="editRequest($event)"
></collection>
</li>
<li v-if="collections.length === 0">
<label>Collections are empty</label>
@@ -90,12 +80,12 @@ TODO:
</style>
<script>
import addCollection from "./addCollection";
import addFolder from "./addFolder";
import collection from './collection'
import editCollection from "./editCollection";
import editFolder from "./editFolder";
import editRequest from "./editRequest";
import addCollection from "./addCollection";
import addFolder from "./addFolder";
import collection from "./collection";
import editCollection from "./editCollection";
import editFolder from "./editFolder";
import editRequest from "./editRequest";
import importExportCollections from "./importExportCollections";
export default {
@@ -106,96 +96,90 @@ TODO:
editCollection,
editFolder,
editRequest,
importExportCollections,
importExportCollections
},
data() {
return {
showModalAdd : false,
showModalEdit : false,
showModalImportExport : false,
showModalAddFolder : false,
showModalEditFolder : false,
showModalEditRequest : false,
editingCollection : undefined,
editingCollectionIndex : undefined,
editingFolder : undefined,
editingFolderIndex : undefined,
editingRequest : undefined,
editingRequestIndex : undefined,
}
showModalAdd: false,
showModalEdit: false,
showModalImportExport: false,
showModalAddFolder: false,
showModalEditFolder: false,
showModalEditRequest: false,
editingCollection: undefined,
editingCollectionIndex: undefined,
editingFolder: undefined,
editingFolderIndex: undefined,
editingRequest: undefined,
editingRequestIndex: undefined
};
},
computed: {
collections () {
return this.$store.state.postwoman.collections
collections() {
return this.$store.state.postwoman.collections;
}
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
this.showModalAdd = shouldDisplay;
},
displayModalEdit(shouldDisplay) {
this.showModalEdit = shouldDisplay
this.showModalEdit = shouldDisplay;
if (!shouldDisplay)
this.resetSelectedData()
if (!shouldDisplay) this.resetSelectedData();
},
displayModalImportExport(shouldDisplay) {
this.showModalImportExport = shouldDisplay
this.showModalImportExport = shouldDisplay;
},
displayModalAddFolder(shouldDisplay) {
this.showModalAddFolder = shouldDisplay
this.showModalAddFolder = shouldDisplay;
if (!shouldDisplay)
this.resetSelectedData()
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditFolder(shouldDisplay) {
this.showModalEditFolder = shouldDisplay
this.showModalEditFolder = shouldDisplay;
if (!shouldDisplay)
this.resetSelectedData()
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditRequest(shouldDisplay) {
this.showModalEditRequest = shouldDisplay
this.showModalEditRequest = shouldDisplay;
if (!shouldDisplay)
this.resetSelectedData()
if (!shouldDisplay) this.resetSelectedData();
},
editCollection(collection, collectionIndex) {
this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex
this.displayModalEdit(true)
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalEdit(true);
},
addFolder(collection, collectionIndex) {
this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex
this.displayModalAddFolder(true)
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalAddFolder(true);
},
editFolder(payload) {
const { collectionIndex, folder, folderIndex } = payload
this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolder = folder
this.$data.editingFolderIndex = folderIndex
this.displayModalEditFolder(true)
const { collectionIndex, folder, folderIndex } = payload;
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolder = folder;
this.$data.editingFolderIndex = folderIndex;
this.displayModalEditFolder(true);
},
editRequest(payload) {
const { request, collectionIndex, folderIndex, requestIndex } = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolderIndex = folderIndex
this.$data.editingRequest = request
this.$data.editingRequestIndex = requestIndex
this.displayModalEditRequest(true)
const { request, collectionIndex, folderIndex, requestIndex } = payload;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolderIndex = folderIndex;
this.$data.editingRequest = request;
this.$data.editingRequestIndex = requestIndex;
this.displayModalEditRequest(true);
},
resetSelectedData() {
this.$data.editingCollection = undefined
this.$data.editingCollectionIndex = undefined
this.$data.editingFolder = undefined
this.$data.editingFolderIndex = undefined
this.$data.editingRequest = undefined
this.$data.editingRequestIndex = undefined
},
},
}
this.$data.editingCollection = undefined;
this.$data.editingCollectionIndex = undefined;
this.$data.editingFolder = undefined;
this.$data.editingFolderIndex = undefined;
this.$data.editingRequest = undefined;
this.$data.editingRequestIndex = undefined;
}
}
};
</script>

84
components/collections/request.vue
View File

@@ -1,55 +1,55 @@
<template>
<div class="flex-wrap">
<div>
<button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
<i class="material-icons">insert_drive_file</i>
<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'">
<i class="material-icons">edit</i>
</button>
</div>
<div class="flex-wrap">
<div>
<button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
<i class="material-icons">insert_drive_file</i>
<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'">
<i class="material-icons">edit</i>
</button>
</div>
</div>
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
export default {
export default {
props: {
request : Object,
collectionIndex : Number,
folderIndex : Number,
requestIndex : Number,
request: Object,
collectionIndex: Number,
folderIndex: Number,
requestIndex: Number
},
methods: {
selectRequest() {
this.$store.commit('postwoman/selectRequest', { request: this.request });
},
removeRequest() {
if (!confirm("Are you sure you want to remove this request?")) return;
this.$store.commit('postwoman/removeRequest', {
collectionIndex : this.collectionIndex,
folderIndex : this.folderIndex,
requestIndex : this.requestIndex,
});
},
},
};
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request });
},
removeRequest() {
if (!confirm("Are you sure you want to remove this request?")) return;
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
requestIndex: this.requestIndex
});
}
}
};
</script>

260
components/collections/saveRequestAs.vue
View File

@@ -1,158 +1,154 @@
<template>
<div>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Save Request As</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Save Request As</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
<select type="text" v-model="requestData.collectionIndex" >
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key = "index"
:value = "index">
{{ collection.name }}
</option>
</select>
<select type="text" v-model="requestData.folderIndex" >
<option
:key = "undefined"
:value = "undefined">
</option>
<option
v-for="(folder, index) in folders"
:key = "index"
:value = "index">
{{ folder.name }}
</option>
</select>
<select type="text" v-model="requestData.requestIndex" >
<option
:key = "undefined"
:value = "undefined">
</option>
<option
v-for ="(folder, index) in requests"
:key = "index"
:value = "index">
{{ folder.name }}
</option>
</select>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequestAs">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
<select type="text" v-model="requestData.collectionIndex">
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option>
</select>
<select type="text" v-model="requestData.folderIndex">
<option :key="undefined" :value="undefined"></option>
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
</select>
<select type="text" v-model="requestData.requestIndex">
<option :key="undefined" :value="undefined"></option>
<option
v-for="(folder, index) in requests"
:key="index"
:value="index"
>{{ folder.name }}</option>
</select>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequestAs">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show : Boolean,
editingRequest : Object,
show: Boolean,
editingRequest: Object
},
components: {
modal,
modal
},
data() {
return {
defaultRequestName : 'My New Request',
requestData : {
name : undefined,
collectionIndex : undefined,
folderIndex : undefined,
requestIndex : undefined,
},
return {
defaultRequestName: "My New Request",
requestData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined,
requestIndex: undefined
}
};
},
watch: {
'requestData.collectionIndex': function resetFolderAndRequestIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestData.folderIndex = undefined
this.$data.requestData.requestIndex = undefined
},
'requestData.folderIndex': function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined
},
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestData.folderIndex = undefined;
this.$data.requestData.requestIndex = undefined;
},
"requestData.folderIndex": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined;
}
},
computed: {
folders() {
const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
if (!userSelectedAnyCollection) return []
folders() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
return this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex].folders
},
requests() {
const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
if (!userSelectedAnyCollection) return []
return this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
].folders;
},
requests() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
const userSelectedAnyFolder = this.$data.requestData.folderIndex !== undefined
if (userSelectedAnyFolder) {
const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
const folder = collection.folders[this.$data.requestData.folderIndex]
const requests = folder.requests
return requests
}
else {
const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
const requests = collection.requests
return requests
}
const userSelectedAnyFolder =
this.$data.requestData.folderIndex !== undefined;
if (userSelectedAnyFolder) {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
];
const folder = collection.folders[this.$data.requestData.folderIndex];
const requests = folder.requests;
return requests;
} else {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
];
const requests = collection.requests;
return requests;
}
}
},
methods: {
saveRequestAs() {
const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
if (userDidntSpecifyCollection) {
this.$toast.error('please, specify collection first', { icon: 'error' })
return
}
saveRequestAs() {
const userDidntSpecifyCollection =
this.$data.requestData.collectionIndex === undefined;
if (userDidntSpecifyCollection) {
this.$toast.error("please, specify collection first", {
icon: "error"
});
return;
}
const requestUpdated = {
...this.$props.editingRequest,
name : this.$data.requestData.name || this.$data.defaultRequestName,
collection : this.$data.requestData.collectionIndex,
}
const requestUpdated = {
...this.$props.editingRequest,
name: this.$data.requestData.name || this.$data.defaultRequestName,
collection: this.$data.requestData.collectionIndex
};
this.$store.commit('postwoman/saveRequestAs', {
request : requestUpdated,
collectionIndex : this.$data.requestData.collectionIndex,
folderIndex : this.$data.requestData.folderIndex,
requestIndex : this.$data.requestData.requestIndex,
});
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.$data.requestData.collectionIndex,
folderIndex: this.$data.requestData.folderIndex,
requestIndex: this.$data.requestData.requestIndex
});
this.hideModal();
},
hideModal() {
this.$emit('hide-modal');
this.$emit('hide-model'); // for backward compatibility // TODO: use fixed event
},
},
};
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
this.$emit("hide-model"); // for backward compatibility // TODO: use fixed event
}
}
};
</script>

254
components/history.vue
View File

@@ -2,52 +2,107 @@
<pw-section class="green" icon="history" label="History">
<ul>
<li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">
<input
aria-label="Search"
type="text"
placeholder="search history"
:readonly="history.length === 0"
v-model="filterText"
/>
</li>
</ul>
<ul>
<li @click="sort_by_label()">
<label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Label
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_time()">
<label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Time
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_status_code()">
<label for="" class="flex-wrap">Status<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Status
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_url()">
<label for="" class="flex-wrap">URL<i class="material-icons">sort</i></label>
<label class="flex-wrap">
URL
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_path()">
<label for="" class="flex-wrap">Path<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Path
<i class="material-icons">unfold_more</i>
</label>
</li>
</ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
<virtual-list
class="virtual-list"
:class="{filled: filteredHistory.length}"
:size="54"
:remain="Math.min(5, filteredHistory.length)"
>
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<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" :title="entry.date">
<input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date" />
</li>
<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>
<li>
<input aria-label="URL" type="text" readonly :value="entry.url">
<input aria-label="URL" type="text" readonly :value="entry.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 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>
@@ -56,7 +111,7 @@
</virtual-list>
<ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
<li>
<label>Nothing found for "{{filterText}}"</label>
<label>Nothing found "{{filterText}}"</label>
</li>
</ul>
<ul v-if="history.length === 0">
@@ -66,7 +121,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>
@@ -75,36 +135,52 @@
<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>
</ul>
</pw-section>
</template>
<script>
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));
<style scoped lang="scss">
.virtual-list {
[readonly] {
cursor: default;
}
}
.flex-wrap {
cursor: pointer;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 200px;
}
}
</style>
<script>
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,
"pw-section": section,
VirtualList
},
data() {
const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
const localStorageHistory = JSON.parse(
window.localStorage.getItem("history")
);
return {
history: localStorageHistory || [],
filterText: '',
filterText: "",
showFilter: false,
isClearingHistory: false,
reverse_sort_label: false,
@@ -112,7 +188,7 @@
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false
}
};
},
computed: {
filteredHistory() {
@@ -120,7 +196,7 @@
const filterText = this.filterText.toLowerCase();
return Object.keys(entry).some(key => {
let value = entry[key];
value = typeof value !== 'string' ? value.toString() : value;
value = typeof value !== "string" ? value.toString() : value;
return value.toLowerCase().includes(filterText);
});
});
@@ -129,35 +205,37 @@
methods: {
clearHistory() {
this.history = [];
this.filterText = '';
this.filterText = "";
this.disableHistoryClearing();
updateOnLocalStorage('history', this.history);
this.$toast.error('History Deleted', {
icon: 'delete'
updateOnLocalStorage("history", this.history);
this.$toast.error("History Deleted", {
icon: "delete"
});
},
useHistory(entry) {
this.$emit('useHistory', entry);
this.$emit("useHistory", entry);
},
findEntryStatus(entry) {
const foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {
className: ''
};
return (
foundStatusGroup || {
className: ""
}
);
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1);
if (this.history.length === 0) {
this.filterText = '';
this.filterText = "";
}
updateOnLocalStorage('history', this.history);
this.$toast.error('Deleted', {
icon: 'delete'
updateOnLocalStorage("history", this.history);
this.$toast.error("Deleted", {
icon: "delete"
});
},
addEntry(entry) {
this.history.push(entry);
updateOnLocalStorage('history', this.history);
updateOnLocalStorage("history", this.history);
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return;
@@ -168,80 +246,72 @@
},
sort_by_time() {
let byDate = this.history.slice(0);
byDate.sort((a,b) =>{
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;
})
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;
})
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)
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;
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)
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;
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)
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;
else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
});
this.history = byPath;
this.reverse_sort_path = !this.reverse_sort_path;
}
}
}
};
</script>
<style scoped lang="scss">
.virtual-list {
[readonly] {
cursor: default;
}
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 200px;
}
}
</style>

33
components/logo.vue
View File

@@ -1,11 +1,34 @@
<template>
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612.001 612.001" style="enable-background:new 0 0 612.001 612.001;" xml:space="preserve">
<svg
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 612.001 612.001"
style="enable-background:new 0 0 612.001 612.001;"
xml:space="preserve"
>
<defs id="defs11" />
<g id="g3826" transform="translate(-516.40798,-163.88978)">
<circle :fill="color" transform="scale(1,-1)" style="stroke-width:1.19531453" r="178.70923" cy="-501.55591" cx="822.40845" id="circle3814" />
<circle
:fill="color"
transform="scale(1,-1)"
style="stroke-width:1.19531453"
r="178.70923"
cy="-501.55591"
cx="822.40845"
id="circle3814"
/>
<g id="g3820" transform="translate(516.40798,163.89028)">
<g id="g3818">
<path :fill="color" id="path3816" data-old_color="#121212" class="active-path" data-original="#121212" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" />
<path
:fill="color"
id="path3816"
data-old_color="#121212"
class="active-path"
data-original="#121212"
d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
/>
</g>
</g>
</g>
@@ -24,9 +47,9 @@
<script>
export default {
props: {
'color': {
color: {
type: String
}
}
}
};
</script>

14
components/modal.vue
View File

@@ -53,13 +53,13 @@
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-fade-enter,
.modal-fade-leave-active {

67
components/section.vue
View File

@@ -1,6 +1,11 @@
<template>
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
<legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
<legend @click.prevent="collapse">
<i class="material-icons icon">{{ icon }}</i>
<span>{{ label }}</span>
<i class="material-icons" v-if="isCollapsed">expand_more</i>
<i class="material-icons" v-if="!isCollapsed">expand_less</i>
</legend>
<div class="collapsible" :class="{ hidden: collapsed }">
<slot />
</div>
@@ -17,39 +22,39 @@
</style>
<script>
export default {
computed: {
noFrameColors() {
return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
export default {
computed: {
noFrameColors() {
return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
}
},
},
data() {
return {
isCollapsed: false
}
},
props: {
label: {
type: String,
default: "Section"
data() {
return {
isCollapsed: false
};
},
icon: {
type: String,
default: "lens"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
props: {
label: {
type: String,
default: "Section"
},
icon: {
type: String,
default: "lens"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
}
}
}
};
};
</script>

16
components/toggle.vue
View File

@@ -4,7 +4,7 @@
<span class="handle"></span>
</label>
<label class="caption">
<slot/>
<slot />
</label>
</div>
</template>
@@ -59,8 +59,8 @@
margin: $handleSpacing;
background-color: $inactiveHandleColor;
width: #{ $height - ($handleSpacing * 2) };
height: #{ $height - ($handleSpacing * 2) };
width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)};
border-radius: 100px;
pointer-events: none;
@@ -77,14 +77,12 @@
}
}
}
</style>
<script>
export default {
props: {
'on': {
on: {
type: Boolean,
default: false
}
@@ -93,10 +91,8 @@
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on");
this.$emit('change', containsOnClass);
this.$emit("change", containsOnClass);
}
}
}
};
</script>

10
directives/textareaAutoHeight.js
View File

@@ -1,8 +1,8 @@
export default {
name: "textareaAutoHeight",
update(element) {
if (element.scrollHeight !== element.clientHeight) {
element.style.minHeight = `${element.scrollHeight}px`;
name: "textareaAutoHeight",
update(element) {
if (element.scrollHeight !== element.clientHeight) {
element.style.minHeight = `${element.scrollHeight}px`;
}
}
}
}

105
layouts/default.vue
View File

@@ -4,7 +4,9 @@
<div>
<div class="slide-in">
<nuxt-link to="/">
<h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"></logo>Postwoman</h1>
<h1 class="logo">
<logo alt style="height: 24px; margin-right: 16px"></logo>Postwoman
</h1>
</nuxt-link>
<h3>API request builder</h3>
</div>
@@ -12,13 +14,20 @@
<!--
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('/')">HTTP</nuxt-link>
<nuxt-link to="/websocket" :class="linkActive('/websocket')">WebSocket</nuxt-link>
<nuxt-link to="/settings" :class="linkActive('/settings')" v-tooltip="'Settings'" aria-label="Settings">
<nuxt-link
to="/settings"
:class="linkActive('/settings')"
v-tooltip="'Settings'"
aria-label="Settings"
>
<!-- Settings cog -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
<path
d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"
/>
</svg>
</nuxt-link>
</nav>
@@ -30,7 +39,7 @@
<div class="flex-wrap">
<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()">
<img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()" />
<span>GitHub</span>
</button>
</a>
@@ -38,9 +47,14 @@
<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');">
<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"/>
<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>
@@ -48,17 +62,29 @@
<!-- Bottom section of footer: version/author information -->
<p class="align-center">
<span v-if="version.name">
<a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank" rel="noopener">{{version.name}}</a>
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
target="_blank"
rel="noopener"
>{{version.name}}</a>
<span v-if="version.hash">
- <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank" rel="noopener">{{version.hash}}</a>
-
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
target="_blank"
rel="noopener"
>{{version.hash}}</a>
</span>
<span v-if="version.variant"> ({{version.variant}})</span>
<span v-if="version.variant">({{version.variant}})</span>
&#x2022;
</span> by <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">Liyas Thomas 🦄</a> &#x2022; <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
</span> by
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener">Liyas Thomas 🦄</a> &#x2022;
<a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
</p>
</footer>
</div>
</template>
<style lang="scss">
.slide-in {
position: relative;
@@ -106,7 +132,7 @@
&:before {
width: 100%;
height: 100%
height: 100%;
}
}
@@ -139,12 +165,12 @@
}
}
}
</style>
<script>
import intializePwa from '../assets/js/pwa';
import intializePwa from "../assets/js/pwa";
import logo from "../components/logo";
import * as version from '../.postwoman/version.json';
import * as version from "../.postwoman/version.json";
export default {
components: {
@@ -152,10 +178,10 @@
},
methods: {
linkActive (path) {
linkActive(path) {
return {
'nuxt-link-exact-active': this.$route.path === path,
'nuxt-link-active': this.$route.path === path
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path
};
}
},
@@ -167,11 +193,15 @@
// prompt.
showInstallPrompt: null,
logoStyle() {
return (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
return (
this.$store.state.postwoman.settings.THEME_CLASS || ""
).includes("light")
? " filter: invert(100%); -webkit-filter: invert(100%);"
: "";
},
version: {}
}
};
},
beforeMount() {
@@ -181,36 +211,40 @@
// Load theme settings
(() => {
// Apply theme from settings.
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
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 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');
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');
if (process.client) {
document.body.classList.add("afterLoad");
}
// 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',
let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
if (!cookiesAllowed) {
this.$toast.show("We use cookies", {
icon: "info",
duration: 5000,
theme: 'toasted-primary',
theme: "toasted-primary",
action: [
{
text: 'Dismiss',
text: "Dismiss",
onClick: (e, toastObject) => {
localStorage.setItem('cookiesAllowed', 'yes');
localStorage.setItem("cookiesAllowed", "yes");
toastObject.goAway(0);
}
}
@@ -221,10 +255,9 @@
},
watch: {
$route () {
$route() {
this.$toast.clear();
}
}
}
};
</script>

40
layouts/error.vue
View File

@@ -1,10 +1,16 @@
<template>
<div class="page page-error">
<img src="~static/icons/error.svg" alt="Error" class="error_banner">
<img src="~static/icons/error.svg" alt="Error" class="error_banner" />
<h2>{{ error.statusCode }}</h2>
<h3>{{ error.message }}</h3>
<p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
<p><a href="" @click.prevent="reloadApplication">Reload</a></p>
<p>
<nuxt-link to="/">
<button>Go Home</button>
</nuxt-link>
</p>
<p>
<a href @click.prevent="reloadApplication">Reload</a>
</p>
</div>
</template>
@@ -25,20 +31,20 @@
<script>
export default {
props: ['error'],
props: ["error"],
methods: {
reloadApplication () {
this.$router.push('/', () => window.location.reload());
}
},
head () {
return {
bodyAttrs: {
class: 'sticky-footer'
}
}
methods: {
reloadApplication() {
this.$router.push("/", () => window.location.reload());
}
}
},
head() {
return {
bodyAttrs: {
class: "sticky-footer"
}
};
}
};
</script>

9
middleware/parsedefaulturl.js
View File

@@ -1,5 +1,8 @@
export default function({ route, redirect }) {
if(route.fullPath !== '/') {
export default function ({
route,
redirect
}) {
if (route.fullPath !== '/') {
return redirect('/');
}
}
}

1965
pages/index.vue
View File

File diff suppressed because it is too large Load Diff

190
pages/settings.vue
View File

@@ -6,7 +6,12 @@
<h3 class="title">Background</h3>
<div class="backgrounds">
<span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
<swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
<swatch
:active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }"
:color="theme.color"
:name="theme.name"
></swatch>
</span>
</div>
</li>
@@ -15,8 +20,17 @@
<li>
<h3 class="title">Color</h3>
<div class="colors">
<span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
<span
:key="entry.color"
@click.prevent="setActiveColor(entry.color, entry.vibrant)"
v-for="entry in colors"
>
<swatch
:active="settings.THEME_COLOR === entry.color.toUpperCase()"
:class="{ vibrant: entry.vibrant }"
:color="entry.color"
:name="entry.name"
/>
</span>
</div>
</li>
@@ -25,21 +39,23 @@
<li>
<h3 class="title">Frames</h3>
<span>
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="applySetting('DISABLE_FRAME_COLORS', $event)">
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}
</pw-toggle>
<pw-toggle
:on="!settings.DISABLE_FRAME_COLORS"
@change="applySetting('DISABLE_FRAME_COLORS', $event)"
>Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}</pw-toggle>
</span>
</li>
</ul>
</pw-section>
<pw-section class="blue" icon="public" label="Proxy">
<ul>
<li>
<pw-toggle :on="settings.PROXY_ENABLED" @change="applySetting('PROXY_ENABLED', $event)">
Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
</pw-toggle>
</li>
</ul>
<pw-section class="blue" icon="public" label="Proxy">
<ul>
<li>
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="applySetting('PROXY_ENABLED', $event)"
>Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
</li>
</ul>
<!--
PROXY SETTINGS URL AND KEY
--------------
@@ -55,10 +71,10 @@
</li>
</ul>
-->
</pw-section>
</pw-section>
</div>
</template>
<script>
import section from "../components/section";
import swatch from "../components/settings/swatch";
@@ -66,9 +82,9 @@
export default {
components: {
'pw-section': section,
'pw-toggle': toggle,
'swatch': swatch
"pw-section": section,
"pw-toggle": toggle,
swatch: swatch
},
data() {
@@ -78,128 +94,137 @@
// set the relevant values.
themes: [
{
"color": "rgb(37, 38, 40)",
"name": "Kinda Dark",
"class": ""
color: "rgb(37, 38, 40)",
name: "Kinda Dark",
class: ""
},
{
"color": "#ffffff",
"name": "Clearly White",
"vibrant": true,
"class": "light"
color: "#ffffff",
name: "Clearly White",
vibrant: true,
class: "light"
},
{
"color": "#000000",
"name": "Just Black",
"class": "black"
color: "#000000",
name: "Just Black",
class: "black"
},
{
"color": "var(--bg-color)",
"name": "Auto (system)",
"vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
"class": "auto"
color: "var(--bg-color)",
name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto"
}
],
// You can define a new color here! It will simply store the color value.
colors: [
// If the color is vibrant, black is used as the active foreground color.
{
"color": "#50fa7b",
"name": "Green",
"vibrant": true
color: "#50fa7b",
name: "Green",
vibrant: true
},
{
"color": "#f1fa8c",
"name": "Yellow",
"vibrant": true
color: "#f1fa8c",
name: "Yellow",
vibrant: true
},
{
"color": "#ff79c6",
"name": "Pink",
"vibrant": true
color: "#ff79c6",
name: "Pink",
vibrant: true
},
{
"color": "#ff5555",
"name": "Red",
"vibrant": false
color: "#ff5555",
name: "Red",
vibrant: false
},
{
"color": "#bd93f9",
"name": "Purple",
"vibrant": true
color: "#bd93f9",
name: "Purple",
vibrant: true
},
{
"color": "#ffb86c",
"name": "Orange",
"vibrant": true
color: "#ffb86c",
name: "Orange",
vibrant: true
},
{
"color": "#8be9fd",
"name": "Cyan",
"vibrant": true
color: "#8be9fd",
name: "Cyan",
vibrant: true
},
{
"color": "#57b5f9",
"name": "Blue",
"vibrant": false
},
color: "#57b5f9",
name: "Blue",
vibrant: false
}
],
settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '',
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
THEME_COLOR: "",
THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
DISABLE_FRAME_COLORS:
this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED:
this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
}
}
};
},
watch: {
proxySettings: {
deep: true,
handler(value) {
this.applySetting('PROXY_URL', value.url);
this.applySetting('PROXY_KEY', value.key);
this.applySetting("PROXY_URL", value.url);
this.applySetting("PROXY_KEY", value.key);
}
}
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
this.applySetting("THEME_CLASS", name);
document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style['filter'] = "";
imgGitHub.style['webkit-filter'] = "invert(100%)";
imgGitHub.style["filter"] = "";
imgGitHub.style["webkit-filter"] = "invert(100%)";
if (name.includes("light")) {
imgGitHub.style['filter'] = "invert(100%)";
imgGitHub.style['webkit-filter'] = "invert(100%)";
imgGitHub.style["filter"] = "invert(100%)";
imgGitHub.style["webkit-filter"] = "invert(100%)";
}
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
);
this.applySetting("THEME_COLOR", color.toUpperCase());
this.applySetting("THEME_COLOR_VIBRANT", vibrant);
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
const strip = str => str.replace(/#/g, "").replace(/ /g, "");
return `#${strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--ac-color")
).toUpperCase()}`;
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]);
this.$store.commit("postwoman/applySetting", [key, value]);
},
toggleSetting(key) {
this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
}
},
beforeMount() {
@@ -211,9 +236,8 @@
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
};
}
}
}
};
</script>

165
pages/websocket.vue
View File

@@ -4,7 +4,13 @@
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
<input
id="url"
type="url"
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
@@ -18,13 +24,23 @@
</li>
</ul>
</pw-section>
<pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
<pw-section
class="purple"
icon="cloud_download"
label="Communication"
id="response"
ref="response"
>
<ul>
<li>
<label for="log">Log</label>
<div id="log" name="log" class="log">
<span v-if="communication.log">
<span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
<span
v-for="(logEntry, index) in communication.log"
:style="{ color: logEntry.color }"
:key="index"
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span>
<span v-else>(waiting for connection)</span>
</div>
@@ -33,7 +49,14 @@
<ul>
<li>
<label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
<input
id="message"
name="message"
type="text"
v-model="communication.input"
:readonly="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null"
/>
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
@@ -62,7 +85,7 @@
&,
span {
font-size: 18px;
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
}
span {
@@ -70,13 +93,13 @@
white-space: pre-wrap;
}
}
</style>
<script>
import section from "../components/section";
export default {
components: {
'pw-section': section
"pw-section": section
},
data() {
return {
@@ -87,19 +110,22 @@
log: null,
input: ""
}
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() {
const pattern = new RegExp('^(wss?:\\/\\/)?' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$', 'i');
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.url);
}
},
@@ -111,51 +137,55 @@
else return this.disconnect();
},
connect() {
this.communication.log = [{
payload: `Connecting to ${this.url}...`,
source: 'info',
color: 'var(--ac-color)'
}];
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: "info",
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [{
payload: `Connected to ${this.url}.`,
source: 'info',
color: 'var(--ac-color)',
ts: (new Date()).toLocaleTimeString()
}];
this.$toast.success('Connected', {
icon: 'sync'
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = (event) => {
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = (event) => {
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error('Disconnected', {
icon: 'sync_disabled'
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
this.socket.onmessage = (event) => {
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: 'server',
ts: (new Date()).toLocaleTimeString()
source: "server",
ts: new Date().toLocaleTimeString()
});
}
};
} catch (ex) {
this.handleError(ex);
this.$toast.error('Something went wrong!', {
icon: 'error'
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
@@ -167,52 +197,51 @@
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
});
if (error != null) this.communication.log.push({
payload: error,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
if (error != null)
this.communication.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: 'client',
ts: (new Date()).toLocaleTimeString()
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({
target
}) {
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle('hidden');
document.getElementsByClassName(el)[0].classList.toggle("hidden");
},
getSourcePrefix(source) {
const sourceEmojis = {
// Source used for info messages.
'info': '\tℹ️ [INFO]:\t',
info: "\tℹ️ [INFO]:\t",
// Source used for client to server messages.
'client': '\t👽 [SENT]:\t',
client: "\t👽 [SENT]:\t",
// Source used for server to client messages.
'server': '\t📥 [RECEIVED]:\t'
server: "\t📥 [RECEIVED]:\t"
};
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return '';
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
}
},
updated: function () {
this.$nextTick(function () {
var divLog = document.getElementById("log")
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
}
};
</script>

8
plugins/vuex-persist.js
View File

@@ -1,5 +1,7 @@
import VuexPersistence from "vuex-persist";
export default ({ store }) => {
new VuexPersistence().plugin(store);
}
export default ({
store
}) => {
new VuexPersistence().plugin(store);
}

20
proxy/index.js
View File

@@ -13,7 +13,13 @@ app.use((req, res, next) => {
});
app.post('/', async (req, res) => {
const {method, url, auth, headers, data} = req.body;
const {
method,
url,
auth,
headers,
data
} = req.body;
try {
const payload = await axios({
@@ -25,14 +31,14 @@ app.post('/', async (req, res) => {
});
return await res.json({
data: payload.data,
status: payload.status,
statusText: payload.statusText,
headers: payload.headers,
data: payload.data,
status: payload.status,
statusText: payload.statusText,
headers: payload.headers,
});
} catch(error) {
if(error.response) {
} catch (error) {
if (error.response) {
const errorResponse = error.response;
return await res.json({
data: errorResponse.data,

2
store/index.js
View File

@@ -1,3 +1,3 @@
export default {
}
}

407
store/postwoman.js
View File

@@ -1,241 +1,262 @@
import Vue from 'vue'
export const SETTINGS_KEYS = [
/**
* The CSS class that should be applied to the root element.
* Essentially, the name of the background theme.
*/
"THEME_CLASS",
/**
* The CSS class that should be applied to the root element.
* Essentially, the name of the background theme.
*/
"THEME_CLASS",
/**
* The hex color code for the currently active theme.
*/
"THEME_COLOR",
/**
* The hex color code for the currently active theme.
*/
"THEME_COLOR",
/**
* Whether or not THEME_COLOR is considered 'vibrant'.
*
* For readability reasons, if the THEME_COLOR is vibrant,
* any text placed on the theme color will have its color
* inverted from white to black.
*/
"THEME_COLOR_VIBRANT",
/**
* Whether or not THEME_COLOR is considered 'vibrant'.
*
* For readability reasons, if the THEME_COLOR is vibrant,
* any text placed on the theme color will have its color
* inverted from white to black.
*/
"THEME_COLOR_VIBRANT",
/**
* Normally, section frames are multicolored in the UI
* to emphasise the different sections.
* This setting allows that to be turned off.
*/
"DISABLE_FRAME_COLORS",
/**
* Normally, section frames are multicolored in the UI
* to emphasise the different sections.
* This setting allows that to be turned off.
*/
"DISABLE_FRAME_COLORS",
/**
* Whether or not requests should be proxied.
*/
"PROXY_ENABLED",
/**
* Whether or not requests should be proxied.
*/
"PROXY_ENABLED",
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL",
/**
* The security key of the proxy.
*/
"PROXY_KEY"
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL",
/**
* The security key of the proxy.
*/
"PROXY_KEY"
];
export const state = () => ({
settings : {},
collections : [{
name : 'My First Collection',
folders : [],
requests : [],
}],
selectedRequest : {},
editingRequest : {},
settings: {},
collections: [{
name: 'My First Collection',
folders: [],
requests: [],
}],
selectedRequest: {},
editingRequest: {},
});
export const mutations = {
applySetting (state, setting) {
if (setting == null || !(setting instanceof Array) || setting.length !== 2)
throw new Error("You must provide a setting (array in the form [key, value])");
applySetting(state, setting) {
if (setting == null || !(setting instanceof Array) || setting.length !== 2)
throw new Error("You must provide a setting (array in the form [key, value])");
const [key, value] = setting;
// Do not just remove this check.
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
const [key, value] = setting;
// Do not just remove this check.
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
state.settings[key] = value;
},
state.settings[key] = value;
},
replaceCollections (state, collections) {
state.collections = collections;
},
replaceCollections(state, collections) {
state.collections = collections;
},
importCollections (state, collections) {
state.collections = [...state.collections, ...collections];
importCollections(state, collections) {
state.collections = [...state.collections, ...collections];
let index = 0;
for (let collection of collections) {
collection.collectionIndex = index;
index += 1;
}
},
let index = 0;
for (let collection of collections) {
collection.collectionIndex = index;
index += 1;
}
},
addNewCollection (state, collection) {
state.collections.push({
name : '',
folders : [],
requests : [],
...collection,
})
},
addNewCollection(state, collection) {
state.collections.push({
name: '',
folders: [],
requests: [],
...collection,
})
},
removeCollection (state, payload) {
const { collectionIndex } = payload;
state.collections.splice(collectionIndex, 1)
},
removeCollection(state, payload) {
const {
collectionIndex
} = payload;
state.collections.splice(collectionIndex, 1)
},
editCollection (state, payload) {
const { collection, collectionIndex } = payload
state.collections[collectionIndex] = collection
},
editCollection(state, payload) {
const {
collection,
collectionIndex
} = payload
state.collections[collectionIndex] = collection
},
addNewFolder (state, payload) {
const { collectionIndex, folder } = payload;
state.collections[collectionIndex].folders.push({
name : '',
requests : [],
...folder,
});
},
addNewFolder(state, payload) {
const {
collectionIndex,
folder
} = payload;
state.collections[collectionIndex].folders.push({
name: '',
requests: [],
...folder,
});
},
editFolder (state, payload) {
const { collectionIndex, folder, folderIndex } = payload;
Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
},
editFolder(state, payload) {
const {
collectionIndex,
folder,
folderIndex
} = payload;
Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
},
removeFolder (state, payload) {
const { collectionIndex, folderIndex } = payload;
state.collections[collectionIndex].folders.splice(folderIndex, 1)
},
removeFolder(state, payload) {
const {
collectionIndex,
folderIndex
} = payload;
state.collections[collectionIndex].folders.splice(folderIndex, 1)
},
addRequest (state, payload) {
const { request } = payload;
addRequest(state, payload) {
const {
request
} = payload;
// Request that is directly attached to collection
if (request.folder === -1) {
state.collections[request.collection].requests.push(request);
return
}
// Request that is directly attached to collection
if (request.folder === -1) {
state.collections[request.collection].requests.push(request);
return
}
state.collections[request.collection].folders[request.folder].requests.push(request);
},
state.collections[request.collection].folders[request.folder].requests.push(request);
},
editRequest (state, payload) {
const {
requestOld,
requestOldCollectionIndex,
requestOldFolderIndex,
requestOldIndex,
requestNew,
requestNewCollectionIndex,
requestNewFolderIndex,
} = payload
editRequest(state, payload) {
const {
requestOld,
requestOldCollectionIndex,
requestOldFolderIndex,
requestOldIndex,
requestNew,
requestNewCollectionIndex,
requestNewFolderIndex,
} = payload
const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
const changedPlace = changedCollection || changedFolder
const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
const changedPlace = changedCollection || changedFolder
// set new request
if (requestNewFolderIndex !== undefined)
Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
else
Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
// set new request
if (requestNewFolderIndex !== undefined)
Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
else
Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
// remove old request
if (changedPlace) {
if (requestOldFolderIndex !== undefined)
state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
else
state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
}
},
// remove old request
if (changedPlace) {
if (requestOldFolderIndex !== undefined)
state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
else
state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
}
},
saveRequestAs (state, payload) {
const {
request,
collectionIndex,
folderIndex,
requestIndex,
} = payload
saveRequestAs(state, payload) {
const {
request,
collectionIndex,
folderIndex,
requestIndex,
} = payload
const specifiedCollection = collectionIndex !== undefined
const specifiedFolder = folderIndex !== undefined
const specifiedRequest = requestIndex !== undefined
const specifiedCollection = collectionIndex !== undefined
const specifiedFolder = folderIndex !== undefined
const specifiedRequest = requestIndex !== undefined
if (specifiedCollection && specifiedFolder && specifiedRequest)
Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].folders[folderIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
}
else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
const requests = state.collections[collectionIndex].requests
Vue.set(requests,requestIndex, request)
}
else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
}
if (specifiedCollection && specifiedFolder && specifiedRequest)
Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].folders[folderIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
} else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
const requests = state.collections[collectionIndex].requests
Vue.set(requests, requestIndex, request)
} else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
}
},
},
saveRequest (state, payload) {
const { request } = payload;
saveRequest(state, payload) {
const {
request
} = payload;
// Remove the old request from collection
if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
if (folder > -1) {
state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
} else {
state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
}
} else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
}
// Remove the old request from collection
if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
if (folder > -1) {
state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
} else {
state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
}
} else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
}
delete request.oldCollection;
delete request.oldFolder;
delete request.oldCollection;
delete request.oldFolder;
// Request that is directly attached to collection
if (request.folder === -1) {
Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
return
}
// Request that is directly attached to collection
if (request.folder === -1) {
Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
return
}
Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
},
Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
},
removeRequest (state, payload) {
const { collectionIndex, folderIndex, requestIndex } = payload;
removeRequest(state, payload) {
const {
collectionIndex,
folderIndex,
requestIndex
} = payload;
// Request that is directly attached to collection
if (folderIndex === -1) {
state.collections[collectionIndex].requests.splice(requestIndex, 1)
return
}
// Request that is directly attached to collection
if (folderIndex === -1) {
state.collections[collectionIndex].requests.splice(requestIndex, 1)
return
}
state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
},
state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
},
selectRequest (state, payload) {
state.selectedRequest = Object.assign({}, payload.request);
},
selectRequest(state, payload) {
state.selectedRequest = Object.assign({}, payload.request);
},
};