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

Merge pull request #63 from nickpalenchar/feature/raw-input

Browse Source 
Feature/raw input
This commit is contained in:
Liyas Thomas
2019-08-26 11:29:58 +05:30
committed by GitHub
parent f80a0cbd07 54876e6db3
commit c23fb7bfb2
1 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
pages/index.vue
View File

@@ -36,34 +36,42 @@
<option>application/json</option> <option>application/json</option>
<option>www-form/urlencoded</option> <option>www-form/urlencoded</option>
</select> </select>
<span>
<input v-model="rawInput" style="cursor: pointer;" type="checkbox" id="rawInput">
<label for="rawInput" style="cursor: pointer;">Raw Input</label>
</span>
</li> </li>
</ul> </ul>
<ol v-for="(param, index) in bodyParams"> <div v-if="!rawInput">
<li> <ol v-for="(param, index) in bodyParams">
<label :for="'bparam'+index">Key {{index + 1}}</label> <li>
<input :name="'bparam'+index" v-model="param.key"> <label :for="'bparam'+index">Key {{index + 1}}</label>
</li> <input :name="'bparam'+index" v-model="param.key">
<li> </li>
<label :for="'bvalue'+index">Value {{index + 1}}</label> <li>
<input :name="'bvalue'+index" v-model="param.value"> <label :for="'bvalue'+index">Value {{index + 1}}</label>
</li> <input :name="'bvalue'+index" v-model="param.value">
<li> </li>
<label for="request">&nbsp;</label> <li>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button> <label for="request">&nbsp;</label>
</li> <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</ol> </li>
<ul> </ol>
<li> <ul>
<label for="addrequest">Action</label> <li>
<button name="addrequest" @click="addRequestBodyParam">Add</button> <label for="addrequest">Action</label>
</li> <button name="addrequest" @click="addRequestBodyParam">Add</button>
</ul> </li>
<ul> </ul>
<li> <ul>
<label for="request">Parameter List</label> <li>
<textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea> <label for="request">Parameter List</label>
</li> <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
</ul> </li>
</ul>
</div><div v-else>
<textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
</div>
</pw-section> </pw-section>
<pw-section class="green" label="Authentication" collapsed> <pw-section class="green" label="Authentication" collapsed>
@@ -213,6 +221,8 @@
bearerToken: '', bearerToken: '',
params: [], params: [],
bodyParams: [], bodyParams: [],
rawParams: '',
rawInput: false,
contentType: 'application/json', contentType: 'application/json',
response: { response: {
status: '', status: '',
@@ -329,7 +339,7 @@
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken); xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
} }
if (this.method === 'POST' || this.method === 'PUT') { if (this.method === 'POST' || this.method === 'PUT') {
const requestBody = this.rawRequestBody const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length) xhr.setRequestHeader('Content-Length', requestBody.length)
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`) xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`)
xhr.send(requestBody) xhr.send(requestBody)
@@ -369,6 +379,30 @@
}, },
removeRequestBodyParam(index) { removeRequestBodyParam(index) {
this.bodyParams.splice(index, 1) this.bodyParams.splice(index, 1)
},
formatRawParams(event) {
if ((event.which !== 13 && event.which !== 9)) {
return;
}
const textBody = event.target.value;
const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
const textAfterCursor = textBody.substring(event.target.selectionEnd);
if (event.which === 13) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
}
else if (event.which === 9) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false;
}
} }
} }
} }