extended search

public/index.html

@@ -39,7 +39,7 @@
     <link rel="apple-touch-icon" sizes="167x167" href="img/launcher/ios_launcher_app_icon_167.png"><!-- ipad-retina -->
     <!-- Splash screen: If not set, will be white screen -->
     <link rel="apple-touch-startup-image" sizes="2048x2732" href="ios-splash/apple_splash_2048.png" /><!-- Tablet -->
-	<link rel="apple-touch-startup-image" sizes="1668x2224"href="ios-splash/apple_splash_1668.png" /><!-- Tablet -->
+    <link rel="apple-touch-startup-image" sizes="1668x2224" href="ios-splash/apple_splash_1668.png" /><!-- Tablet -->
     <link rel="apple-touch-startup-image" sizes="1536x2048" href="ios-splash/apple_splash_1536.png" /><!-- Tablet -->
     <link rel="apple-touch-startup-image" sizes="1125x2436" href="ios-splash/apple_splash_1125.png" /><!-- Tablet ? Phone -->
     <link rel="apple-touch-startup-image" sizes="1242x2208" href="ios-splash/apple_splash_1242.png" /><!-- Tablet ? Phone -->
@@ -63,15 +63,15 @@
 
     <!-- Buefy/Vuetify -->
     <script src="lib/buefy-0.7.5.js"></script>
-<!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
+    <!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
     <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
     <link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.css">
-<!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
+    <!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
 
-<!--    <script src="lib/vuetify-1.5.14.js"></script>-->
+    <!--    <script src="lib/vuetify-1.5.14.js"></script>-->
-<!--    <script src="lib/vuetify-1.5.14.min.js"></script>-->
+    <!--    <script src="lib/vuetify-1.5.14.min.js"></script>-->
-<!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.css">-->
+    <!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.css">-->
-<!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.min.css">-->
+    <!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.min.css">-->
 
     <!-- CSS_Custom Design -->
     <link rel="stylesheet" type="text/css" href="style/style.css">
@@ -100,14 +100,7 @@
                 <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
                 <form class="om-searchbar" @submit.prevent="search()">
                     <b-field>
-						<b-autocomplete
+                        <b-autocomplete rounded v-model="searchtext" @keydown.native.enter="search" :data="filteredDataArray" placeholder="suche..." icon="magnify" @select="option => selected = option">
-							rounded
-							v-model="searchtext"
-                            @keydown.native.enter="search"
-							:data="filteredDataArray"
-							placeholder="suche..."
-							icon="magnify"
-							@select="option => selected = option">
                         </b-autocomplete>
 
                         <!--<b-input
@@ -128,7 +121,7 @@
 							@typing="getFilteredTags"
 							@input="saveTagsToArray">
 						</b-taginput>-->
-						<button @click="clear">x</button>
+                        <b-button type="is-light" @click="clear">X</b-button>
                     </b-field>
                 </form>
             </div>
@@ -187,12 +180,14 @@
     </div>
 -->
     <script>
+        var isSearchActive = false;
         var tagArray = ["lorem"];
