Merge branch 'master' into history-fieldset-entry-status-colors

pages/index.vue

@@ -36,34 +36,42 @@
             <option>application/json</option>
             <option>www-form/urlencoded</option>
           </select>
+          <span>
+            <input v-model="rawInput" style="cursor: pointer;" type="checkbox" id="rawInput">
+            <label for="rawInput" style="cursor: pointer;">Raw Input</label>
+          </span>
         </li>
       </ul>
-      <ol v-for="(param, index) in bodyParams">
-        <li>
-          <label :for="'bparam'+index">Key {{index + 1}}</label>
-          <input :name="'bparam'+index" v-model="param.key">
-        </li>
-        <li>
-          <label :for="'bvalue'+index">Value {{index + 1}}</label>
-          <input :name="'bvalue'+index" v-model="param.value">
-        </li>
-        <li>
-          <label for="request">&nbsp;</label>
-          <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
-        </li>
-      </ol>
-      <ul>
-        <li>
-          <label for="addrequest">Action</label>
-          <button name="addrequest" @click="addRequestBodyParam">Add</button>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="request">Parameter List</label>
-          <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
-        </li>
-      </ul>
+      <div v-if="!rawInput">
+        <ol v-for="(param, index) in bodyParams">
+          <li>
+            <label :for="'bparam'+index">Key {{index + 1}}</label>
+            <input :name="'bparam'+index" v-model="param.key">
+          </li>
+          <li>
+            <label :for="'bvalue'+index">Value {{index + 1}}</label>
+            <input :name="'bvalue'+index" v-model="param.value">
+          </li>
+          <li>
+            <label for="request">&nbsp;</label>
+            <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
+          </li>
+        </ol>
+        <ul>
+          <li>
+            <label for="addrequest">Action</label>
+            <button name="addrequest" @click="addRequestBodyParam">Add</button>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <label for="request">Parameter List</label>
+            <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
+          </li>
+        </ul>
+      </div><div v-else>
+        <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
+      </div>
     </pw-section>
 
     <pw-section class="green" label="Authentication" collapsed>
@@ -138,9 +146,12 @@
         </li>
       </ul>
       <ul>
-        <li>
+        <li> 
+        <div class="flex-wrap">
           <label for="body">response</label>
-          <textarea name="body" rows="10" readonly>{{response.body || '(waiting to send request)'}}</textarea>
+          <button v-if="response.body" name="action" class="btn-copy" @click="copyResponse">Copy Response</button>
+         </div>
+          <textarea name="body" rows="10" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
         </li>
       </ul>
     </pw-section>
@@ -226,6 +237,8 @@
               bearerToken: '',
               params: [],
               bodyParams: [],
+              rawParams: '',
+              rawInput: false,
               contentType: 'application/json',
               response: {
                   status: '',
@@ -328,7 +341,7 @@
                   xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
               }
               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-Type', `${this.contentType}; charset=utf-8`)
                   xhr.send(requestBody)
@@ -381,6 +394,36 @@
           },
           removeRequestBodyParam(index) {
               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;
+            }
+
+          },
+           copyResponse() {
+            var copyText = document.getElementById("response-details");
+            copyText.select();
+            document.execCommand("copy");
           }
       }
   }

pages/websocket.vue

@@ -7,9 +7,9 @@
           <label for="url">URL</label>
           <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
         </li>
-        <li class="no-grow">
+        <li>
           <label>&nbsp;</label>
-          <button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
+          <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
         </li>
       </ul>
     </pw-section>
@@ -18,7 +18,7 @@
       <ul>
         <li>
           <label for="log">Log</label>
-          <div id="log" name="log" class="log" readonly>
+          <div id="log" name="log" class="log">
               <span v-if="communication.log">
                 <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
               </span>
@@ -33,9 +33,9 @@
           <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
         </li>
 
-        <li class="no-grow">
+        <li>
           <label>&nbsp;</label>
-          <button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
+          <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
         </li>
       </ul>
     </pw-section>
@@ -44,13 +44,6 @@
 </template>
 
 <style lang="scss">
-  .no-grow { flex-grow: 0; }
-  .action {
-    padding-left: 30px;
-    padding-right: 30px;
-    width: 150px;
-  }
-
   div.log {
     margin: 4px;
     padding: 8px 16px;
@@ -58,7 +51,7 @@
     border-radius: 4px;
     background-color: var(--bg-dark-color);
     color: var(--fg-color);
-    height: 300px;
+    height: 256px;
     overflow: auto;
 
     &, span {