✨ More toasts

2019-09-26 15:25:37 +05:30
parent 26326d8878
commit 75b69cad21
4 changed files with 74 additions and 28 deletions
--- a/README.md
+++ b/README.md
@@ -164,7 +164,7 @@ docker run -p 3000:3000 postwoman:latest
 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.

--- a/components/logo.vue
+++ b/components/logo.vue
@@ -1,29 +1,32 @@
 <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">
-            <defs id="defs11" />
-            <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" />
-                <g id="g3820" transform="translate(516.40798,163.89028)">
-                    <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" />
-                    </g>
-                </g>
-            </g>
-    </svg>
+  <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" />
+    <g id="g3826" transform="translate(-516.40798,-163.88978)">
+      <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="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" />
+        </g>
+      </g>
+    </g>
+  </svg>
 </template>

 <style>
-    #path3816 {
-        fill: var(--ac-color);
-    }
+  #circle3814 {
+    fill: var(--bg-color);
+  }
+  #path3816 {
+    fill: var(--ac-color);
+  }
 </style>

 <script>
-    export default {
-        props: {
-            'color': {
-                type: String
-            }
-        }
+  export default {
+    props: {
+      'color': {
+        type: String
+      }
    }
-</script>
+  }
+</script>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -694,7 +694,11 @@
      },
      async sendRequest() {
        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;
        }

@@ -808,7 +812,7 @@
          this.response.status = error.message;
          this.response.body = "See JavaScript console (F12) for details.";
          this.$toast.error('Something went wrong!', {
-            icon: 'delete',
+            icon: 'error',
            position: 'bottom-center',
            duration: 1000,
          });
@@ -907,28 +911,47 @@
              text: `Postwoman • API request builder at ${time} on ${date}`,
              url: window.location.href
            }).then(() => {
-              // console.log('Thanks for sharing!');
+              this.$toast.success('Thanks for sharing!', {
+                icon: 'share',
+                position: 'bottom-center',
+                duration: 1000,
+              });
            })
            .catch(console.error);
        } else {
          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');
          document.body.appendChild(dummy);
          dummy.value = window.location.href;
          dummy.select();
          document.execCommand('copy');
          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() {
        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();
        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() {
        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
        var aux = document.createElement("textarea");
        var copy = this.responseType == 'application/json' ? JSON.stringify(this.response.body) : this.response.body;
@@ -941,7 +964,7 @@
        document.execCommand('copy');
        // Remove the input from the body
        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() {
        this.previewEnabled = !this.previewEnabled;
@@ -1023,6 +1046,11 @@
          this.showModal = false;
        } catch (error) {
          this.showModal = false;
+          this.$toast.error('cURL is not formatted properly', {
+            icon: 'error',
+            position: 'bottom-center',
+            duration: 1000,
+          });
        }
      },
      toggleModal() {
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -130,6 +130,11 @@
              color: 'var(--ac-color)',
              ts: (new Date()).toLocaleTimeString()
            }];
+            this.$toast.success('Connected', {
+              icon: 'sync',
+              position: 'bottom-center',
+              duration: 1000,
+            });
          };
          this.socket.onerror = (event) => {
            this.handleError();
@@ -142,6 +147,11 @@
              color: '#ff5555',
              ts: (new Date()).toLocaleTimeString()
            });
+            this.$toast.error('Disconnected', {
+              icon: 'sync_disabled',
+              position: 'bottom-center',
+              duration: 1000,
+            });
          };
          this.socket.onmessage = (event) => {
            this.communication.log.push({
@@ -152,6 +162,11 @@
          }
        } catch (ex) {
          this.handleError(ex);
+          this.$toast.error('Something went wrong!', {
+            icon: 'error',
+            position: 'bottom-center',
+            duration: 1000,
+          });
        }
      },
      disconnect() {