Better search mask

webapp/app.js

@@ -33,7 +33,7 @@ var app = new Vue({
         debug: false,
         account: false,
         new_account: "",
-        search_visible: true,
+        search_visible: false,
         query: {
             url: null,
             search: null,
@@ -87,16 +87,14 @@ var app = new Vue({
             });
         
         },
+        display_query: function (queryname) {
+            let q = queryname.split("query=")[1].split("&")[0].replace(/[+]/g, " ")
+            return q
+        },
         add_query: function () {
             this.$set(this.queries, this.query_url, {});
         },
         delete_query: function (queryname) {
-            // let old_queries = this.queries;
-            // console.log("del", queryname);
-            // console.log(old_queries);
-            // delete old_queries[queryname];
-            // console.log(old_queries);
-            // this.queries = old_queries;
             this.$delete(this.queries, queryname);
         },
         save_query: function () {

webapp/index.html

@@ -58,6 +58,10 @@
 
 
       <div class="panel" v-if="search_visible">
+      <div align="right">
+          <button @click="search_visible = !search_visible">X</button>
+
+      </div>
           <h1>Neue Suche</h1>
           <form>
             <div class="form-group">
@@ -85,13 +89,23 @@
             <a v-if="query_url" v-bind:href="query_url" target="_">Suche testen</a>
           </div>
 
-          <button @click="add_query()">Suche hinzufuegen</button>
-          <button @click="save_query()">Alle Suchen permanent speichern</button>
+          <div align="right">
+            <button @click="add_query()">Suche hinzufuegen</button>
 
+          </div>
+          
+          Bestehende Suchen:
           <div v-for="(query, url) in queries" style="font-size: 0.8em">
-              <button @click="delete_query(url)">X</button> {{url}}
+              <button @click="delete_query(url)">X</button> <i>
+                "{{display_query(url)}}"
+
+              </i>
           </div>
+            
+          <div align="right">
 
+            <button    @click="save_query()">Alle Suchen permanent speichern</button>
+          </div>
       </div>