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

🎨 Minor UI update

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-02 16:32:29 +05:30
parent a43ec422c0
commit 7aee2f4211
2 changed files with 619 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/history.vue
View File

@@ -7,33 +7,33 @@
</li> </li>
</ul> </ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)"> <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
<ul v-for="entry in filteredHistory" :key="entry.time" class="entry"> <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li> <li>
<label :for="'time#' + entry.time">Time</label> <label :for="'time#'+index">Time</label>
<input :id="'time#' + entry.time" type="text" readonly :value="entry.time" :title="entry.date"> <input :id="'time#'+index" type="text" readonly :value="entry.time" :title="entry.date">
</li> </li>
<li class="method-list-item"> <li class="method-list-item">
<label :for="'time#' + entry.time">Method</label> <label :for="'time#'+index">Method</label>
<input :id="'method#' + entry.time" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}"> <input :id="'method#'+index" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<span class="entry-status-code">{{entry.status}}</span> <span class="entry-status-code">{{entry.status}}</span>
</li> </li>
<li> <li>
<label :for="'url#' + entry.time">URL</label> <label :for="'url#'+index">URL</label>
<input :id="'url#' + entry.time" type="text" readonly :value="entry.url"> <input :id="'url#'+index" type="text" readonly :value="entry.url">
</li> </li>
<li> <li>
<label :for="'path#' + entry.time">Path</label> <label :for="'path#'+index">Path</label>
<input :id="'path#' + entry.time" type="text" readonly :value="entry.path"> <input :id="'path#'+index" type="text" readonly :value="entry.path">
</li> </li>
<li> <li>
<label :for="'delete-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label> <label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#' + entry.time" :disabled="isClearingHistory" @click="deleteHistory(entry)"> <button :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
Delete Delete
</button> </button>
</li> </li>
<li> <li>
<label :for="'use-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label> <label :for="'use-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#' + entry.time" :disabled="isClearingHistory" @click="useHistory(entry)"> <button :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
Use Use
</button> </button>
</li> </li>

81
pages/index.vue
View File

@@ -16,8 +16,7 @@
</li> </li>
<li> <li>
<label for="url">URL</label> <label for="url">URL</label>
<input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" type="url" <input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" type="url" v-model="url">
v-model="url">
</li> </li>
<li> <li>
<label for="path">Path</label> <label for="path">Path</label>
@@ -30,8 +29,7 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue-dark" label="Request Body" <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul> <ul>
<li> <li>
<autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -73,10 +71,39 @@
</ul> </ul>
</div> </div>
<div v-else> <div v-else>
<textarea @keydown="formatRawParams" rows="16" style="font-family: monospace;" v-model="rawParams" <textarea @keydown="formatRawParams" rows="16" style="font-family: monospace;" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
v-textarea-auto-height="rawParams"></textarea>
</div> </div>
</pw-section> </pw-section>
<pw-section class="purple" id="response" label="Response" ref="response">
<ul>
<li>
<label for="status">status</label>
<input :class="statusCategory ? statusCategory.className : ''" :value="response.status || '(waiting to send request)'" name="status" readonly type="text">
</li>
</ul>
<ul v-for="(value, key) in response.headers">
<li>
<label for="value">{{key}}</label>
<input :value="value" name="value" readonly>
</li>
</ul>
<ul v-if="response.body">
<li>
<div class="flex-wrap">
<label for="body">response</label>
<button @click="copyResponse" name="action" v-if="response.body">Copy Response</button>
</div>
<div id="response-details-wrapper">
<textarea id="response-details" name="body" readonly rows="16">{{response.body || '(waiting to send request)'}}</textarea>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame" src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
</li>
</ul>
<br>
</pw-section>
<pw-section class="green" collapsed label="Authentication"> <pw-section class="green" collapsed label="Authentication">
<ul> <ul>
<li> <li>
@@ -161,39 +188,7 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" id="response" label="Response" ref="response"> <history @useHistory="handleUseHistory" ref="historyComponent" />
<ul>
<li>
<label for="status">status</label>
<input :class="statusCategory ? statusCategory.className : ''"
:value="response.status || '(waiting to send request)'" name="status" readonly type="text">
</li>
</ul>
<ul v-for="(value, key) in response.headers">
<li>
<label for="value">{{key}}</label>
<input :value="value" name="value" readonly>
</li>
</ul>
<ul v-if="response.body">
<li>
<div class="flex-wrap">
<label for="body">response</label>
<button @click="copyResponse" name="action" v-if="response.body">Copy Response</button>
</div>
<div id="response-details-wrapper">
<textarea id="response-details" name="body" readonly rows="16">{{response.body || '(waiting to send request)'}}</textarea>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame"
src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
</li>
</ul>
<br>
</pw-section>
<history @useHistory="handleUseHistory" ref="historyComponent"/>
</div> </div>
</template> </template>
<script> <script>
@@ -582,10 +577,10 @@
this.$router.replace('/?' + flats.concat(deeps).join('').slice(0, -1)) this.$router.replace('/?' + flats.concat(deeps).join('').slice(0, -1))
}, },
setRouteQueries(queries) { setRouteQueries(queries) {
if (typeof (queries) !== 'object') throw new Error('Route query parameters must be a Object') if (typeof(queries) !== 'object') throw new Error('Route query parameters must be a Object')
for (const key in queries) { for (const key in queries) {
if (key === 'headers' || key === 'params' || key === 'bodyParams') this[key] = JSON.parse(queries[key]) if (key === 'headers' || key === 'params' || key === 'bodyParams') this[key] = JSON.parse(queries[key])
else if (typeof (this[key]) === 'string') this[key] = queries[key]; else if (typeof(this[key]) === 'string') this[key] = queries[key];
} }
}, },
observeRequestButton() { observeRequestButton() {
@@ -595,7 +590,9 @@
entries.forEach(entry => { entries.forEach(entry => {
sendButtonElement.classList.toggle('show'); sendButtonElement.classList.toggle('show');
}); });
}, {threshold: 1}); }, {
threshold: 1
});
observer.observe(requestElement); observer.observe(requestElement);
} }