Frontend: Proof-of-concept for relative label popularity

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

frontend/src/css/photos.css

@@ -52,6 +52,12 @@
     bottom: 4px;
 }
 
+#photoprism .p-labels-cards .p-label-count {
+    position: absolute;
+    left: 12px;
+    top: 12px;
+}
+
 #photoprism .p-clipboard {
     right: 8px;
     bottom: 12px;

frontend/src/model/label.js

@@ -14,10 +14,10 @@ class Label extends RestModel {
             CustomSlug: "",
             LabelName: "",
             LabelPriority: 0,
-            LabelCount: 0,
             LabelFavorite: false,
             LabelDescription: "",
             LabelNotes: "",
+            PhotoCount: 0,
             Links: [],
         };
     }
@@ -86,6 +86,18 @@ class Label extends RestModel {
         return Api.delete(this.getEntityResource() + "/like");
     }
 
+    /* popularity(max) {
+        if (!this.PhotoCount) {
+            return 0;
+        }
+
+        if (this.PhotoCount >= max) {
+            return 100;
+        }
+
+        return Math.ceil(max / this.PhotoCount);
+    } */
+
     static getCollectionResource() {
         return "labels";
     }

frontend/src/pages/labels.vue

@@ -86,6 +86,16 @@
                                                              color="accent lighten-5"></v-progress-circular>
                                     </v-layout>
 
+                                    <!-- v-progress-circular
+                                            :rotate="270"
+                                            :size="20"
+                                            :width="10"
+                                            :value="label.popularity(config.count.labelMaxPhotos)"
+                                            color="accent lighten-3"
+                                            class="p-label-count"
+                                    >
+                                    </v-progress-circular -->
+
                                     <v-btn v-if="hover || selection.includes(label.LabelUUID)" :flat="!hover" :ripple="false"
                                            icon large absolute
                                            :class="selection.includes(label.LabelUUID) ? 'p-label-select' : 'p-label-select opacity-50'"
@@ -166,6 +176,7 @@
             const settings = {};
 
             return {
+                config: this.$config.values,
                 subscriptions: [],
                 listen: false,
                 dirty: false,