🎉 Completed MVP

components/firebase/feeds.vue

@@ -1,22 +1,46 @@
 <template>
   <virtual-list
+    v-if="fb.feedsInFeed.length !== 0"
     class="virtual-list"
     :class="{ filled: fb.feedsInFeed.length }"
     :size="56"
-    :remain="Math.min(5, fb.feedsInFeed.length)"
+    :remain="Math.min(8, fb.feedsInFeed.length)"
   >
     <ul v-for="feed in fb.feedsInFeed" :key="feed.id">
-      <li>{{ feed.message }}</li>
-      <button class="icon" @click="deleteFeed(feed)">
-        <i class="material-icons">delete</i>
-      </button>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            readonly
+            :value="feed.label"
+            :placeholder="$t('no_label')"
+            class="bg-color"
+          />
+        </li>
+        <button class="icon" @click="saveFeed(feed)">
+          <i class="material-icons">get_app</i>
+        </button>
+        <button class="icon" @click="deleteFeed(feed)">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
     </ul>
   </virtual-list>
+  <ul v-else>
+    <li>
+      <label class="info">{{ $t("empty") }}</label>
+    </li>
+  </ul>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 284px);
+  max-height: calc(100vh - 288px);
+}
+
+.bg-color {
+  background-color: transparent;
 }
 </style>
 
@@ -35,6 +59,27 @@ export default {
   methods: {
     deleteFeed(feed) {
       fb.deleteFeed(feed.id);
+    },
+    saveFeed(feed) {
+      const dataToWrite = JSON.stringify(
+        eval("(" + feed.message + ")"),
+        null,
+        2
+      );
+      const file = new Blob([dataToWrite], { type: "application/json" });
+      const a = document.createElement("a"),
+        url = URL.createObjectURL(file);
+      a.href = url;
+      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
+      document.body.appendChild(a);
+      a.click();
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done"
+      });
+      setTimeout(() => {
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      }, 1000);
     }
   }
 };

components/firebase/inputform.vue

@@ -1,8 +1,37 @@
 <template>
-  <form @submit.prevent="formPost">
-    <input type="text" autofocus ref="inputMessage" v-model="message" />
-    <input :disabled="!this.message" type="submit" value="Save" />
-  </form>
+  <div>
+    <ul>
+      <li>
+        <input
+          :aria-label="$t('label')"
+          type="text"
+          autofocus
+          v-model="message"
+          :placeholder="$t('paste_a_collection')"
+        />
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <input
+          :aria-label="$t('label')"
+          type="text"
+          autofocus
+          v-model="label"
+          :placeholder="$t('label')"
+        />
+      </li>
+      <button
+        class="icon"
+        :disabled="!(this.message && this.label)"
+        value="Save"
+        @click="formPost"
+      >
+        <i class="material-icons">add</i>
+        <span>Add</span>
+      </button>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -11,13 +40,15 @@ import { fb } from "../../functions/fb";
 export default {
   data() {
     return {
-      message: null
+      message: null,
+      label: null
     };
   },
   methods: {
     formPost() {
-      fb.writeFeed(this.message);
+      fb.writeFeed(this.message, this.label);
       this.message = null;
+      this.label = null;
     }
   }
 };