Merge branch 'master' into patch-zyb

components/collections/index.vue

@@ -62,7 +62,7 @@ TODO:
       </div>
     </div>
     <p v-if="collections.length === 0" class="info">
-      Create new collection
+      <i class="material-icons">help_outline</i> Create new collection
     </p>
     <div class="virtual-list">
       <ul>
@@ -76,9 +76,6 @@ TODO:
             @edit-request="editRequest($event)"
           />
         </li>
-        <li v-if="collections.length === 0">
-          <label>Collections are empty</label>
-        </li>
       </ul>
     </div>
     <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">

components/environments/editEnvironment.vue

@@ -35,14 +35,6 @@
               </button>
             </div>
           </div>
-          <textarea
-            id="variableList"
-            readonly
-            v-textarea-auto-height="variableString"
-            v-model="variableString"
-            :placeholder="$t('add_one_variable')"
-            rows="1"
-          ></textarea>
         </li>
       </ul>
       <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
@@ -114,13 +106,9 @@
 </template>
 
 <script>
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import { fb } from "~/helpers/fb"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,

components/environments/index.vue

@@ -25,7 +25,7 @@
       </div>
     </div>
     <p v-if="environments.length === 0" class="info">
-      Create new environment
+      <i class="material-icons">help_outline</i> Create new environment
     </p>
     <div class="virtual-list">
       <ul>
@@ -37,9 +37,6 @@
             @select-environment="$emit('use-environment', environment)"
           />
         </li>
-        <li v-if="environments.length === 0">
-          <label>Environments are empty</label>
-        </li>
       </ul>
     </div>
   </pw-section>

components/layout/history.vue

@@ -154,7 +154,7 @@
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      {{ $t("history_empty") }}
+      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -221,7 +221,7 @@
       </div>
       <div class="flex-wrap" v-else>
         <label for="clear-history-button" class="info">
-          {{ $t("are_you_sure") }}
+          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
         <div>
           <button

components/lenses/ResponseBodyRenderer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tabs>
+      <tab
+        v-for="(lens, index) in validLenses"
+        :key="lens.lensName"
+        :id="lens.lensName"
+        :label="lens.lensName"
+        :selected="index === 0"
+      >
+        <component :is="lens.renderer" :response="response" />
+      </tab>
+      <tab
+        v-if="Object.keys(response.headers).length !== 0"
+        id="headers"
+        :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      >
+        <headers :headers="response.headers" />
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+
+export default {
+  components: {
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
+    headers: () => import("./headers"),
+    // Lens Renderers
+    ...getLensRenderers(),
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    validLenses() {
+      return getSuitableLenses(this.response)
+    },
+  },
+}
+</script>

components/lenses/headers.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ul v-for="(value, key) in headers" :key="key">
+      <li>
+        <input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {},
+  },
+}
+</script>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -0,0 +1,153 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            v-if="response.body"
+            class="icon"
+            @click.prevent="togglePreview"
+            v-tooltip="{
+              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !previewEnabled ? "visibility" : "visibility_off" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'html'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+        <iframe
+          :class="{ hidden: !previewEnabled }"
+          class="covers-response"
+          ref="previewFrame"
+          src="about:blank"
+        ></iframe>
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      previewEnabled: false,
+    }
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: "text/html" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+        // Use DOMParser to parse document HTML.
+        const previewDocument = new DOMParser().parseFromString(this.responseBodyText, "text/html")
+        // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+        previewDocument.head.innerHTML =
+          `<base href="${this.url}">` + previewDocument.head.innerHTML
+        // Finally, set the iframe source to the resulting HTML.
+        this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+        this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+      }
+    },
+  },
+}
+</script>

components/lenses/renderers/ImageLensRenderer.vue

@@ -0,0 +1,102 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <img class="response-image" :src="imageSource" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+.response-image {
+  max-width: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      imageSource: "",
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler(newValue) {
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          this.imageSource = e.target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+  mounted() {
+    this.imageSource = ""
+
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      this.imageSource = e.target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.response.body
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -0,0 +1,149 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div class="valid-warning" v-if="jsonInvalid">
+        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="jsonBodyText"
+          :lang="'json'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      jsonInvalid: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    jsonBodyText() {
+      try {
+        this.jsonInvalid = false
+        return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        this.jsonInvalid = true
+        return this.responseBodyText
+      }
+    },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/RawLensRenderer.vue

@@ -0,0 +1,134 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'plain_text'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/XMLLensRenderer.vue

@@ -0,0 +1,125 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'xml'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/mixins/TextContentRendererMixin.js

@@ -0,0 +1,10 @@
+export default {
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}