From f42c6dc028598a3491f258a1fb62248548230601 Mon Sep 17 00:00:00 2001
From: spekulaas <ryan@aterve.nl>
Date: Fri, 4 Feb 2022 15:55:44 +0100
Subject: [PATCH] ranking added

---
 .../src/app/valuesRanking/valuesRanking.page.html      | 10 ++++++++++
 .../src/app/valuesRanking/valuesRanking.page.scss      |  5 ++++-
 .../src/app/valuesRanking/valuesRanking.page.ts        |  5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.html b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.html
index f4244d3..e83f332 100644
--- a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.html
+++ b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.html
@@ -12,6 +12,16 @@
     <img class="logo_light" src="assets/logo-authentes-white.png" />
   </div>
   
+  <ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
+    <!-- Default reorder icon, end aligned items -->
+    <ion-item *ngFor="let card of this.game.cardset; let i = index">
+      <ion-label>
+        <span class="ranking-number">{{ i + 1 }}.</span> {{ card.title }}
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+
 </ion-content>
 
 
diff --git a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.scss b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.scss
index 328cdb8..9eadf8b 100644
--- a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.scss
+++ b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.scss
@@ -7,4 +7,7 @@
   transform: translateY(-50%);
 }
 
-
+.ranking-number {
+  color: var(--ion-color-primary);
+  font-weight: bold;
+}
diff --git a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.ts b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.ts
index f5beaea..944b9aa 100644
--- a/AuthentesApp/src/app/valuesRanking/valuesRanking.page.ts
+++ b/AuthentesApp/src/app/valuesRanking/valuesRanking.page.ts
@@ -12,4 +12,9 @@ export class ValuesRankingPage {
 
   constructor(private router: Router, private game: GameService, public alert: AlertService) {}
 
+  reorderItems(ev) {
+    const itemMove = this.game.cardset.splice(ev.detail.from, 1)[0];
+    this.game.cardset.splice(ev.detail.to, 0, itemMove);
+    ev.detail.complete();
+  }
 }