From 3352a7b635fc776089465ac66ce355a09b1ec7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ma=C5=84czak?=
 <56172798+jakubmanczak@users.noreply.github.com>
Date: Sun, 1 Aug 2021 16:08:04 +0200
Subject: [PATCH] use card component in botcard & add onlineindicator prot

---
 src/components/BotCard.vue | 155 +++++++++++++++----------------------
 src/components/Card.vue    |  30 +++++++
 src/layouts/Default.vue    |   1 +
 src/pages/Index.vue        |  10 ++-
 4 files changed, 99 insertions(+), 97 deletions(-)

diff --git a/src/components/BotCard.vue b/src/components/BotCard.vue
index 8cd2021..f31294d 100644
--- a/src/components/BotCard.vue
+++ b/src/components/BotCard.vue
@@ -1,87 +1,43 @@
 <template>
 	<div v-if="status">
-		<div class="card">
-			<div class="titleCard">
-				<img
-					:src="
-						`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
-							status.mainInfo.avatar
-						}.png?size=64`
-					"
-					alt="Gractwo bot current avatar"
-				/>
-				<h3>
-					{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }}
-				</h3>
-			</div>
-		</div>
-		<div class="card">
-			<div class="titleCard">
-				<img
-					:src="
-						`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
-							status.canaryInfo.avatar
-						}.png?size=64`
-					"
-					alt="Gractwo Canary bot current avatar"
-				/>
-				<h3>
-					{{
-						status.canaryInfo.username + '#' + status.canaryInfo.discriminator
-					}}
-				</h3>
-			</div>
-		</div>
-		<div class="card">
-			<h3>bot card</h3>
-			<p>
-				Bot Name:
-				{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }}
-				<br />
-				Bot ID: {{ status.mainInfo.id }} <br />
-				Bot Avatar:
-				<img
-					:src="
-						`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
-							status.mainInfo.avatar
-						}.png?size=64`
-					"
-					alt=""
-					v-if="status"
-				/>
-				<br />
-				Bot Info: {{ status.mainInfo }}
-			</p>
-		</div>
-		<div class="card">
-			<h3>sub bot card</h3>
-			<p>
-				Bot Name:
-				{{ status.canaryInfo.username + '#' + status.canaryInfo.discriminator }}
-				<br />
-				Bot ID: {{ status.canaryInfo.id }} <br />
-				Bot Avatar:
-				<img
-					:src="
-						`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
-							status.canaryInfo.avatar
-						}.png?size=64`
-					"
-					alt=""
-					v-if="status"
-				/>
-				<br />
-				Bot Info: {{ status.canaryInfo }}
-			</p>
-		</div>
+		<Card
+			tabindex="0"
+			:name="
+				`${status.mainInfo.username + '#' + status.mainInfo.discriminator}`
+			"
+			:photoDyn="
+				`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
+					status.mainInfo.avatar
+				}.png?size=128`
+			"
+			description="Bot obsługujący serwer discord Gractwa."
+			onlineIndicator="1"
+		/>
+		<Card
+			tabindex="0"
+			:name="
+				`${status.canaryInfo.username + '#' + status.canaryInfo.discriminator}`
+			"
+			:photoDyn="
+				`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
+					status.canaryInfo.avatar
+				}.png?size=128`
+			"
+			description="Bot zastępczy do testowania nowych funkcji."
+			onlineIndicator="0"
+		/>
 	</div>
 </template>
 
 <script>
 import axios from 'axios';
