Updated sorting

webapp/app.js

@@ -1,25 +1,13 @@
 Number.prototype.currency = function() { return '$' + this.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') };
-
-function seconds_to_time(s) {
-    var duration = moment.duration(s, 'seconds');
-    return duration.format("DD-hh:mm");
-}
-
 function ts_to_remaining(ts) {
     return moment.unix(ts).fromNow();
 }
 
 
-function log() {
-    console.log('LOG >>>', arguments);
-}
-
-
-
 var app = new Vue({
     el: '#app',
     data: {
-        title: "guntrader",
+        title: "t",
         queries: {},
         debug: false,
         account: false,
@@ -44,6 +32,9 @@ var app = new Vue({
 
         this.update();
 
+        
+
+
         window.addEventListener('hashchange', function() {
             self.update()
 
@@ -77,10 +68,16 @@ var app = new Vue({
             if (this.account) {
                 console.log(this.account);
                 this.load_account();
-
             }
-            
-        
+        },
+        ordered_auctions: function () {
+            return Object.values(this.queries)
+            .map(q => Object.values(q.auctions) )
+            .flat()
+            .sort(function(a, b) {
+                return a.remaining - b.remaining;
+            });
+    
         },
         load_account: function () {
             var self = this;
@@ -106,23 +103,20 @@ var app = new Vue({
         save_account: function () {
             let account = {}
             account[this.account] = {queries: this.queries};
-            console.log(JSON.stringify(account) );
+            // console.log(JSON.stringify(account) );
             
-
             var self = this; 
             console.log("Saving");
             fetch("http://localhost:8000/save", {
               method: "POST", 
               body: JSON.stringify(account)
             }).then(res => {
-              console.log("Request complete! response:", res);
+            //   console.log("Request complete! response:", res);
             });
         }
 
     },
-    
-    watch: {
-    },
+
     
 });
 

webapp/index.html

@@ -43,10 +43,10 @@
       <div id="nav-icon">M</div>
       <input id="nav-toggle" type="checkbox">
       <div id="nav-items">
-          <button @click="search_visible = !search_visible">Sucheinstellungen</button>
-          <button @click="window.location.hash = ''; window.location.reload()">Logout</button>
+        <button @click="search_visible = !search_visible">Sucheinstellungen</button>
+        <button @click="window.location.hash = ''; window.location.reload()">Logout</button>
 
-        </div>
+      </div>
 
 
 
@@ -57,78 +57,101 @@
 
 
       <div class="panel" v-if="search_visible">
-      <div align="right">
+        <div align="right">
           <button @click="search_visible = !search_visible">X</button>
 
-      </div>
-          <h1>Neue Suche</h1>
-          <form>
-            <div class="form-group">
-              <label>Suchbegriff(e), durch Leerzeichen getrennt</label>
-              <input v-model="query.search">
-            </div>
-            <div class="form-group">
-              <label>Maximalpreis</label>
-              <input type="number" v-model="query.maxprice">
-            </div>
-            <div class="form-group">
-              <label>Mindestpreis</label>
-              <input type="number" v-model="query.minprice">
-            </div>
-            <div class="form-group">
-              <input type="checkbox" v-model="query.restricted">
-              <label>WBK noetig?</label>
-            </div>
-            <div class="form-group">
-              <label>Such-URL (Kann man alternativ von eGun-Suche kopieren)</label>
-              <input v-model="query_url">
-            </div>
-          </form>
-          <div>
-            <a v-if="query_url" v-bind:href="query_url" target="_">Suche testen</a>
+        </div>
+        <h1>Neue Suche</h1>
+        <form>
+          <div class="form-group">
+            <label>Suchbegriff(e), durch Leerzeichen getrennt</label>
+            <input v-model="query.search">
+          </div>
+          <div class="form-group">
+            <label>Maximalpreis</label>
+            <input type="number" v-model="query.maxprice">
+          </div>
+          <div class="form-group">
+            <label>Mindestpreis</label>
+            <input type="number" v-model="query.minprice">
+          </div>
+          <div class="form-group">
+            <input type="checkbox" v-model="query.restricted">
+            <label>WBK noetig?</label>
+          </div>
+          <div class="form-group">
+            <label>Such-URL (Kann man alternativ von eGun-Suche kopieren)</label>
+            <input v-model="query_url">
           </div>
+        </form>
+        <div>
+          <a v-if="query_url" v-bind:href="query_url" target="_">Suche testen</a>
+        </div>
 
-          <div align="right">
-            <button @click="add_query()">Suche hinzufuegen</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> <i>
+            "{{display_query(url)}}"
+
+          </i>
+        </div>
+
+        <div align="right">
+
+          <button @click="save_account()">Alle Suchen permanent speichern</button>
+        </div>
+      </div>
 
-          </div>
-          
-          Bestehende Suchen:
-          <div v-for="(query, url) in queries" style="font-size: 0.8em">
-              <button @click="delete_query(url)">X</button> <i>
-                "{{display_query(url)}}"
 
-              </i>
-          </div>
-            
-          <div align="right">
 
-            <button @click="save_account()">Alle Suchen permanent speichern</button>
+      <div class="panel" v-for="auction in ordered_auctions()" v-if="!search_visible"
+        v-if="auction.price != null && !auction.is_price_final">
+        <div class="grid-auto">
+          <div>
+            <img :src="auction.thumb" style="vertical-align:middle;">
           </div>
+          <div><a :href="auction.url" target="_">{{auction.desc}}</a></div>
+          <div>
+            <div class="badge">{{auction.price}} EUR</div>
+          </div>
+          <div>{{ts_to_remaining(auction.timestamp)}}</div>
+          <a v-bind:href="auction.gcal">Kalendereintrag</a>
+        </div>
       </div>
 
 
+      <div class="panel">
+        <h3>
+          Deine Suchen:
+        </h3>
 
+        <div v-for="(query, url) in queries">
 
+          Suche <i>"{{display_query(url)}}"</i>: {{Math.round(query.avg_price)}} EUR im Schnitt
+        </div>
+        <button @click="search_visible = !search_visible">Sucheinstellungen</button>
 
-      <div v-for="query in queries">
+      </div>
 
-        <div class="panel" v-for="auction in query.auctions" v-if="auction.price != null && !auction.is_price_final">
-          <div class="grid-auto">
-            <div>
-              <img :src="auction.thumb" style="vertical-align:middle;">
-            </div>
-            <div><a :href="auction.url">{{auction.desc}}</a></div>
-            <div>
-              <div class="badge">{{auction.price}} EUR</div>
-            </div>
-            <div>{{ts_to_remaining(auction.timestamp)}}</div>
-            <a v-bind:href="auction.gcal">Add to cal</a>
-          </div>
+
+      <!-- <div class="panel" v-for="auction in ordered_auctions()" v-if="!search_visible" v-if="auction.is_price_final">
+      <div class="grid-auto">
+        <div>
+          <img :src="auction.thumb" style="vertical-align:middle;">
         </div>
+        <div><a :href="auction.url" target="_">{{auction.desc}}</a></div>
+        <div>
+          <div class="badge">{{auction.price}} EUR</div>
+        </div>
+        <div>{{ts_to_remaining(auction.timestamp)}}</div>
+        <a v-bind:href="auction.gcal">Kalendereintrag</a>
       </div>
+    </div> -->
 
-      
       <template>
         <div class="panel" v-if="!account">
           {{account}}
@@ -136,6 +159,10 @@
           denke Dir einen aus.
           <input v-model="new_account" v-on:keyup.enter="window.location.hash = new_account;">
           <button @click="window.location.hash = new_account">OK</button>
+          <div>
+            Tip: der Accountname sollte einem Passwort aehnlich sein wenn Du nicht willst dass jemand anderes Deine
+            Suchen sieht.
+          </div>
         </div>
 
       </template>
@@ -148,11 +175,9 @@
 
 <!-- Moment.js library -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
-
 <!-- moment-duration-format plugin -->
 <script
   src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
-
 <script defer src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
 <script defer src="app.js"></script>
 
@@ -160,7 +185,9 @@
   :root {
     --main-color: #2e442f;
   }
+
   .nav-items {
-    margin-left:auto; margin-right:0;
+    margin-left: auto;
+    margin-right: 0;
   }
 </style>