thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created styling standard

Browse Source
This commit is contained in:
Tim Howitz 2025-05-04 16:04:44 +01:00
parent 92fbd9369c
commit ec25bf0725
26 changed files with 551 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,62 @@
{
"editor.insertSpaces": true,
// Ignores the warning when Git is missing
"git.ignoreMissingGitWarning": true,
// Disable crash reports being sent to Microsoft.
"telemetry.enableCrashReporter": false,
// Disable usage data and errors being sent to Microsoft.
"telemetry.enableTelemetry": false,
"editor.formatOnSave": true,
"cmake.configureOnOpen": false,
"[python]": {
"editor.defaultFormatter": "ms-python.autopep8",
"editor.formatOnSave": true
},
"autopep8.args": ["--max-line-length=200"],
"editor.detectIndentation": false,
"git.confirmSync": false,
"editor.rulers": [
{
"column": 120
}
],
"git.autofetch": true,
"files.autoSave": "onFocusChange",
"cSpell.language": "en-GB",
"C_Cpp.formatting": "disabled",
"cmake.showOptionsMovedNotification": false,
"diffEditor.renderSideBySide": false,
"terminal.integrated.commandsToSkipShell": ["matlab.interrupt"],
"[matlab]": {
"editor.defaultFormatter": "AffenWiesel.matlab-formatter"
},
"workbench.editorAssociations": {
"*.pdf": "latex-workshop-pdf-hook"
},
"notebook.output.textLineLimit": 50,
"prettier.printWidth": 130,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.useTabs": true,
"editor.tabSize": 4,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[cpp]": {
"editor.defaultFormatter": "ms-vscode.cpptools"
},
"C_Cpp.default.cppStandard": "gnu++23",
"C_Cpp.default.cStandard": "gnu23",
"diffEditor.hideUnchangedRegions.enabled": true,
"python.createEnvironment.trigger": "off",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"importSorter.generalConfiguration.sortOnBeforeSave": true,
"cSpell.words": [
"vars"
]
}

11
eslint.config.mjs
View File

@ -9,8 +9,9 @@ const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;
export default tseslint.config([...compat.extends("next/core-web-vitals", "next/typescript")], {
rules: {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error",
},
});

4
src/app/api/earthquakes/route.ts
View File

