Big refactor

2022-08-18 17:08:05 +02:00
parent 0520e7641f
commit 92cee16cc8
56 changed files with 475 additions and 293 deletions
@@ -0,0 +1,59 @@
+{{template "base" .}} 
+{{define "title"}}Utenti &bull; PHC{{end}}
+{{define "body"}}
+<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
+<script src="/public/js/utenti.min.js"></script>
+<section x-data="utenti">
+    <h1>
+        <i class="fas fa-users"></i>
+        Lista degli Utenti
+    </h1>
+    <p>
+        Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o
+        username di un utente per filtrare la lista in tempo reale. Altrimenti di base in cima
+        compariranno gli utenti con più "follower".
+    </p>
+    <div class="search">
+        <div class="compound padded">
+            <div class="icon" title="Ordina per">
+                <i class="fas fa-sort"></i>
+            </div>
+            <div class="divider"></div>
+            <select x-model="sortMode" @click="updateSortMode()">
+                <option value="chronological">Cronologico</option>
+                <option value="name">Nome</option>
+                <option value="surname">Cognome</option>
+            </select>
+        </div>
+        <div class="compound">
+            <input type="text" x-model="searchField" @input="updateSearch()" placeholder="Cerca..." autocomplete="off" />
+            <button class="icon" title="In realtà questo tasto è finto">
+                <i class="fas fa-search"></i>
+            </button>
+        </div>
+    </div>
+    <div class="user-list card-list">
+        <template x-for="entry in searchResults" :key="entry.item.uid">
+            <div class="user-item card">
+                <a class="full-name" :href="'{{ $.Config.UserPagesBaseUrl }}' + entry.item.uid" x-text="
+                    sortMode === 'surname' ? 
+                        entry.item.cognome + ' ' + entry.item.nome : 
+                        entry.item.nome + ' ' + entry.item.cognome
+                "></a>
+                <template x-if="entry.item.macchinista">
+                    <div class="icon" title="Macchinista">
+                        <i class="fas fa-wrench"></i>
+                    </div>
+                </template>
+                <!-- <template x-if="entry.score">
+                    <span x-text="entry.score"></span>
+                </template> -->
+            </div>
+        </template>
+        <div class="spinner" x-ref="spinner" x-show="searchResults.length < searchResultsBuffer.length">
+            <i class="fas fa-hourglass"></i>
+        </div>
+    </div>
+</section>
+{{end}}