mirror of
https://github.com/jcreek/BankStatementAnalyser.git
synced 2026-07-12 18:43:49 +00:00
restart fresh
This commit is contained in:
Josh Creek
@@ -1,14 +0,0 @@
|
||||
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
|
||||
ARG VARIANT=16-bullseye
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
&& apt-get -y install --no-install-recommends inotify-tools
|
||||
|
||||
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
||||
# ARG EXTRA_NODE_VERSION=10
|
||||
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
|
||||
|
||||
# [Optional] Uncomment if you want to install more global node packages
|
||||
# RUN su node -c "npm install -g <your-package-list -here>"
|
||||
@@ -1,17 +0,0 @@
|
||||
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
|
||||
ARG VARIANT=16-bullseye
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
|
||||
|
||||
# Install tslint, typescript. eslint is installed by javascript image
|
||||
ARG NODE_MODULES="tslint-to-eslint-config typescript"
|
||||
COPY library-scripts/meta.env /usr/local/etc/vscode-dev-containers
|
||||
RUN su node -c "umask 0002 && npm install -g ${NODE_MODULES}" \
|
||||
&& npm cache clean --force > /dev/null 2>&1
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
||||
# ARG EXTRA_NODE_VERSION=10
|
||||
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
|
||||
@@ -1,51 +0,0 @@
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
|
||||
// https://github.com/microsoft/vscode-dev-containers/tree/v0.238.0/containers/typescript-node
|
||||
{
|
||||
"name": "Node.js & TypeScript",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
// Update 'VARIANT' to pick a Node version: 18, 16, 14.
|
||||
// Append -bullseye or -buster to pin to an OS version.
|
||||
// Use -bullseye variants on local on arm64/Apple Silicon.
|
||||
"args": {
|
||||
"VARIANT": "16-bullseye"
|
||||
}
|
||||
},
|
||||
|
||||
// Configure tool-specific properties.
|
||||
"customizations": {
|
||||
// Configure properties specific to VS Code.
|
||||
"vscode": {
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"formulahendry.auto-rename-tag",
|
||||
"EditorConfig.EditorConfig",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"bierner.github-markdown-preview",
|
||||
"eamodio.gitlens",
|
||||
"xabikos.JavaScriptSnippets",
|
||||
"ritwickdey.LiveServer",
|
||||
"yzhang.markdown-all-in-one",
|
||||
"bierner.markdown-emoji",
|
||||
"bierner.markdown-footnotes",
|
||||
"bierner.markdown-preview-github-styles",
|
||||
"bierner.markdown-yaml-preamble",
|
||||
"DavidAnson.vscode-markdownlint",
|
||||
"PKief.material-icon-theme",
|
||||
"christian-kohler.npm-intellisense",
|
||||
"christian-kohler.path-intellisense",
|
||||
"esbenp.prettier-vscode",
|
||||
"gencer.html-slim-scss-css-class-completion"
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [3000],
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "npm install",
|
||||
|
||||
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "node"
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
dist
|
||||
node_modules
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"airbnb-base",
|
||||
"plugin:import/errors",
|
||||
"plugin:import/warnings",
|
||||
"plugin:import/typescript"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"rules": {
|
||||
"import/extensions": [
|
||||
"error",
|
||||
"ignorePackages",
|
||||
{
|
||||
"js": "never",
|
||||
"jsx": "never",
|
||||
"ts": "never",
|
||||
"tsx": "never"
|
||||
}
|
||||
],
|
||||
"quotes": [2, "single", { "avoidEscape": true }]
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
* text=auto eol=lf
|
||||
@@ -1,2 +0,0 @@
|
||||
dist
|
||||
node_modules
|
||||
Vendored
-19
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch via NPM",
|
||||
"request": "launch",
|
||||
"runtimeArgs": [
|
||||
"run",
|
||||
"dev"
|
||||
],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
],
|
||||
"type": "node",
|
||||
"stopOnEntry": true,
|
||||
}
|
||||
]
|
||||
}
|
||||
Generated
-19172
File diff suppressed because it is too large
Load Diff
@@ -1,54 +0,0 @@
|
||||
{
|
||||
"name": "BankStatementAnalyser",
|
||||
"version": "1.5.0",
|
||||
"description": "A tiny web app to display graphs and stats from a bank statement/csv/google sheet.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"dev": "webpack serve --hot --config webpack.dev.js",
|
||||
"lint": "eslint --ignore-path .eslintignore --ext .js,.ts ."
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jcreek/BankStatementAnalyser"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "jcreek",
|
||||
"license": "GNU General Public License v3.0",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.5",
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@babel/preset-typescript": "^7.17.12",
|
||||
"@typescript-eslint/eslint-plugin": "^5.28.0",
|
||||
"@typescript-eslint/parser": "^5.28.0",
|
||||
"babel-loader": "^8.2.5",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.17.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.52.3",
|
||||
"sass-loader": "^13.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"typescript": "^4.7.3",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.9.2",
|
||||
"webpack-webmanifest-loader": "^2.0.2",
|
||||
"workbox-cli": "^6.5.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/chart.js": "^2.9.37",
|
||||
"chart.js": "^4.1.0",
|
||||
"chroma-js": "^2.4.2",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"webpack-manifest-plugin": "^5.0.0",
|
||||
"webpack-merge": "^5.8.0",
|
||||
"workbox-navigation-preload": "^6.5.4",
|
||||
"workbox-precaching": "^6.5.4",
|
||||
"workbox-routing": "^6.5.4",
|
||||
"workbox-strategies": "^6.5.4",
|
||||
"workbox-webpack-plugin": "^6.5.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 540 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"name": "BankStatementAnalyser",
|
||||
"short_name": "BSA",
|
||||
"icons": [
|
||||
{
|
||||
"src": "android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone",
|
||||
"start_url": "/"
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export const transactions: Array<BankTransaction> = [];
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { transactions } from "./bankData";
|
||||
import Chart from 'chart.js/auto';
|
||||
import * as chroma from 'chroma-js';
|
||||
|
||||
export default function generateCharts(): void {
|
||||
// const filter: Filter = { year: 2022, category: 'Eating out', excludeIncome: true};
|
||||
const filter: Filter = { year: 2022, excludeIncome: true};
|
||||
// const filter: Filter = { year: 2022, month: 1, excludeIncome: true};
|
||||
const chartData = getChartData(transactions, filter);
|
||||
console.log('chartData', chartData);
|
||||
|
||||
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
|
||||
const myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: chartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getRandomColor(): string {
|
||||
// Generate a random color in hexadecimal format
|
||||
const color = Math.floor(Math.random() * 0x1000000).toString(16);
|
||||
return '#' + ('000000' + color).slice(-6);
|
||||
}
|
||||
|
||||
function getChartData(transactions: BankTransaction[], filters: { year?: number, month?: number, category?: string, excludeIncome?: boolean } | null | undefined): ChartData {
|
||||
// Return an empty chart data object if no filters are provided
|
||||
if (!filters) {
|
||||
return {
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
}
|
||||
|
||||
// Generate a color scale using the chroma-js library, with the number of colors equal to the number of categories
|
||||
const categories = new Set<string>();
|
||||
for (const transaction of transactions) {
|
||||
categories.add(transaction.category);
|
||||
}
|
||||
const colorScale = chroma.scale('Spectral').mode('hsl').colors(categories.size);
|
||||
|
||||
// Filter the transactions based on the specified filters
|
||||
const filteredTransactions = transactions.filter(transaction => {
|
||||
if (filters.year && transaction.dateYear !== filters.year) {
|
||||
return false;
|
||||
}
|
||||
if (filters.month && transaction.dateMonth !== filters.month) {
|
||||
return false;
|
||||
}
|
||||
if (filters.category && transaction.category !== filters.category) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Group the transactions by year or month, depending on the filters
|
||||
const groupedTransactions: { [key: string]: BankTransaction[] } = {};
|
||||
if (filters.year && !filters.month) {
|
||||
// Group the transactions by month
|
||||
for (const transaction of filteredTransactions) {
|
||||
if (filters.excludeIncome && transaction.amount < 0) {
|
||||
continue; // Skip transactions with a positive amount if excludeIncome is true
|
||||
}
|
||||
const month = `${transaction.dateYear}-${transaction.dateMonth}`;
|
||||
if (!groupedTransactions[month]) {
|
||||
groupedTransactions[month] = [];
|
||||
}
|
||||
groupedTransactions[month].push(transaction);
|
||||
}
|
||||
} else {
|
||||
// Group the transactions by year
|
||||
for (const transaction of filteredTransactions) {
|
||||
if (filters.excludeIncome && transaction.amount < 0) {
|
||||
continue; // Skip transactions with a positive amount if excludeIncome is true
|
||||
}
|
||||
const year = transaction.dateYear.toString();
|
||||
if (!groupedTransactions[year]) {
|
||||
groupedTransactions[year] = [];
|
||||
}
|
||||
groupedTransactions[year].push(transaction);
|
||||
}
|
||||
}
|
||||
|
||||
// Create the chart data object
|
||||
const chartData: ChartData = {
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
|
||||
// Add a dataset for each category
|
||||
let i = 0;
|
||||
categories.forEach((category: string) => {
|
||||
chartData.datasets.push({
|
||||
label: category,
|
||||
data: [],
|
||||
backgroundColor: colorScale[i % colorScale.length], // Use a color from the color scale,
|
||||
borderColor: 'black',
|
||||
borderWidth: 2
|
||||
});
|
||||
i++;
|
||||
});
|
||||
|
||||
// Populate the chart data with the transaction amounts
|
||||
for (const key of Object.keys(groupedTransactions)) {
|
||||
chartData.labels.push(key);
|
||||
const transactions = groupedTransactions[key];
|
||||
for (let i = 0; i < chartData.datasets.length; i++) {
|
||||
chartData.datasets[i].data.push(0);
|
||||
for (const transaction of transactions) {
|
||||
if (transaction.category === chartData.datasets[i].label) {
|
||||
chartData.datasets[i].data[chartData.labels.length - 1] += transaction.amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return chartData;
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import loadServiceWorker from './loadServiceWorker';
|
||||
import loadBankData from './loadBankData';
|
||||
import generateCharts from './generateCharts';
|
||||
|
||||
require('./assets/favicon.ico');
|
||||
require('./assets/android-chrome-192x192.png');
|
||||
require('./assets/android-chrome-512x512.png');
|
||||
require('./assets/apple-touch-icon.png');
|
||||
require('./assets/favicon-16x16.png');
|
||||
require('./assets/favicon-32x32.png');
|
||||
require('./styles/main.scss');
|
||||
require('./styles/buttons.scss');
|
||||
require('./styles/modal.scss');
|
||||
require('./styles/spinner.scss');
|
||||
|
||||
if (localStorage.hasOwnProperty('bankData')) {
|
||||
loadBankData(JSON.parse(localStorage.getItem('bankData')).values);
|
||||
generateCharts();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
loadServiceWorker();
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { transactions } from "./bankData";
|
||||
|
||||
export default function loadBankData(data: Array<any>):void {
|
||||
// Set bankData array to be whatever this new data is
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
const dateParts: Array<string> = data[index][0].split("/");
|
||||
const date: Date = new Date(Number(dateParts[2]), Number(dateParts[1])-1, Number(dateParts[0])); // JS months are zero-indexed
|
||||
const year: number = date.getFullYear();
|
||||
const month: number = date.getMonth();
|
||||
const day: number = date.getDay();
|
||||
|
||||
const transaction: BankTransaction = {
|
||||
date: data[index][0],
|
||||
dateYear: year,
|
||||
dateMonth: month + 1, // JS months are zero-indexed
|
||||
dateDay: day,
|
||||
time: data[index][1],
|
||||
type: data[index][2],
|
||||
name: data[index][3],
|
||||
category: data[index][5],
|
||||
amount: Number(data[index][6]) * -1, // Invert money out being negative and money in being positive
|
||||
currency: data[index][7],
|
||||
localAmount: Number(data[index][8]) * -1, // Invert money out being negative and money in being positive
|
||||
localCurrency: data[index][9],
|
||||
};
|
||||
|
||||
transactions.push(transaction);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
export default function loadServiceWorker() {
|
||||
let deferredPrompt;
|
||||
|
||||
window.addEventListener('beforeinstallprompt', (e) => {
|
||||
const installApp = document.getElementById('install-app-btn-container');
|
||||
|
||||
installApp.addEventListener('click', async () => {
|
||||
if (deferredPrompt !== null) {
|
||||
deferredPrompt.prompt();
|
||||
const { outcome } = await deferredPrompt.userChoice;
|
||||
if (outcome === 'accepted') {
|
||||
deferredPrompt = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('install-app-btn-container').style.display = 'block';
|
||||
deferredPrompt = e;
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/service-worker.js');
|
||||
});
|
||||
|
||||
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||||
document.getElementById('install-app-btn-container').style.display = 'none';
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { precacheAndRoute } from 'workbox-precaching';
|
||||
import * as navigationPreload from 'workbox-navigation-preload';
|
||||
import { NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
|
||||
import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
|
||||
|
||||
// Precache the manifest
|
||||
// eslint-disable-next-line no-underscore-dangle, no-restricted-globals
|
||||
precacheAndRoute(self.__WB_MANIFEST);
|
||||
|
||||
const navigationRoute = new NavigationRoute(new NetworkFirst({
|
||||
cacheName: 'navigations',
|
||||
}));
|
||||
|
||||
const imageAssetRoute = new Route(({ request }) => request.destination === 'image', new CacheFirst({
|
||||
cacheName: 'image-assets',
|
||||
}));
|
||||
|
||||
registerRoute(navigationRoute);
|
||||
registerRoute(imageAssetRoute);
|
||||
|
||||
registerRoute(
|
||||
({ url }) => url.origin === 'https://fonts.googleapis.com',
|
||||
new StaleWhileRevalidate({
|
||||
cacheName: 'google-fonts-stylesheets',
|
||||
}),
|
||||
);
|
||||
@@ -1,185 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-EZ2WT7NQMK"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-EZ2WT7NQMK');
|
||||
</script> -->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A tiny web app to display graphs and stats from a bank statement/csv/google sheet.">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar-container">
|
||||
<div class="topbar-items"><h1><a href="/">Bank Statement Analyser</a></h1></div>
|
||||
<p id="install-app-btn-container" class="topbar-items">
|
||||
<button id="install-offline-app" class="button button-black" role="button">
|
||||
<span>Install the app (you can even use it offline!)</span>
|
||||
</button>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<p>Sheets API Quickstart</p>
|
||||
|
||||
<!--Add buttons to initiate auth sequence and sign out-->
|
||||
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
|
||||
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
|
||||
|
||||
<pre id="content" style="white-space: pre-wrap;"></pre>
|
||||
|
||||
<div>
|
||||
<canvas id="myChart"></canvas>
|
||||
</div>
|
||||
|
||||
<footer class="footer-container">
|
||||
<hr>
|
||||
<span class="footer-items">Copyright © 2022 Josh Creek</span>
|
||||
<!-- <span> | </span> -->
|
||||
<!-- <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span> -->
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* exported gapiLoaded */
|
||||
/* exported gisLoaded */
|
||||
/* exported handleAuthClick */
|
||||
/* exported handleSignoutClick */
|
||||
|
||||
// TODO(developer): Set to client ID and API key from the Developer Console
|
||||
const CLIENT_ID = '<YOUR_CLIENT_ID>';
|
||||
const API_KEY = '<YOUR_API_KEY>';
|
||||
|
||||
// Discovery doc URL for APIs used by the quickstart
|
||||
const DISCOVERY_DOC = 'https://sheets.googleapis.com/$discovery/rest?version=v4';
|
||||
|
||||
// Authorization scopes required by the API; multiple scopes can be
|
||||
// included, separated by spaces.
|
||||
const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.readonly';
|
||||
|
||||
let tokenClient;
|
||||
let gapiInited = false;
|
||||
let gisInited = false;
|
||||
|
||||
document.getElementById('authorize_button').style.visibility = 'hidden';
|
||||
document.getElementById('signout_button').style.visibility = 'hidden';
|
||||
|
||||
/**
|
||||
* Callback after api.js is loaded.
|
||||
*/
|
||||
function gapiLoaded() {
|
||||
gapi.load('client', intializeGapiClient);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback after the API client is loaded. Loads the
|
||||
* discovery doc to initialize the API.
|
||||
*/
|
||||
async function intializeGapiClient() {
|
||||
await gapi.client.init({
|
||||
apiKey: API_KEY,
|
||||
discoveryDocs: [DISCOVERY_DOC],
|
||||
});
|
||||
gapiInited = true;
|
||||
maybeEnableButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback after Google Identity Services are loaded.
|
||||
*/
|
||||
function gisLoaded() {
|
||||
tokenClient = google.accounts.oauth2.initTokenClient({
|
||||
client_id: CLIENT_ID,
|
||||
scope: SCOPES,
|
||||
callback: '', // defined later
|
||||
});
|
||||
gisInited = true;
|
||||
maybeEnableButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables user interaction after all libraries are loaded.
|
||||
*/
|
||||
function maybeEnableButtons() {
|
||||
if (gapiInited && gisInited && !localStorage.hasOwnProperty('bankData')) {
|
||||
document.getElementById('authorize_button').style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign in the user upon button click.
|
||||
*/
|
||||
function handleAuthClick() {
|
||||
tokenClient.callback = async (resp) => {
|
||||
if (resp.error !== undefined) {
|
||||
throw (resp);
|
||||
}
|
||||
document.getElementById('signout_button').style.visibility = 'visible';
|
||||
document.getElementById('authorize_button').innerText = 'Refresh Google Sheets data';
|
||||
await listMajors();
|
||||
};
|
||||
|
||||
if (gapi.client.getToken() === null) {
|
||||
// Prompt the user to select a Google Account and ask for consent to share their data
|
||||
// when establishing a new session.
|
||||
tokenClient.requestAccessToken({prompt: 'consent'});
|
||||
} else {
|
||||
// Skip display of account chooser and consent dialog for an existing session.
|
||||
tokenClient.requestAccessToken({prompt: ''});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign out the user upon button click.
|
||||
*/
|
||||
function handleSignoutClick() {
|
||||
const token = gapi.client.getToken();
|
||||
if (token !== null) {
|
||||
google.accounts.oauth2.revoke(token.access_token);
|
||||
gapi.client.setToken('');
|
||||
document.getElementById('content').innerText = '';
|
||||
document.getElementById('authorize_button').innerText = 'Authorize';
|
||||
document.getElementById('signout_button').style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Print the names and majors of students in a sample spreadsheet:
|
||||
* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
|
||||
*/
|
||||
async function listMajors() {
|
||||
let response;
|
||||
try {
|
||||
// Fetch first 10 files
|
||||
response = await gapi.client.sheets.spreadsheets.values.get({
|
||||
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
|
||||
range: 'Class Data!A2:E',
|
||||
});
|
||||
} catch (err) {
|
||||
document.getElementById('content').innerText = err.message;
|
||||
return;
|
||||
}
|
||||
const range = response.result;
|
||||
localStorage.setItem('bankData', JSON.stringify(range));
|
||||
if (!range || !range.values || range.values.length == 0) {
|
||||
document.getElementById('content').innerText = 'No values found.';
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
|
||||
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
type BankTransaction = {
|
||||
date: string;
|
||||
dateYear: number;
|
||||
dateMonth: number;
|
||||
dateDay: number;
|
||||
time: string;
|
||||
type: string;
|
||||
name: string;
|
||||
// emoji here
|
||||
category: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
localAmount: number;
|
||||
localCurrency: string; // Actually the foreign currency
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
type ChartData = {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
backgroundColor: string;
|
||||
borderColor: string;
|
||||
borderWidth: number;
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
type Filter = {
|
||||
year?: number;
|
||||
month?: number;
|
||||
category?: string;
|
||||
excludeIncome?: boolean;
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true
|
||||
},
|
||||
"include": ["src/**/*", "src/custom.d.ts", "src/audio.d.ts"],
|
||||
"exclude": ["node_modules", "**/*.spec.ts"]
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
|
||||
const options = {};
|
||||
|
||||
module.exports = {
|
||||
target: 'web',
|
||||
entry: {
|
||||
bundle: path.resolve(__dirname, 'src/index.ts'),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: '[name].[contenthash].js',
|
||||
clean: true,
|
||||
assetModuleFilename: '[name].[contenthash][ext]',
|
||||
publicPath: '',
|
||||
},
|
||||
watchOptions: { poll: true },
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
// Use these loaders for any matching scss file types
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
// Add backwards compatibility
|
||||
test: /\.(js|ts)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env', '@babel/preset-typescript'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// Add support for images
|
||||
test: /\.(png|jpg|jpeg|gif)$/i,
|
||||
type: 'asset/resource',
|
||||
},
|
||||
{
|
||||
// Add support for favicon
|
||||
test: /\.ico$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]', // <-- retain original file name
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
// Add support for manifest
|
||||
test: /\.webmanifest$/i,
|
||||
use: 'webpack-webmanifest-loader',
|
||||
type: 'asset/resource',
|
||||
},
|
||||
{
|
||||
// Add support for audio
|
||||
test: /\.(mp3)$/i,
|
||||
type: 'asset/resource',
|
||||
},
|
||||
{
|
||||
// Add inlining of SVG
|
||||
test: /\.svg$/i,
|
||||
type: 'asset/inline',
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
// Specify the order in which to resolve files by their extension
|
||||
extensions: ['*', '.js', '.ts'],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
inject: 'body',
|
||||
title: 'Bank Statement Analyser',
|
||||
filename: 'index.html',
|
||||
template: 'src/template.html',
|
||||
}),
|
||||
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]),
|
||||
new WebpackManifestPlugin(options),
|
||||
],
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
const path = require('path');
|
||||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
port: 3000,
|
||||
open: true,
|
||||
hot: true,
|
||||
compress: true,
|
||||
historyApiFallback: true,
|
||||
devMiddleware: {
|
||||
index: true,
|
||||
mimeTypes: { phtml: 'text/html' },
|
||||
writeToDisk: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
const { merge } = require('webpack-merge');
|
||||
const { InjectManifest } = require('workbox-webpack-plugin');
|
||||
const common = require('./webpack.common');
|
||||
|
||||
common.plugins.push(new InjectManifest({
|
||||
swSrc: './src/serviceWorker.js',
|
||||
swDest: 'service-worker.js',
|
||||
maximumFileSizeToCacheInBytes: 50000000,
|
||||
}));
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
performance: {
|
||||
hints: false,
|
||||
maxEntrypointSize: 512000,
|
||||
maxAssetSize: 512000,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user