🎉 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;
     }
   }
 };

firestore.rules

@@ -1,7 +1,8 @@
+// Allow read/write access on all documents to any user signed in to the application
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
-      allow read, write;
+      allow read, write: if request.auth.uid != null;
     }
   }
 }

functions/fb.js

@@ -25,13 +25,14 @@ export const fb = {
   feedsInFeed: [],
   currentUser: {},
   currentSettings: [],
-  writeFeed: async message => {
+  writeFeed: async (message, label) => {
     const dt = {
       createdOn: new Date(),
       author: fb.currentUser.uid,
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
-      message
+      message,
+      label
     };
     try {
       return feedsCollection.add(dt);
@@ -45,6 +46,7 @@ export const fb = {
       .delete()
       .catch(e => console.error("error deleting", dt, e)),
   writeSettings: async (setting, value) => {
+    console.log(value);
     const st = {
       updatedOn: new Date(),
       author: fb.currentUser.uid,

lang/en-US.js

@@ -258,5 +258,6 @@ export default {
   syncHistory: "History",
   syncCollections: "Collections",
   turn_on: "Turn on",
-  login_first: "Login first"
+  login_first: "Login first",
+  paste_a_collection: "Paste a Collection"
 };

layouts/default.vue

@@ -239,7 +239,7 @@
               <ul>
                 <li>
                   <a href="#account" v-tooltip.right="$t('account')">
-                    <i class="material-icons">perm_identity</i>
+                    <i class="material-icons">person</i>
                   </a>
                 </li>
                 <li>