Skip to content

Commit

Permalink
update readme and improve error handling around .env api key
Browse files Browse the repository at this point in the history
  • Loading branch information
kajgm committed Jun 6, 2024
1 parent 01f5a26 commit 2bd6e6c
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 7 deletions.
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,28 @@ A minimal tracker for Stocks and Cryptocurrencies. Intended for use on external

## Prerequisites

Please ensure the following software is installed on your system:
1. Please ensure the following software is installed on your system:

- [Node 18.x](https://nodejs.org/en/download)

2. (Optional) To display exchange-traded stock tickers (AAPL, MSFT, etc.), create a Finanical Modeling Prep API key

- [https://site.financialmodelingprep.com/](https://site.financialmodelingprep.com/)

## Project Setup

### Install dependencies

```sh
npm install
```

### (Optional) Create a `.env` file and add your Financial Modeling Prep API key

```
VITE_VUE_APP_FMP_KEY="your_api_key"
```

### Compile and Hot-Reload for Development

```sh
Expand Down
15 changes: 12 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Grid from './views/Grid.vue';
const sktStatus = ref('CONNECTING' as StatusType);
const apiStatus = ref('CONNECTING' as StatusType);
const dataStatus = ref('CONNECTING' as StatusType);
const tickerResponse = reactive(
new Map<string, TickerType>(CRYPTO_TICKERS.concat(STOCK_TICKERS).map((e: string) => [e, DEFAULT_TICKER]))
);
Expand All @@ -18,13 +20,20 @@ onMounted(() => {
sktStatus.value = 'CONNECTED';
// Financial Modeling Prep api polling
restApiPoll(apiStatus, tickerResponse);
apiStatus.value = 'CONNECTED';
if (import.meta.env.VITE_VUE_APP_FMP_KEY) {
restApiPoll(apiStatus, tickerResponse);
apiStatus.value = 'CONNECTED';
} else {
console.log('.env file with api key not created!');
apiStatus.value = 'ERROR';
}
dataStatus.value = 'CONNECTED';
});
</script>

<template>
<Grid :tickerData="tickerResponse" :socketStatus="sktStatus" />
<Grid :tickerData="tickerResponse" :dataStatus="dataStatus" />
</template>

<style scoped>
Expand Down
9 changes: 6 additions & 3 deletions src/views/Grid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,24 @@ import { type StatusType, type TickerType } from '@/types/types';
const props = defineProps<{
tickerData: Map<string, TickerType>;
socketStatus: StatusType;
dataStatus: StatusType;
}>();
</script>

<template>
<div class="wrapper">
<div v-if="props.socketStatus == 'CONNECTING'" class="info">
<div v-if="props.dataStatus == 'CONNECTING'" class="info">
<h1>Connecting...</h1>
</div>
<div v-else-if="props.socketStatus == 'CONNECTED'" class="info">
<div v-else-if="props.dataStatus == 'CONNECTED'" class="info">
<div v-for="[id, ticker] in tickerData" :key="id" class="ticker">
<h1>{{ ticker.id }}</h1>
<div v-if="ticker.status == 'CONNECTING'">
<h1>Connecting...</h1>
</div>
<div v-else-if="ticker.status == 'ERROR'">
<h1>Error</h1>
</div>
<div v-else>
<div class="value">
<img src="@/assets/triangle.svg" class="triangle" :class="ticker.dirFilter" />
Expand Down

0 comments on commit 2bd6e6c

Please sign in to comment.