From 3ec36603c8195744ae559eeef984e772633ac390 Mon Sep 17 00:00:00 2001
From: fireworks88 <throwaway.546372819@protonmail.com>
Date: Tue, 27 Jul 2021 11:56:18 +0200
Subject: [PATCH] sneed

---
 drama/templates/award_modal.html | 152 +++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 drama/templates/award_modal.html

diff --git a/drama/templates/award_modal.html b/drama/templates/award_modal.html
new file mode 100644
index 0000000000..15d7a68461
--- /dev/null
+++ b/drama/templates/award_modal.html
@@ -0,0 +1,152 @@
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+
+<input type="hidden" id="awardTarget" value="" />
+<div class="modal fade" id="awardModal" tabindex="-1" role="dialog" aria-labelledby="awardModalTitle" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">Give Award</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true"><i class="far fa-times"></i></span>
+				</button>
+			</div>
+			<div id="awardModalBody" class="modal-body">
+				<form v-if="loaded" id="sex" class="pt-3 pb-0">
+					<div class="card-columns awards-wrapper">
+						<div v-for="(award, index) in awards" :key="index">
+							<input type="radio" :id="index" :value="index" v-model="picked" :disabled="award.owned < 1">
+							<label class="card" :for="index" :class="{ disabled: award.owned < 1 }">
+								<i :class="award.icon+' '+award.color"></i><br />
+								<span class="d-block pt-2" style="font-weight: bold; font-size: 14px;">[[ award.title ]]</span>
+								<span class="text-muted">[[ award.owned ]] owned</span>
+							</label>
+						</div>
+					</div>
+					<div v-if="picked !== null">
+						<div class="award-desc p-3">
+							<i style="font-size: 35px;" :class="pickedAward.icon+' '+pickedAward.color"></i>
+							<div style="margin-left: 15px;">
+								<strong>[[ pickedAward.title ]] Award</strong><br />
+								<span class="text-muted">[[ pickedAward.description ]]</span>
+							</div>
+						</div>
+						<label for="note" class="pt-4">Note (optional):</label>
+						<textarea id="note" name="note" v-model="note" class="form-control" placeholder="Note to include in award notification"></textarea>
+					</div>
+				</form>
+				<div v-else-if="error" class="p-5 text-center">
+					<h4>Failed to fetch awards</h4>
+					<button class="btn btn-primary">Retry</button>
+				</div>
+				<div v-else class="p-5 text-center">
+					<h4>Loading...</h4>
+				</div>
+			</div>
+		 <div class="modal-footer">
+			<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
+			<button v-if="pending" class="btn btn-warning" type="button" disabled>
+  				<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  				Gifting...
+			</button>
+			<button v-else type="submit" class="btn btn-warning" id="awardButton" @click="submit" :disabled="pickedAward === null">Give Award</button>
+		</div>
+	</div>
+</div>
+</div>
+
+<style>
+	.awards-wrapper input[type="radio"] {
+		display: none;
+	}
+
+	.awards-wrapper label {
+		cursor: pointer;
+		padding: 15px;
+		text-align: center;
+		text-transform: none!important;
+	}
+
+	.awards-wrapper label i {
+		font-size: 45px;
+	}
+
+	.awards-wrapper label.disabled {
+		opacity: 0.6;
+	}
+
+	.awards-wrapper label:hover {
+		/*background-color: rgba(173, 226, 255, 0.7)!important;*/
+		background-color: var(--primary)!important;
+		background-opacity: 0.4;
+	}
+
+	.awards-wrapper input[type="radio"]:checked+label {
+        /*background-color: rgba(173, 226, 255, 0.9)!important;*/
+        background-color: var(--primary)!important;
+        background-opacity: 0.9;
+    }
+
+    .award-desc {
+    	border-radius: 5px;
+    	background-color: rgba(221, 221, 221, 0.23);
+    	display: flex;
+    }
+</style>
+
+<script>
+	new Vue({
+		el: "#awardModal",
+		delimiters: ['[[', ']]'],
+		data: {
+			loaded: false,
+			error: false,
+			pending: false,
+			awards: [],
+			picked: null,
+			note: ""
+		},
+		computed: {
+			pickedAward: function() {
+				if (this.picked !== null) {
+					return this.awards[this.picked];
+				} else {
+					return null;
+				}
+			}
+		},
+		methods: {
+			async submit() {
+				this.pending = true;
+
+				const target = document.getElementById("awardTarget").value;
+
+				const f = new FormData();
+				f.append("formkey", formkey());
+				f.append("kind", this.pickedAward.kind || "");
+				f.append("note", this.note)
+
+				let response = await fetch(target, {
+					method: "PUT",
+					body: f
+				});
+
+				if (response.ok) {
+					location.reload();
+				} else {
+					this.pending = false;
+					let s = await response.json();
+					alert(s.error);
+				}
+			}
+		},
+		mounted() {
+			fetch('/api/awards')
+				.then(response => response.json())
+				.then(json => {
+					this.awards = json;
+				});
+
+			this.loaded = true;
+		}
+	})
+</script>
\ No newline at end of file