worked on GarageApp stuff
This commit is contained in:
parent
60aaf17af3
commit
eb606572b0
51919 changed files with 2168177 additions and 18 deletions
29
src/App (conflicted copy 2025-08-20 142151).tsx
Normal file
29
src/App (conflicted copy 2025-08-20 142151).tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { APITester } from "./APITester";
|
||||
import "./index.css";
|
||||
import { List } from "./wisher/list";
|
||||
|
||||
import logo from "./logo.svg";
|
||||
import reactLogo from "./react.svg";
|
||||
|
||||
import Button from '@mui/material/Button';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import BtnGrid from './buttons';
|
||||
|
||||
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="logo-container">
|
||||
<img src={logo} alt="Bun Logo" className="logo bun-logo" />
|
||||
<img src={reactLogo} alt="React Logo" className="logo react-logo" />
|
||||
</div>
|
||||
|
||||
<h1>Bun + React</h1>
|
||||
<h2>Testing Apps</h2>
|
||||
<BtnGrid />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
11
src/App.tsx
11
src/App.tsx
|
|
@ -6,10 +6,6 @@ import logo from "./logo.svg";
|
|||
import reactLogo from "./react.svg";
|
||||
|
||||
import Button from '@mui/material/Button';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import BtnGrid from './buttons';
|
||||
|
||||
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
|
|
@ -20,8 +16,11 @@ export function App() {
|
|||
</div>
|
||||
|
||||
<h1>Bun + React</h1>
|
||||
<h2>Testing Apps</h2>
|
||||
<BtnGrid />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
<APITester />
|
||||
<List />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,55 @@
|
|||
import { APITester } from "../APITester";
|
||||
import "../index.css";
|
||||
import { List } from "../wisher/list";
|
||||
import "./index.css";
|
||||
import { useTranslation, withTranslation, Trans } from 'react-i18next';
|
||||
|
||||
import logo from "./logo.svg";
|
||||
import reactLogo from "./react.svg";
|
||||
|
||||
import Button from '@mui/material/Button';
|
||||
import Box from '@mui/material/Box';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
import button from "./modules/DummyButton"
|
||||
import VehicleCard from "./modules/VehicleCards";
|
||||
import YourVehicleList from "./modules/YourVehicles";
|
||||
|
||||
//const response = await fetch("/GarageApp/api/vehicles");
|
||||
//console.log(response)
|
||||
//const vehicles = await response.json();
|
||||
|
||||
//console.log(vehicles)
|
||||
// <Box>
|
||||
// <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
|
||||
// {vehicles.map((vehicle, index) => (
|
||||
// <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
|
||||
// <VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
|
||||
// </Grid>
|
||||
// ))}
|
||||
// </Grid>
|
||||
// </Box>
|
||||
//
|
||||
//
|
||||
// {vehicles.map((vehicle, index) => (
|
||||
// <VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
|
||||
// ))}
|
||||
//
|
||||
// <Button variant="contained">to become Add Vehicle button</Button>
|
||||
// <h1>{t ('yourvehicles')}</h1>
|
||||
// <Box>
|
||||
// <Grid container
|
||||
// spacing={{ xs: 1, md: 3 }}
|
||||
// columns={{ xs: 2, sm: 8, md: 12 }}
|
||||
// sx={{
|
||||
// justifyContent: "grow",
|
||||
// alignItems: "stretch"
|
||||
// }}>
|
||||
// {vehicles.map((vehicle, index) => (
|
||||
// <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }} justifyContent="center" alignItems="center">
|
||||
// <VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
|
||||
// </Grid>
|
||||
// ))}
|
||||
// </Grid>
|
||||
// </Box>
|
||||
//
|
||||
export function App() {
|
||||
const { t, i18n } = useTranslation();
|
||||
return (
|
||||
|
|
@ -22,10 +63,12 @@ export function App() {
|
|||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
<h1>{t ('statistics')}</h1>
|
||||
<button />
|
||||
<Button variant="contained">Temp Button</Button>
|
||||
<h1>{t ('yourvehicles')}</h1>
|
||||
|
||||
<h1>{t ('statistics')}</h1>
|
||||
|
||||
<YourVehicleList></YourVehicleList>
|
||||
|
||||
<h1>test</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
190
src/GarageApp/index.css
Normal file
190
src/GarageApp/index.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #0c0c0c;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.05;
|
||||
/*background: url("./logo.svg");
|
||||
background-size: 256px;
|
||||
transform: rotate(-12deg) scale(1.35);
|
||||
animation: slide 30s linear infinite;
|
||||
pointer-events: none;
|
||||
*/}
|
||||
@keyframes slide {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 256px 224px;
|
||||
}
|
||||
}
|
||||
.app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.logo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.bun-logo {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.bun-logo:hover {
|
||||
filter: drop-shadow(0 0 2em #fbf0dfaa);
|
||||
}
|
||||
.react-logo {
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
.react-logo:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
code {
|
||||
background-color: #1a1a1a;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.3em;
|
||||
font-family: monospace;
|
||||
}
|
||||
.api-tester {
|
||||
margin: 2rem auto 0;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.endpoint-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: #1a1a1a;
|
||||
padding: 0.75rem;
|
||||
border-radius: 12px;
|
||||
font: monospace;
|
||||
border: 2px solid #fbf0df;
|
||||
transition: 0.3s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.endpoint-row:focus-within {
|
||||
border-color: #f3d5a3;
|
||||
}
|
||||
.method {
|
||||
background: #fbf0df;
|
||||
color: #1a1a1a;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
width: min-content;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
}
|
||||
.method option {
|
||||
text-align: left;
|
||||
}
|
||||
.url-input {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: 0;
|
||||
border: 0;
|
||||
color: #fbf0df;
|
||||
font: 1em monospace;
|
||||
padding: 0.2rem;
|
||||
outline: 0;
|
||||
}
|
||||
.url-input:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.url-input::placeholder {
|
||||
color: rgba(251, 240, 223, 0.4);
|
||||
}
|
||||
.send-button {
|
||||
background: #fbf0df;
|
||||
color: #1a1a1a;
|
||||
border: 0;
|
||||
padding: 0.4rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
transition: 0.1s;
|
||||
cursor: var(--bun-cursor);
|
||||
}
|
||||
.send-button:hover {
|
||||
background: #f3d5a3;
|
||||
transform: translateY(-1px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.response-area {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #fbf0df;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem;
|
||||
color: #fbf0df;
|
||||
font: monospace;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.response-area:focus {
|
||||
border-color: #f3d5a3;
|
||||
}
|
||||
.response-area::placeholder {
|
||||
color: rgba(251, 240, 223, 0.4);
|
||||
}
|
||||
.MuiGrid-root {
|
||||
text-align: left;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
19
src/GarageApp/modules/SqliteImport.tsx
Normal file
19
src/GarageApp/modules/SqliteImport.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { Database } from "bun:sqlite";
|
||||
import db from "./hammond.db" with { "type": "sqlite" };
|
||||
|
||||
|
||||
const vehicles = db.query(`SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='39e9009e-50e1-4277-bbf7-69e5e0f6c6dc');`).all();
|
||||
|
||||
|
||||
export default vehicles
|
||||
|
||||
|
||||
|
||||
//const db = new Database("../hammond.db", { create: true});
|
||||
|
||||
|
||||
//const query = db.query(`SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='39e9009e-50e1-4277-bbf7-69e5e0f6c6dc');`);
|
||||
|
||||
//const vehicles = db.all();
|
||||
|
||||
|
||||
97
src/GarageApp/modules/VehicleCards.tsx
Normal file
97
src/GarageApp/modules/VehicleCards.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import * as React from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { red } from '@mui/material/colors';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import ShareIcon from '@mui/icons-material/Share';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
|
||||
interface ExpandMoreProps extends IconButtonProps {
|
||||
expand: boolean;
|
||||
}
|
||||
|
||||
|
||||
const ExpandMore = styled((props: ExpandMoreProps) => {
|
||||
const { expand, ...other } = props;
|
||||
return <IconButton {...other} />;
|
||||
})(({ theme }) => ({
|
||||
marginLeft: 'auto',
|
||||
transition: theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
props: ({ expand }) => !expand,
|
||||
style: {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
},
|
||||
{
|
||||
props: ({ expand }) => !!expand,
|
||||
style: {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
export default function VehicleCard({ nickname, makemodel, registration}) {
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
|
||||
const handleExpandClick = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card sx={{ }}>
|
||||
<CardHeader
|
||||
action={
|
||||
<IconButton aria-label="settings">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
}
|
||||
title={`${nickname} - ${registration}`}
|
||||
subheader={makemodel}
|
||||
/>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="150"
|
||||
image="https://www.topgear.com/sites/default/files/2023/02/topgear_-_alfa_giulia_gta-m026.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<CardActions disableSpacing>
|
||||
<IconButton aria-label="add to favorites">
|
||||
<FavoriteIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label="share">
|
||||
<ShareIcon />
|
||||
</IconButton>
|
||||
<ExpandMore
|
||||
expand={expanded}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</ExpandMore>
|
||||
</CardActions>
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
Expanded area…
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Collapse>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
45
src/GarageApp/modules/YourVehicles.tsx
Normal file
45
src/GarageApp/modules/YourVehicles.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import * as React from 'react';
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import VehicleCard from "./VehicleCards";
|
||||
import Button from '@mui/material/Button';
|
||||
import { useTranslation, withTranslation, Trans } from 'react-i18next';
|
||||
|
||||
|
||||
const response = await fetch("/GarageApp/api/vehicles");
|
||||
console.log(response)
|
||||
const vehicles = await response.json();
|
||||
console.log(vehicles)
|
||||
export default function YourVehicleList() {
|
||||
const { t, i18n } = useTranslation();
|
||||
// const response = await fetch("/GarageApp/api/vehicles");
|
||||
// const vehicles = await response.json();
|
||||
return (
|
||||
<Container>
|
||||
<Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
|
||||
<Grid size="grow" sx={{justifyContent: "flex-start"}}>
|
||||
<h1>{t ('yourvehicles')}</h1>
|
||||
</Grid>
|
||||
<Grid size="auto">
|
||||
<Button variant="contained">to become Add Vehicle button</Button>
|
||||
</Grid>
|
||||
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid container
|
||||
spacing={{ xs: 1, md: 3 }}
|
||||
columns={{ xs: 2, sm: 8, md: 12 }}
|
||||
sx={{
|
||||
justifyContent: "grow",
|
||||
alignItems: "stretch"
|
||||
}}>
|
||||
{vehicles.map((vehicle, index) => (
|
||||
<Grid key={index} size={{ xs: 2, sm: 4, md: 4 }} justifyContent="center" alignItems="center">
|
||||
<VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
import { serve } from "bun";
|
||||
import index from "./index.html";
|
||||
import wisher from "./wisher/index.html"
|
||||
import GarageApp from "./GarageApp/index.html"
|
||||
import locales from "./GarageApp/locales/index"
|
||||
import wisher from "./wisher/index.html";
|
||||
import GarageApp from "./GarageApp/index.html";
|
||||
import locales from "./GarageApp/locales/index";
|
||||
import { Database } from "bun:sqlite";
|
||||
|
||||
const db = new Database("src/GarageApp/hammond.db", {create: true});
|
||||
|
||||
// console.log(`${lng}, ${ns}`);
|
||||
// console.log(process.cwd());
|
||||
const server = serve({
|
||||
routes: {
|
||||
// Serve index.html for all unmatched routes.
|
||||
|
|
@ -18,10 +23,20 @@ const server = serve({
|
|||
const lng = req.params.lng;
|
||||
const ns = req.params.ns;
|
||||
const path = `src/GarageApp/locales/${lng}/translation.json`
|
||||
console.log(`${lng}, ${ns}`);
|
||||
console.log(process.cwd());
|
||||
return new Response(Bun.file(path))
|
||||
},
|
||||
"/GarageApp/api/vehicles": async req => {
|
||||
const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
|
||||
const query = db.query(
|
||||
`SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='${uid}');`
|
||||
);
|
||||
// console.log(query.toString())
|
||||
const vehicles = query.all();
|
||||
// console.log(vehicles);
|
||||
return Response.json(vehicles)
|
||||
},
|
||||
|
||||
|
||||
|
||||
"/api/hello": {
|
||||
async GET(req) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue