From 33c589bc16153e148856eea64e971a13a0842bc3 Mon Sep 17 00:00:00 2001
From: kajgrant <kajgrant@gmail.com>
Date: Sun, 2 Jun 2024 00:02:55 -0700
Subject: [PATCH] initial grid setup

---
 src/App.vue        |   1 +
 src/views/Grid.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/views/Grid.vue

diff --git a/src/App.vue b/src/App.vue
index 3ef6a81..c99c2f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,6 +20,7 @@ const subscribeMessage = {
 };
 
 function websocketConnect() {
+  status.value = 'connecting';
   const socket = new WebSocket('wss://ws-feed.exchange.coinbase.com');
 
   socket.onopen = () => {
diff --git a/src/views/Grid.vue b/src/views/Grid.vue
new file mode 100644
index 0000000..a2bc53f
--- /dev/null
+++ b/src/views/Grid.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { type Status, type TickerType } from '@/types/types';
+
+const props = defineProps<{
+  tickerData: TickerType[];
+  previousData: TickerType[];
+  status: Status;
+}>();
+
+const triangleFilter = ref('filterGreen');
+
+const tickData = props.tickerData;
+const prevData = props.previousData;
+const prevFilter = triangleFilter.value;
+
+onMounted(() => {
+  if (prevData.price > tickData.price) {
+    triangleFilter.value = 'filterRed';
+  } else if (prevData.price < tickData.price) {
+    triangleFilter.value = 'filterGreen';
+  } else {
+    triangleFilter.value = prevFilter;
+  }
+});
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <div v-if="props.status == 'connecting'" class="info">
+        <h1>ETH-USD</h1>
+        <h1 class="green price">Connecting...</h1>
+      </div>
+      <div v-else-if="props.status == 'connected'" class="info">
+        <h1>{{ props.tickerData.id }} (Coinbase)</h1>
+        <div class="value">
+          <img src="@/assets/triangle.svg" class="triangle" :class="triangleFilter" />
+          <h1 class="green price">${{ props.tickerData.price }}</h1>
+        </div>
+        <h1>Volume: ${{ props.tickerData.volume }}</h1>
+      </div>
+      <div v-else class="info">
+        <h1>Stock Tracker</h1>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.info {
+  text-align: center;
+}
+
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+}
+
+.triangle {
+  height: 30px;
+  width: auto;
+  position: relative;
+  top: -7px;
+}
+
+.price {
+  vertical-align: middle;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .info {
+    text-align: left;
+  }
+}
+</style>