Added response URL, Path, Method and timestamp to downloaded response file

This commit is contained in:
Liyas Thomas
2019-11-07 08:59:04 +05:30
parent dcf5c2a0d6
commit c388eddc67
2 changed files with 54 additions and 59 deletions

View File

@@ -40,18 +40,17 @@
</div> </div>
</pw-modal> </pw-modal>
<pw-section <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request" ref="preRequest">
v-if="showPreRequestScript"
class="orange"
label="Pre-Request"
ref="preRequest"
>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
<label for="generatedCode">JavaScript Code</label> <label for="generatedCode">JavaScript Code</label>
<div> <div>
<a href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts" target="_blank"> <a
href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="'Wiki'"> <button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help</i> <i class="material-icons">help</i>
</button> </button>
@@ -548,23 +547,35 @@
<div class="flex-wrap"> <div class="flex-wrap">
<label for="body">response</label> <label for="body">response</label>
<div> <div>
<button class="icon" @click="copyResponse" ref="copyResponse" v-if="response.body"> <button
class="icon"
@click="copyResponse"
ref="copyResponse"
v-if="response.body"
v-tooltip="'Copy response'"
>
<i class="material-icons">file_copy</i> <i class="material-icons">file_copy</i>
<span>Copy</span>
</button> </button>
<button class="icon" @click="downloadResponse" ref="downloadResponse" v-if="response.body"> <button
<i class="material-icons">cloud_download</i> class="icon"
<span>Download</span> @click="downloadResponse"
ref="downloadResponse"
v-if="response.body"
v-tooltip="'Download file'"
>
<i class="material-icons">get_app</i>
</button> </button>
</div> </div>
</div> </div>
<div id="response-details-wrapper"> <div id="response-details-wrapper">
<pre><code <pre>
<code
ref="responseBody" ref="responseBody"
id="body" id="body"
rows="16" rows="16"
placeholder="(waiting to send request)" placeholder="(waiting to send request)"
>{{response.body}}</code></pre> >{{response.body}}</code>
</pre>
<iframe <iframe
:class="{hidden: !previewEnabled}" :class="{hidden: !previewEnabled}"
class="covers-response" class="covers-response"
@@ -681,8 +692,8 @@ export default {
showPreRequestScript: false, showPreRequestScript: false,
preRequestScript: "", preRequestScript: "",
copyButton: '<i class="material-icons">file_copy</i>', copyButton: '<i class="material-icons">file_copy</i>',
copiedButton: '<i class="material-icons">done</i>', downloadButton: '<i class="material-icons">get_app</i>',
downloadedButton: '<i class="material-icons">cloud_done</i>', doneButton: '<i class="material-icons">done</i>',
isHidden: true, isHidden: true,
response: { response: {
status: "", status: "",
@@ -1486,7 +1497,7 @@ export default {
dummy.select(); dummy.select();
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(dummy); document.body.removeChild(dummy);
this.$refs.copyRequest.innerHTML = this.copiedButton; this.$refs.copyRequest.innerHTML = this.doneButton;
this.$toast.info("Copied to clipboard", { this.$toast.info("Copied to clipboard", {
icon: "done" icon: "done"
}); });
@@ -1500,7 +1511,7 @@ export default {
}, },
copyRequestCode() { copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.$refs.copyRequestCode.innerHTML =
this.copiedButton + "<span>Copied</span>"; this.doneButton + "<span>Copied</span>";
this.$toast.success("Copied to clipboard", { this.$toast.success("Copied to clipboard", {
icon: "done" icon: "done"
}); });
@@ -1514,63 +1525,50 @@ export default {
); );
}, },
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.$refs.copyResponse.innerHTML = this.doneButton;
this.copiedButton + "<span>Copied</span>";
this.$toast.success("Copied to clipboard", { this.$toast.success("Copied to clipboard", {
icon: "done" icon: "done"
}); });
// Creates a textarea element
var aux = document.createElement("textarea"); var aux = document.createElement("textarea");
var copy = var copy =
this.responseType == "application/json" this.responseType == "application/json"
? JSON.stringify(this.response.body) ? JSON.stringify(this.response.body)
: this.response.body; : this.response.body;
// Adds response body to the new textarea
aux.innerText = copy; aux.innerText = copy;
// Append the textarea to the body
document.body.appendChild(aux); document.body.appendChild(aux);
// Highlight the content
aux.select(); aux.select();
document.execCommand("copy"); document.execCommand("copy");
// Remove the input from the body
document.body.removeChild(aux); document.body.removeChild(aux);
setTimeout( setTimeout(
() => () => (this.$refs.copyResponse.innerHTML = this.copyButton),
(this.$refs.copyResponse.innerHTML =
this.copyButton + "<span>Copy</span>"),
1000 1000
); );
}, },
downloadResponse() { downloadResponse() {
// Storing the data in a organized way
var dataToWrite = JSON.stringify(this.response.body, null, 2); var dataToWrite = JSON.stringify(this.response.body, null, 2);
// Default filename, maybe its better to add the url requested ? var file = new Blob([dataToWrite], { type: this.responseType });
var filename = 'response'
// Creating the Blob with data and mimetype
var file = new Blob([dataToWrite], {type: 'application/json'});
// Create a "a" element
var a = document.createElement("a"), var a = document.createElement("a"),
url = URL.createObjectURL(file); url = URL.createObjectURL(file);
// Point "a" element to url of new to be downloaded
a.href = url; a.href = url;
// Makes "a" element downloadable with filename a.download = (
a.download = filename; this.url +
// Appends the brand new "a" element on body. this.path +
" [" +
this.method +
"] on " +
Date()
).replace(".", "[dot]");
document.body.appendChild(a); document.body.appendChild(a);
// Finally click on element to download it!
a.click(); a.click();
this.$refs.downloadResponse.innerHTML = this.$refs.downloadResponse.innerHTML = this.doneButton;
this.downloadedButton + "<span>Downloaded</span>"; this.$toast.success("Download started", {
this.$toast.success("Download started, check your browser", {
icon: "done" icon: "done"
}); });
setTimeout(function() { setTimeout(() => {
document.body.removeChild(a); document.body.removeChild(a);
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
}, 0); this.$refs.downloadResponse.innerHTML = this.downloadButton;
}, 1000);
}, },
togglePreview() { togglePreview() {
this.previewEnabled = !this.previewEnabled; this.previewEnabled = !this.previewEnabled;
@@ -1729,7 +1727,7 @@ export default {
this.bodyParams = []; this.bodyParams = [];
this.rawParams = ""; this.rawParams = "";
} }
e.target.innerHTML = this.copiedButton; e.target.innerHTML = this.doneButton;
this.$toast.info("Cleared", { this.$toast.info("Cleared", {
icon: "clear_all" icon: "clear_all"
}); });

View File

@@ -64,7 +64,7 @@
@change="toggleSetting('PROXY_ENABLED')" @change="toggleSetting('PROXY_ENABLED')"
>Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle> >Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
</span> </span>
<a href="https://github.com/liyasthomas/postwoman/wiki/Proxy" target="_blank"> <a href="https://github.com/liyasthomas/postwoman/wiki/Proxy" target="_blank" rel="noopener">
<button class="icon" v-tooltip="'Wiki'"> <button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help</i> <i class="material-icons">help</i>
</button> </button>
@@ -76,11 +76,8 @@
<li> <li>
<p> <p>
Postwoman's Proxy is hosted by ApolloTV. Postwoman's Proxy is hosted by ApolloTV.
<br />Read the ApolloTV privacy policy <br />
<a Read the <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">ApolloTV privacy policy</a>.
href="https://apollotv.xyz/legal"
target="_blank"
>here</a>.
</p> </p>
</li> </li>
</ul> </ul>