More toasts

This commit is contained in:
Liyas Thomas
2019-09-26 15:25:37 +05:30
parent 26326d8878
commit 75b69cad21
4 changed files with 74 additions and 28 deletions

View File

@@ -164,7 +164,7 @@ docker run -p 3000:3000 postwoman:latest
1. Find the built project in `./dist`. 1. Find the built project in `./dist`.
## Contributing ## Contributing 🍰
Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us. Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.

View File

@@ -1,29 +1,32 @@
<template> <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" /> <defs id="defs11" />
<g id="g3826" transform="translate(-516.40798,-163.88978)"> <g id="g3826" transform="translate(-516.40798,-163.88978)">
<circle 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="g3820" transform="translate(516.40798,163.89028)">
<g id="g3818"> <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> </g>
</g> </g>
</svg> </svg>
</template> </template>
<style> <style>
#path3816 { #circle3814 {
fill: var(--ac-color); fill: var(--bg-color);
} }
#path3816 {
fill: var(--ac-color);
}
</style> </style>
<script> <script>
export default { export default {
props: { props: {
'color': { 'color': {
type: String type: String
} }
}
} }
</script> }
</script>

View File

@@ -694,7 +694,11 @@
}, },
async sendRequest() { async sendRequest() {
if (!this.isValidURL) { if (!this.isValidURL) {
alert('Please check the formatting of the URL.'); this.$toast.error('URL is not formatted properly', {
icon: 'error',
position: 'bottom-center',
duration: 1000,
});
return; return;
} }
@@ -808,7 +812,7 @@
this.response.status = error.message; this.response.status = error.message;
this.response.body = "See JavaScript console (F12) for details."; this.response.body = "See JavaScript console (F12) for details.";
this.$toast.error('Something went wrong!', { this.$toast.error('Something went wrong!', {
icon: 'delete', icon: 'error',
position: 'bottom-center', position: 'bottom-center',
duration: 1000, duration: 1000,
}); });
@@ -907,28 +911,47 @@
text: `Postwoman • API request builder at ${time} on ${date}`, text: `Postwoman • API request builder at ${time} on ${date}`,
url: window.location.href url: window.location.href
}).then(() => { }).then(() => {
// console.log('Thanks for sharing!'); this.$toast.success('Thanks for sharing!', {
icon: 'share',
position: 'bottom-center',
duration: 1000,
});
}) })
.catch(console.error); .catch(console.error);
} else { } else {
this.$refs.copyRequest.innerHTML = this.copiedButton + '<span>Copied</span>'; this.$refs.copyRequest.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$toast.success('Copied to clipboard', {
icon: 'file_copy',
position: 'bottom-center',
duration: 1000,
});
var dummy = document.createElement('input'); var dummy = document.createElement('input');
document.body.appendChild(dummy); document.body.appendChild(dummy);
dummy.value = window.location.href; dummy.value = window.location.href;
dummy.select(); dummy.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(dummy); document.body.removeChild(dummy);
setTimeout(() => this.$refs.copyRequest.innerHTML = this.copyButton + '<span>Permalink</span>', 1500) setTimeout(() => this.$refs.copyRequest.innerHTML = this.copyButton + '<span>Permalink</span>', 1000)
} }
}, },
copyRequestCode() { copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.copiedButton + '<span>Copied</span>'; this.$refs.copyRequestCode.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$toast.success('Copied to clipboard', {
icon: 'file_copy',
position: 'bottom-center',
duration: 1000,
});
this.$refs.generatedCode.select(); this.$refs.generatedCode.select();
document.execCommand("copy"); document.execCommand("copy");
setTimeout(() => this.$refs.copyRequestCode.innerHTML = this.copyButton + '<span>Copy</span>', 1500) setTimeout(() => this.$refs.copyRequestCode.innerHTML = this.copyButton + '<span>Copy</span>', 1000)
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>'; this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$toast.success('Copied to clipboard', {
icon: 'file_copy',
position: 'bottom-center',
duration: 1000,
});
// Creates a textarea element // Creates a textarea element
var aux = document.createElement("textarea"); var aux = document.createElement("textarea");
var copy = this.responseType == 'application/json' ? JSON.stringify(this.response.body) : this.response.body; var copy = this.responseType == 'application/json' ? JSON.stringify(this.response.body) : this.response.body;
@@ -941,7 +964,7 @@
document.execCommand('copy'); document.execCommand('copy');
// Remove the input from the body // Remove the input from the body
document.body.removeChild(aux); document.body.removeChild(aux);
setTimeout(() => this.$refs.copyResponse.innerHTML = this.copyButton + '<span>Copy</span>', 1500) setTimeout(() => this.$refs.copyResponse.innerHTML = this.copyButton + '<span>Copy</span>', 1000)
}, },
togglePreview() { togglePreview() {
this.previewEnabled = !this.previewEnabled; this.previewEnabled = !this.previewEnabled;
@@ -1023,6 +1046,11 @@
this.showModal = false; this.showModal = false;
} catch (error) { } catch (error) {
this.showModal = false; this.showModal = false;
this.$toast.error('cURL is not formatted properly', {
icon: 'error',
position: 'bottom-center',
duration: 1000,
});
} }
}, },
toggleModal() { toggleModal() {

View File

@@ -130,6 +130,11 @@
color: 'var(--ac-color)', color: 'var(--ac-color)',
ts: (new Date()).toLocaleTimeString() ts: (new Date()).toLocaleTimeString()
}]; }];
this.$toast.success('Connected', {
icon: 'sync',
position: 'bottom-center',
duration: 1000,
});
}; };
this.socket.onerror = (event) => { this.socket.onerror = (event) => {
this.handleError(); this.handleError();
@@ -142,6 +147,11 @@
color: '#ff5555', color: '#ff5555',
ts: (new Date()).toLocaleTimeString() ts: (new Date()).toLocaleTimeString()
}); });
this.$toast.error('Disconnected', {
icon: 'sync_disabled',
position: 'bottom-center',
duration: 1000,
});
}; };
this.socket.onmessage = (event) => { this.socket.onmessage = (event) => {
this.communication.log.push({ this.communication.log.push({
@@ -152,6 +162,11 @@
} }
} catch (ex) { } catch (ex) {
this.handleError(ex); this.handleError(ex);
this.$toast.error('Something went wrong!', {
icon: 'error',
position: 'bottom-center',
duration: 1000,
});
} }
}, },
disconnect() { disconnect() {