-		const dat=[
+        const dat = [
             'th',
             'efi',
             'wichtig',
         ];
+
     </script>
 
     <!-- const routes = [
@@ -214,12 +209,12 @@
             data: function() {
                 return {
                     searchtext: "",
-					isSearchActiv: false,
+                    //isSearchActiv: false,
                     selected: [],
                     taglist: dat,
                 };
             },
-            computed:{
+            computed: {
                 filteredDataArray() {
                     return this.taglist.filter((option) => {
                         return option
@@ -230,11 +225,78 @@
                 }
             },
             methods: {
+
+                getFilteredTags(text) {
+                    this.taglist = dat.filter((option) => {
+                        return option
+                            .toString()
+                            .toLowerCase()
+                            .indexOf(text.toLowerCase()) >= 0
+                    })
+                    this.search();
+                },
+                saveTagsToArray: function() {
+                    tagArray = this.selected;
+                    console.info(tagArray);
+                },
                 search: function() {
-					this.isSearchActiv = true;
+                  searching(this.searchtext);
-                    console.log("Searchtext: " +this.searchtext.replace(/#/g,''));
+                },
+                list_messages: function() {
+                  messages();
+                },
+                list_tags: function() {
                     $.ajax({
-                        url: "api/msg/search/" + this.searchtext.replace(/#/g, ''),
+                            url: "api/tag/ids",
+                            method: "GET"
+                        })
+                        .done(jd => {
+                            // NICHT SO wg. Vue: _messagelist = jd;
+                            _taglist.splice(0, _taglist.length);
+                            _taglist.push.apply(_taglist, jd);
+                            console.log("tag: jd: " + jd);
+                            for (var e in jd) {
+                                if (!_tags[jd[e]]) {
+                                    get_insert_tag(jd[e]);
+                                }
+                            }
+                        }).fail(function(e, f, g) {
+                            console.log("err: " + e + f + g);
+                        });
+                },
+
+                clear: function() {
+                    console.log("clear");
+
+                    isSearchActiv = false;
+                    this.searchtext = "";
+                    this.list_messages();
+                },
+
+            },
+            mounted: function() {
+                //this.search();
+                this.list_tags();
+            },
+        });
+
+        function get_insert_tag(id) {
+            $.ajax({
+                url: "api/tag/" + id,
+                method: "GET"
+            }).done(function(tag) {
+                dat.push("#" + tag.name);
+                console.log("it worked!");
+            }).fail(function(e, f, g) {
+                console.log("cannot load " + id + ".json: " + e + f + g);
+            })
+        }
+
+        function searching(searchtext) {
+            isSearchActiv = true;
+            console.log("Searchtext: " + searchtext.replace(/#/g, ''));
+            $.ajax({
+                url: "api/msg/search/" + searchtext.replace(/#/g, ''),
                 method: "GET"
             }).done(jd => {
                 // NICHT SO wg. Vue: _messagelist = jd;
@@ -249,9 +311,12 @@
             }).fail(function(e, f, g) {
                 console.log("searching: err: " + e + f + g);
             })
-                },
+        }
-                list_messages: function () {
+        function messages() {
-            $.ajax({url: "api/msg/ids", method: "GET"})
+            $.ajax({
+                    url: "api/msg/ids",
+                    method: "GET"
+                })
                 .done(jd => {
                     // NICHT SO wg. Vue: _messagelist = jd;
                     _messagelist.splice(0, _messagelist.length);
@@ -262,67 +327,13 @@
                             get_insert_message(jd[e]);
                         }
                     }
-            }).fail(function (e, f, g) {
+                }).fail(function(e, f, g) {
                     console.log("list_msg: err: " + e + f + g);
                 });
-        },
-                getFilteredTags(text) {
-					this.taglist = dat.filter((option) => {
-					return option
-						.toString()
-						.toLowerCase()
-						.indexOf(text.toLowerCase()) >= 0
-					})
-                    this.search();
-        		},
-				saveTagsToArray: function() {
-            		tagArray = this.selected;
-            		console.info(tagArray);
-        		},
-                list_tags: function () {
-                    $.ajax({url: "api/tag/ids",method: "GET"})
-                        .done(jd => {
-                            // NICHT SO wg. Vue: _messagelist = jd;
-                            _taglist.splice(0, _taglist.length);
-                            _taglist.push.apply(_taglist, jd);
-                            console.log("tag: jd: " + jd);
-                            for (var e in jd) {
-                                if (!_tags[jd[e]]) {
-                                    get_insert_tag(jd[e]);
         }
-                            }
-                        }).fail(function (e, f, g) {
-                            console.log("err: " + e + f + g);
-                    });
-                },
-
-				clear: function() {
-					console.log("clear");
-
-					this.isSearchActiv = false;
-					this.searchtext = "";
-					this.list_messages();
-				},
-
-			},
-             mounted: function () {
-                //this.search();
-                 this.list_tags();
-            },
-        });
-        function get_insert_tag(id){
-					$.ajax({ url: "api/tag/"+id, method: "GET" }).done(function (tag) {
-						dat.push("#"+tag.name);
-						console.log("it worked!");
-					}).fail(function (e, f, g) {
-						console.log("cannot load " + id + ".json: " + e + f + g);
-					})
-				}
-
-
 
         const search_data = [];
-/*
+        /*
                 export.default {
                     data: function () {
                         return {
@@ -356,7 +367,7 @@
                             $(this).bootstrapMaterialDesign();
                     },
                 };
-*/
+        */
 
     </script>
 

public/routes/files.js

@@ -1,5 +1,4 @@
 var tagArray = [];
-const data=[];
 
 const FileRouter = {
     template: `
@@ -21,62 +20,52 @@ const FileRouter = {
         <b-input id="freeSe"></b-input>
     </b-field>
 
-	<b-field v-if="selectedOptions=='tags'"">
+	<b-field v-if="selectedOptions=='tags'">
-		<b-taginput
+        <b-autocomplete rounded v-model="searchtext"
-            id="tag"
+        :data="filteredDataArray"
-			v-model="selected"
+        placeholder="suche..." icon="magnify"
-			:data=taglist
+        @select="option => selected = option">
-			autocomplete
+        </b-autocomplete>
-			allow-new:false
-			icon="label"
-			placeholder="#"
-			@typing="getFilteredTags"
-            @input="saveTagsToArray">
-		</b-taginput>
 	</b-field>
 
-	<b-button type="is-primary" @click="">SUCHE</b-button>
+	<b-button type="is-primary" @click="search">SUCHE</b-button>
 
+<div id="om-msg-cards">
+    <MsgCard
+        v-for="id in messagelist.slice().reverse()"
+        :key="id"
+        :msg="messages[id] || {}"
+    ></MsgCard>
+</div>
 </div>
 `,
     data: function () {
         return {
+            searchtext: "",
             selectedOptions: [],
             selected: [],
             taglist: data,
+            messagelist: _messagelist,
+            messages: _messages,
+        }
+    },
+    computed: {
+        filteredDataArray() {
+            return this.taglist.filter((option) => {
+                return option
+                    .toString()
+                    .toLowerCase()
+                    .indexOf(this.searchtext.toLowerCase()) >= 0
+            })
         }
     },
     methods: {
-		saveTagsToArray: function() {
+        list_messages: function () {
+            messages();
+        },
+        saveTagsToArray: function () {
             tagArray = this.selected;
             console.info(tagArray);
-        },
-		createMsg: function () {
-			var _subject = $("#subject").val();
-			var _message = $("#message").val();
-			var _tag = tagArray;
-			var _user = $("#user").val();
-			//console.log("Message Created: " + _tag + " " + _message + " " + _user);
-			$.ajax({
-				url: "api/msg",
-				data: {
-					subject: _subject,
-					message: _message,
-					user: _user,
-					tag: _tag
-				},
-				method: "POST"
-			}).done(have_result).fail(have_error);
-
-			function have_result(res) {
-				//console.log(res);
-                router.push('/home')
-			}
-
-			function have_error(err) {
-				console.log("error: " + err.responseText);
-				console.log(err);
-			}
         },
         getFilteredTags(text) {
             this.taglist = data.filter((option) => {
@@ -85,9 +74,13 @@ const FileRouter = {
                     .toLowerCase()
                     .indexOf(text.toLowerCase()) >= 0
             })
+            this.search();
         },
         list_tags: function () {
-                $.ajax({url: "api/tag/ids",method: "GET"})
+            $.ajax({
+                    url: "api/tag/ids",
+                    method: "GET"
+                })
                 .done(jd => {
                     // NICHT SO wg. Vue: _messagelist = jd;
                     _taglist.splice(0, _taglist.length);
@@ -101,6 +94,21 @@ const FileRouter = {
                 }).fail(function (e, f, g) {
                     console.log("err: " + e + f + g);
                 });
-        }
+        },
+        saveTagsToArray: function () {
+            tagArray = this.selected;
+            console.info(tagArray);
+        },
+        search: function () {
+            searching(this.searchtext);
+        },
+        list_messages: function () {
+            messages();
+        },
+    },
+    mounted: function () {
+        //this.search();
+        this.list_tags();
+        //this.list_messages();
     },
 };

public/routes/home.js

@@ -23,7 +23,10 @@ const HomeRouter = {
                 tags: "foo"
             });
         },*/
-        list_messages: function () {
+        list_messages: function() {
+            messages();
+        }
+        /*list_messages: function () {
             $.ajax({url: "api/msg/ids", method: "GET"})
              .done(jd => {
                 // NICHT SO wg. Vue: _messagelist = jd;
@@ -35,7 +38,7 @@ const HomeRouter = {
                             get_insert_message(jd[e]);
                         }
                 }
-                /*if(!($".om-searchbar" = "")){
+                if(!($".om-searchbar" = "")){
                     for (var e in jd) {
                         if (!_messages[jd[e]]) {
                             get_insert_message(jd[e]);
@@ -47,11 +50,11 @@ const HomeRouter = {
                             get_search_message(jd[e]);
                         }
                     }
-                }*/
+                }
             }).fail(function (e, f, g) {
                 console.log("list_msg: err: " + e + f + g);
             });
-        }
+        }*/
     },
 
     mounted: function () {

public/routes/msgCard.js

@@ -5,8 +5,8 @@ Vue.component('MsgCard', {
                 <img src="favicon.ico" width=20px height=20px>
                 </h6>
                 {{ msg.message }}<br><br>
-                <!--<a v-for="tag in msg.tag" href="#">#{{ tag }} </a>-->
+                <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
-				<b-button class="tags" type="is-text" v-for="tag in msg.tag>#{{ tag }} </b-button>
+				<!--<b-button class="tags" type="is-text" v-for="tag in msg.tag">#{{ tag }} </b-button>-->
 				</p>
                 <div class="om-card-footer"> <div class="om-user-line">
                 <i class="material-icons">account_circle</i>
@@ -26,5 +26,9 @@ Vue.component('MsgCard', {
         myFilter: function() {
             this.isActive = !this.isActive;
         },
+        filterForTag: function(tag) {
+            console.log("link: " +tag);
+            searching(tag);
+        },
     }
 });

server/dbs.js

@@ -57,7 +57,9 @@ const dbs = {
              * Get a particular message
              */
             get: function(req, res) {
-                model.Messages.find({$text: {$search: req.params.phrase}})
+                model.Messages.find(
+                    {$text: {$search: req.params.phrase}})
+                    .sort({tag:1, user:1, message:1, subject:1})
                 .exec().then(results => {
                     //selects id from message:
                     var parsed = [];