@ -1,6 +1,6 @@
import { NextResponse } from 'next/server';
import { NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
import { PrismaClient } from "@prisma/client";
const usingPrisma = false;
let prisma: PrismaClient;

4
src/app/api/functions/csvReadWrite.ts
View File

@ -1,6 +1,6 @@
import path from "path";
import fs from "fs";
import csv from "csv-parser";
import fs from "fs";
import path from "path";
export type User = {
name: string;

8
src/app/api/login/route.ts
View File

@ -1,9 +1,9 @@
import bcrypt from 'bcrypt';
import { NextResponse } from 'next/server';
import bcrypt from "bcrypt";
import { NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
import { PrismaClient } from "@prisma/client";
import { findUserByEmail, readUserCsv, User } from '../functions/csvReadWrite';
import { findUserByEmail, readUserCsv, User } from "../functions/csvReadWrite";
const usingPrisma = false;
let prisma: PrismaClient;

4
src/app/api/observatories/route.ts
View File

@ -1,6 +1,6 @@
import { NextResponse } from 'next/server';
import { NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
import { PrismaClient } from "@prisma/client";
const usingPrisma = false;
let prisma: PrismaClient;

10
src/app/api/signup/route.ts
View File

@ -1,11 +1,9 @@
import bcrypt from 'bcrypt';
import { NextResponse } from 'next/server';
import bcrypt from "bcrypt";
import { NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
import { PrismaClient } from "@prisma/client";
import {
findUserByEmail, passwordStrengthCheck, readUserCsv, User, writeUserCsv
} from '../functions/csvReadWrite';
import { findUserByEmail, passwordStrengthCheck, readUserCsv, User, writeUserCsv } from "../functions/csvReadWrite";
const usingPrisma = false;
let prisma: PrismaClient;

4
src/app/contact-us/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import Image from 'next/image';
import React, { useState } from 'react';
import Image from "next/image";
import React, { useState } from "react";
const ContactUs = () => {
const [formData, setFormData] = useState({

10
src/app/earthquakes/page.tsx
View File

@ -1,11 +1,11 @@
"use client";
import { useMemo, useState } from 'react';
import useSWR from 'swr';
import { useMemo, useState } from "react";
import useSWR from "swr";
import Map from '@components/Map';
import Sidebar from '@components/Sidebar';
import { fetcher } from '@utils/fetcher';
import Map from "@components/Map";
import Sidebar from "@components/Sidebar";
import { fetcher } from "@utils/fetcher";
export default function Earthquakes() {
const [selectedEventId, setSelectedEventId] = useState("");

10
src/app/observatories/page.tsx
View File

@ -1,11 +1,11 @@
"use client";
import { useMemo, useState } from 'react';
import useSWR from 'swr';
import { useMemo, useState } from "react";
import useSWR from "swr";
import Sidebar from '@/components/Sidebar';
import Map from '@components/Map';
import { fetcher } from '@utils/fetcher';
import Sidebar from "@/components/Sidebar";
import Map from "@components/Map";
import { fetcher } from "@utils/fetcher";
export default function Observatories() {
const [selectedEventId, setSelectedEventId] = useState("");

50
src/app/our-mission/page.tsx
View File

@ -11,61 +11,37 @@ const OurMission = () => {
{/* Content Area */}
<div className="relative z-10 max-w-4xl mx-auto p-5 bg-white bg-opacity-90 shadow-lg rounded-lg">
<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
Our Mission
</h1>
<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Our Mission</h1>
<p className="text-lg text-gray-600 leading-relaxed mb-4">
At{" "}
<span className="font-semibold text-blue-600">
Earthquake Awareness Initiative
</span>
, our mission is to help people worldwide prepare for and recover
from earthquakes. Through education, research, and innovative
technology, we work tirelessly to empower communities with the
knowledge they need to stay safe before, during, and after seismic
events.
At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
</p>
<p className="text-lg text-gray-600 leading-relaxed mb-4">
We aim to bridge the gap between scientific research and community
awareness by providing resources, tools, and real-time updates for
earthquake preparedness. Together, we aspire to save lives, mitigate
impacts, and foster resilience against nature's powerful forces.
We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
resilience against nature's powerful forces.
</p>
<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
<div className="flex flex-col items-center p-10">
<img
src="education.png"
alt="Education Icon"
className="h-20 w-20 mb-8"
/>
<img src="education.png" alt="Education Icon" className="h-20 w-20 mb-8" />
<h3 className="text-xl font-bold text-gray-700 mb-2">Education</h3>
<p className="text-sm text-gray-500 text-center">
Providing accessible resources to educate people about earthquake
preparedness.
Providing accessible resources to educate people about earthquake preparedness.
</p>
</div>
<div className="flex flex-col items-center p-10">
<img
src="research.jpg"
alt="Research Icon"
className="h-20 w-20 mb-4"
/>
<img src="research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
<h3 className="text-xl font-bold text-gray-700 mb-2">Research</h3>
<p className="text-sm text-gray-500 text-center">
Supporting scientific studies to enhance understanding of seismic
activity.
Supporting scientific studies to enhance understanding of seismic activity.
</p>
</div>
<div className="flex flex-col items-center p-10">
<img
src="tech.jpg"
alt="Technology Icon"
className="h-20 w-20 mb-8"
/>
<img src="tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-8" />
<h3 className="text-xl font-bold text-gray-700 mb-2">Technology</h3>
<p className="text-sm text-gray-500 text-center">
Leveraging innovation to deliver real-time alerts and safety
tools.
Leveraging innovation to deliver real-time alerts and safety tools.
</p>
</div>
</div>

2
src/app/page.tsx
View File

@ -13,8 +13,6 @@ export default function Home() {
</div>
</div>
<div className="mx-auto mt-20 w-4/6 px-2 border border-black divide-y">
{["Earthquake 1", "Earthquake 2", "Earthquake 3"].map((name) => (
<div className="px-5 py-5" key={name}>

12
src/app/shop/page.tsx
View File

@ -1,11 +1,11 @@
"use client";
import Image from 'next/image';
import { Dispatch, SetStateAction, useCallback, useState } from 'react';
import Image from "next/image";
import { Dispatch, SetStateAction, useCallback, useState } from "react";
import Artifact from '@appTypes/Artifact';
import { Currency } from '@appTypes/StoreModel';
import Sidebar from '@components/Sidebar';
import { useStoreState } from '@hooks/store';
import Artifact from "@appTypes/Artifact";
import { Currency } from "@appTypes/StoreModel";
import Sidebar from "@components/Sidebar";
import { useStoreState } from "@hooks/store";
// Artifacts Data
const artifacts: Artifact[] = [

2
src/app/the-team/page.tsx
View File

@ -1,5 +1,5 @@
"use client"; // Required for components in Next.js (using client-side rendering)
import Image from 'next/image';
import Image from "next/image";
const teamMembers = [
{

3
src/app/warehouse/page.tsx
View File

@ -1,6 +1,7 @@
"use client";
import { useMemo, useState } from "react";
import Sidebar from "@/components/Sidebar";
import { useState, useMemo } from "react";
export default function Warehouse() {
const [selectedEventId, setSelectedEventId] = useState("");

4
src/components/AuthModal.tsx
View File

@ -1,6 +1,6 @@
"use client";
import axios from 'axios';
import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react';
import axios from "axios";
import { FormEvent, MouseEvent, useEffect, useRef, useState } from "react";
interface AuthModalProps {
isOpen: boolean; // bool for if the modal should be visible

37
src/components/map.tsx
View File

@ -1,13 +1,14 @@
import { useCallback, useState } from "react";
import React, { useRef, useEffect, Dispatch, SetStateAction } from "react";
import mapboxgl, { LngLatBounds } from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { GiObservatory } from "react-icons/gi";
import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";
import mapboxgl, { LngLatBounds } from "mapbox-gl";
import { userAgentFromString } from "next/server";
import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import { GiObservatory } from "react-icons/gi";
import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";
interface MapComponentProps {
events: Event[];
@ -19,7 +20,14 @@ interface MapComponentProps {
}
// Map component with location-style pulsing dots, animations, and tooltips
function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId, mapType }: MapComponentProps) {
function MapComponent({
events,
selectedEventId,
setSelectedEventId,
hoveredEventId,
setHoveredEventId,
mapType,
}: MapComponentProps) {
const map = useRef<mapboxgl.Map | null>(null);
const markers = useRef<{ [key: string]: mapboxgl.Marker }>({});
const [mapBounds, setMapBounds] = useState<LngLatBounds>();
@ -78,7 +86,6 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
// Add markers with location pulse
events.forEach((event) => {
const quakeElement = document.createElement("div");
const dotElement = document.createElement("div");
const pulseElement = document.createElement("div");
@ -116,19 +123,19 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
//<GiObservatory />
const observatoryElement = document.createElement("div");
const root = createRoot(observatoryElement); // `createRoot` is now the standard API
root.render(
<GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />
);
root.render(<GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />);
quakeElement.appendChild(pulseElement);
quakeElement.appendChild(dotElement);
const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement })
.setLngLat([event.longitude, event.latitude])
.addTo(map.current!);
const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
<div>
<h3>${event.title}</h3>
${ mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
${mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
<p>${event.text2}</p>
</div>
`);
@ -142,7 +149,9 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
markerDomElement.addEventListener("mouseenter", () => setHoveredEventId(event.id));
markerDomElement.addEventListener("mouseleave", () => setHoveredEventId(""));
markerDomElement.addEventListener("click", () => setSelectedEventId((prevEventId) => (prevEventId === event.id ? "" : event.id)));
markerDomElement.addEventListener("click", () =>
setSelectedEventId((prevEventId) => (prevEventId === event.id ? "" : event.id))
);
// Cleanup event listeners on unmount
markerDomElement.dataset.listenersAdded = "true"; // Mark for cleanup

16
src/components/navbar.tsx
View File

@ -1,13 +1,13 @@
"use client";
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Dispatch, SetStateAction, useMemo, useState } from 'react';
import { FaRegUserCircle } from 'react-icons/fa';
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { FaRegUserCircle } from "react-icons/fa";
import { Currency } from '@appTypes/StoreModel';
import AuthModal from '@components/AuthModal';
import { useStoreActions, useStoreState } from '@hooks/store';
import { Currency } from "@appTypes/StoreModel";
import AuthModal from "@components/AuthModal";
import { useStoreActions, useStoreState } from "@hooks/store";
export default function Navbar({}: // currencySelector,
{

2
src/utils/fetcher.ts
View File

@ -1,3 +1,3 @@
import axios from 'axios';
import axios from "axios";
export const fetcher = (url: string) => axios.get(url).then((res) => res.data);

1
src/utils/getMagnitudeColour.tsx
View File

@ -1,5 +1,6 @@
"use client";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../../tailwind.config";
function getMagnitudeColour(magnitude: number) {