+import Card from '~/components/Card.vue';
 
 export default {
 	name: 'BotCard',
+	components: {
+		Card,
+	},
 	data() {
 		return {
 			status: null,
@@ -104,24 +60,37 @@ export default {
 };
 </script>
 
+//
 <style lang="scss" scoped>
-.card {
-	display: inline-block;
-	border: 1px solid var(--gray);
-	border-radius: 4px;
-	padding: 1rem;
-	margin: 1rem 0.2rem;
-	width: 100%;
-	transition-duration: var(--trandur);
-	.titleCard {
-		display: flex;
-		flex-direction: row;
-		justify-content: baseline;
-	}
-	&:hover,
-	&:focus {
-		border: 1px solid transparent;
-		box-shadow: 0 0 10px black;
-	}
-}
+// .card {
+// 	display: inline-block;
+// 	border: 1px solid var(--gray);
+// 	border-radius: 4px;
+// 	padding: 1rem;
+// 	margin: 1rem 0.2rem;
+// 	width: 100%;
+// 	transition-duration: var(--trandur);
+// 	.cardInner {
+// 		display: flex;
+// 		flex-direction: row;
+// 		.cardTitle {
+// 			display: flex;
+// 			align-items: baseline;
+// 			.botOnlineStatus {
+// 				width: 0.5rem;
+// 				height: 0.5rem;
+// 				background-color: var(--gray);
+// 				margin-left: 0.5rem;
+// 				border-radius: 50%;
+// 				margin-bottom: 0.2rem;
+// 			}
+// 		}
+// 	}
+// 	&:hover,
+// 	&:focus {
+// 		border: 1px solid transparent;
+// 		box-shadow: 0 0 10px black;
+// 	}
+// }
+//
 </style>
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 5d06c54..0964627 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -10,6 +10,12 @@
 					v-if="photo"
 					width="128"
 				/>
+				<img
+					:src="`${photoDyn}`"
+					alt="Dynamic photo"
+					v-if="photoDyn"
+					style="width: 128px"
+				/>
 			</div>
 			<div class="cardInnerInfo">
 				<div class="cardInnerInfoTitle">
@@ -51,6 +57,16 @@
 						<i class="fab fa-discord" />
 						{{ discord }}
 					</a>
+					<div
+						class="cardOnlineIndicator"
+						v-tooltip="`Offline.`"
+						v-if="onlineIndicator == 0"
+					/>
+					<div
+						class="cardOnlineIndicator isOnline"
+						v-tooltip="`Online`"
+						v-if="onlineIndicator == 1"
+					/>
 				</div>
 			</div>
 		</div>
@@ -64,6 +80,7 @@ export default {
 		name: String,
 		nickname: String,
 		photo: String,
+		photoDyn: String,
 		description: String,
 		external: String,
 		externalTooltip: String,
@@ -72,6 +89,7 @@ export default {
 		twitter: String,
 		facebook: String,
 		discord: String,
+		onlineIndicator: Number,
 	},
 	methods: {
 		copyDiscord: function() {
@@ -162,6 +180,18 @@ export default {
 						color: var(--black);
 					}
 				}
+				.cardOnlineIndicator {
+					background-color: var(--graytext);
+					width: 0.5rem;
+					height: 0.5rem;
+					// margin: 0.5rem;
+					// background-color: var(--graytext);
+					border-radius: 50%;
+					align-self: center;
+					&.isOnline {
+						background-color: var(--green);
+					}
+				}
 			}
 		}
 	}
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index d2189a3..0dfc851 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -23,6 +23,7 @@ query {
 	--red: #fb636b;
 	--light-red: rgba(251, 99, 107, 0.25);
 	--blue: #61f2ea;
+	--green: #3ded97;
 	--radius: 6px;
 	--trandur: 0.1s;
 }
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 2d24420..790c513 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -11,7 +11,7 @@
 				</div>
 			</g-link>
 			<p style="text-align: center">
-				Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać.
+				<!-- Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać. -->
 			</p>
 			<div class="header-buttons">
 				<g-link to="/discord" target="_blank">Discord</g-link>
@@ -112,15 +112,17 @@
 		<section>
 			<h2>Status Bota Discordowego</h2>
 			<p>
-				Sprawdź jak się ma nasz bot discordowy - in progress!
+				Sprawdź jak się ma nasz bot discordowy - w trakcie prac. Nie
+				odzwierciedla stanu rzeczy.
 			</p>
 			<BotCard />
 		</section>
 		<section>
 			<h3>Gractwo 2020-2021</h3>
 			<p>
-				Napisane i hostowane przez <a href="#jamesen">Jakuba Mańczaka</a>. Kod
-				dostępny na <a href="/github" target="_blank">GitHubie</a>.
+				Napisane i hostowane przez
+				<g-link to="/jamesen-external">Jakuba Mańczaka</g-link>. Kod dostępny na
+				<a href="/github" target="_blank">GitHubie</a>.
 			</p>
 		</section>
 	</main>