Updated card buttons, and added Danish translation

Tested danish translation, it works :O

src/GarageApp/App.tsx

@@ -12,44 +12,6 @@ import Grid from '@mui/material/Grid';
 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 (

src/GarageApp/i18n.js

@@ -15,7 +15,7 @@ i18n
     backend: { 
       loadPath: '/GarageApp/locales/{{lng}}/{{ns}}.json'
     },
-    lng: 'en',
+    lng: 'da',
     ns: ['translation']
 	
   });

src/GarageApp/locales/da/translation.json

@@ -0,0 +1,231 @@
+{
+	"quickentry": "Ingen hurtige indtastninger | Hurtig indtastning | Hurtige indtastninger",
+	"statistics": "Statistik",
+	"thisweek": "Denne uge",
+	"thismonth": "Denne måned",
+	"pastxdays": "Forrige en dag | Forrige {count} dage",
+	"pastxmonths": "Forrige en måned | Forrige {count} måneder",
+	"thisyear": "Dette år",
+	"alltime": "Hele tiden",
+	"noattachments": "Ingen vedhæftede filer indtil videre",
+	"attachments": "Vedhæftede filer",
+	"choosefile": "Vælg fil",
+	"addattachment": "Tilføj vedhæftning",
+	"sharedwith": "Delt med",
+	"share": "Del",
+	"you": "Du",
+	"addfillup": "Tilføj påfyldning",
+	"createfillup": "Opret påfyldning",
+	"deletefillup": "Slet denne påfyldning",
+	"addexpense": "Tilføj udgift",
+	"createexpense": "Opret udgift",
+	"deleteexpense": "Slet denne udgift",
+	"nofillups": "Ingen påfyldninger indtil videre",
+	"transfervehicle": "Overfør køretøj",
+	"settingssaved": "Indstillingerne er gemt",
+	"yoursettings": "Dine indstillinger",
+	"settings": "Indstillinger",
+	"changepassword": "Skift adgangskode",
+	"oldpassword": "Gammel adgangskode",
+	"newpassword": "Ny adgangskode",
+	"repeatnewpassword": "Gentag ny adgangskode",
+	"passworddontmatch": "Adgangskoderne stemmer ikke overens",
+	"save": "Gem",
+	"supportthedeveloper": "Støt udvikleren",
+	"buyhimabeer": "Køb ham en øl!",
+	"featurerequest": "Ønske om funktion",
+	"foundabug": "Fundet en fejl",
+	"currentversion": "Nuværende version",
+	"moreinfo": "Mere info",
+	"currency": "Valuta",
+	"distanceunit": "Afstandsenhed",
+	"dateformat": "Datoformat",
+	"createnow": "Opret nu",
+	"yourvehicles": "Dine køretøjer",
+	"menu": {
+		"quickentries": "Hurtige indtastninger",
+		"logout": "Log ud",
+		"import": "Import",
+		"home": "Hjem",
+		"settings": "Indstillinger",
+		"admin": "Admin",
+		"sitesettings": "Webstedsindstillinger",
+		"users": "Brugere",
+		"login": "Log ind"
+	},
+	"enterusername": "Indtast dit brugernavn",
+	"enterpassword": "Indtast din adgangskode",
+	"email": "E-mail",
+	"password": "Adgangskode",
+	"login": "Log ind",
+	"totalexpenses": "Samlede udgifter",
+	"fillupcost": "Tankningsomkostninger",
+	"otherexpenses": "Andre udgifter",
+	"addvehicle": "Tilføj køretøj",
+	"editvehicle": "Rediger køretøj",
+	"deletevehicle": "Slet køretøj",
+	"sharevehicle": "Del køretøj",
+	"makeowner": "Gør til ejer",
+	"lastfillup": "Seneste tankning",
+	"quickentrydesc": "Tag et billede af fakturaen eller brændstofpumpens display for at foretage en indtastning senere.",
+	"quickentrycreatedsuccessfully": "Hurtig indtastning oprettet med succes",
+	"uploadfile": "Upload fil",
+	"uploadphoto": "Upload foto",
+	"details": "Detaljer",
+	"odometer": "Kilometertæller",
+	"language": "Sprog",
+	"date": "Dato",
+	"pastfillups": "Tidligere tankninger",
+	"fuelsubtype": "Brændstoftype",
+	"fueltype": "Brændstoftype",
+	"quantity": "Mængde",
+	"gasstation": "Tankstation",
+	"fuel": {
+		"petrol": "Benzin",
+		"diesel": "Diesel",
+		"cng": "CNG",
+		"lpg": "LPG",
+		"electric": "Elektrisk",
+		"ethanol": "Ethanol"
+	},
+	"unit": {
+		"long": {
+			"litre": "Liter",
+			"gallon": "Gallon",
+			"kilowatthour": "Kilowatt-time",
+			"kilogram": "Kilogram",
+			"usgallon": "US Gallon",
+			"minutes": "Minutter",
+			"kilometers": "Kilometer",
+			"miles": "Miles"
+		},
+		"short": {
+			"litre": "L",
+			"gallon": "Gal",
+			"kilowatthour": "KwH",
+			"kilogram": "Kg",
+			"usgallon": "US Gal",
+			"minutes": "Min",
+			"kilometers": "Km",
+			"miles": "Mi"
+		}
+	},
+	"avgfillupqty": "Gns. påfyldningsmængde",
+	"avgfillupexpense": "Gns. påfyldningsudgift",
+	"avgfuelcost": "Gns. brændstofpris",
+	"per": "{0} per {1}",
+	"price": "Pris",
+	"total": "Total",
+	"fulltank": "Tank fuld",
+	"partialfillup": "Delvis påfyldning",
+	"getafulltank": "Fik du en fuld tank?",
+	"tankpartialfull": "Hvad sporer du?",
+	"by": "Ved",
+	"expenses": "Udgifter",
+	"expensetype": "Udgiftstype",
+	"noexpenses": "Ingen udgifter indtil videre",
+	"download": "Download",
+	"title": "Titel",
+	"name": "Navn",
+	"delete": "Slet",
+	"importdata": "Importer data til Hammond",
+	"importdatadesc": "Vælg en af følgende muligheder for at importere data til Hammond",
+	"import": "Importer",
+	"importcsv": "Hvis du har brugt {name} til at gemme dine køretøjsdata, skal du eksportere CSV-filen fra {name} og klikke her for at importere.",
+	"importgeneric": "Generisk påfyldningsimport",
+	"importgenericdesc": "CSV-import af påfyldninger.",
+	"choosecsv": "Vælg CSV",
+	"choosephoto": "Vælg foto",
+	"importsuccessfull": "Data importeret med succes",
+	"importerror": "Der opstod et problem med at importere filen. Kontrollér fejlmeddelelsen",
+	"importfrom": "Importer fra {0}",
+	"stepstoimport": "Trin til import af data fra {name}",
+	"choosecsvimport": "Vælg {name} CSV-filen og klik på importknappen.",
+	"choosedatafile": "Vælg CSV-filen og klik derefter på importknappen.",
+	"dontimportagain": "Sørg for ikke at importere filen igen, da det vil skabe gentagne indtastninger.",
+	"checkpointsimportcsv": "Når du har kontrolleret alle disse punkter, kan du blot importere CSV'en nedenfor.",
+	"importhintunits": "På samme måde skal du sørge for, at <u>Brændstofenhed</u> og <u>Brændstoftype</u> er korrekt indstillet for køretøjet.",
+	"importhintcurrdist": "Sørg for, at <u>Valuta</u> og <u>Afstandsenhed</u> er korrekt indstillet i Hammond. Importen vil ikke automatisk registrere valutaen fra filen, men bruge den valuta, der er indstillet for brugeren.",
+	"importhintnickname": "Sørg for, at køretøjets kaldenavn i Hammond er præcis det samme som navnet i Fuelly CSV-filen, ellers vil importen ikke fungere.",
+	"importhintvehiclecreated": "Sørg for, at du allerede har oprettet køretøjerne i Hammond-platformen.",
+	"importhintcreatecsv": "Eksportér dine data fra {name} i CSV-format. Instruktioner til at gøre dette kan findes",
+	"importgenerichintdata": "Data skal være i CSV-format.",
+	"here": "her",
+	"unprocessedquickentries": "Du har en hurtig indtastning, der skal behandles. | Du har {0} hurtige indtastninger, der venter på at blive behandlet.",
+	"show": "Vis",
+	"loginerror": "Der opstod en fejl ved login til din konto. {msg}",
+	"showunprocessed": "Vis kun ubehandlede",
+	"unprocessed": "ubehandlede",
+	"sitesettingdesc": "Opdater indstillinger på webstedsniveau. Disse vil blive brugt som standardværdier for nye brugere.",
+	"settingdesc": "Disse vil blive brugt som standardværdier, når du opretter en ny påfyldning eller udgift.",
+	"areyousure": "Er du sikker på, at du vil fortsætte med dette?",
+	"adduser": "Tilføj bruger",
+	"usercreatedsuccessfully": "Bruger oprettet med succes",
+	"userdisabledsuccessfully": "Bruger deaktiveret med succes",
+	"userenabledsuccessfully": "Bruger aktiveret med succes",
+	"role": "Rolle",
+	"created": "Oprettet",
+	"createnewuser": "Opret ny bruger",
+	"cancel": "Annuller",
+	"novehicles": "Det ser ud til, at du endnu ikke har oprettet et køretøj i systemet. Begynd med at oprette en indtastning for et af de køretøjer, du gerne vil spore.",
+	"processed": "Marker som behandlet",
+	"notfound": "Ikke fundet",
+	"timeout": "Siden fik en timeout under indlæsningen. Er du stadig forbundet til internettet?",
+	"clicktoselect": "Klik for at vælge...",
+	"expenseby": "Udgift af",
+	"selectvehicle": "Vælg et køretøj",
+	"expensedate": "Udgiftsdato",
+	"totalamountpaid": "Samlet betalt beløb",
+	"fillmoredetails": "Udfyld flere oplysninger",
+	"markquickentryprocessed": "Marker valgt hurtig indtastning som behandlet",
+	"referquickentry": "Henvis hurtig indtastning",
+	"deletequickentry": "Dette vil slette denne hurtige indtastning. Dette trin kan ikke fortrydes. Er du sikker?",
+	"fuelunit": "Brændstofenhed",
+	"fillingstation": "Navn på tankstation",
+	"comments": "Kommentarer",
+	"missfillupbefore": "Glemte du at indtaste påfyldningen før denne?",
+	"missedfillup": "Glemt påfyldning",
+	"fillupdate": "Påfyldningsdato",
+	"fillupsavedsuccessfully": "Påfyldning gemt med succes",
+	"expensesavedsuccessfully": "Udgift gemt med succes",
+	"vehiclesavedsuccessfully": "Køretøj gemt med succes",
+	"settingssavedsuccessfully": "Indstillinger gemt med succes",
+	"back": "Tilbage",
+	"nickname": "Kælenavn",
+	"registration": "Registrering",
+	"createvehicle": "Opret køretøj",
+	"make": "Mærke / Firma",
+	"model": "Model",
+	"yearmanufacture": "Produktionsår",
+	"enginesize": "Motorsize (i cc)",
+	"mysqlconnstr": "MySQL-forbindelsesstreng",
+	"testconn": "Test forbindelse",
+	"migrate": "Migrer",
+	"init": {
+		"migrateclarkson": "Migrer fra Clarkson",
+		"migrateclarksondesc": "Hvis du har en eksisterende Clarkson-installation, og du vil migrere dine data fra den, skal du trykke på følgende knap.",
+		"freshinstall": "Ny installation",
+		"freshinstalldesc": "Hvis du vil have en ny installation af Hammond, skal du trykke på følgende knap.",
+		"clarkson": {
+			"desc": "<p>Du skal sørge for, at denne installation af Hammond kan få adgang til MySQL-databasen, der bruges af Clarkson.</p><p>Hvis det ikke er direkte muligt, kan du lave en kopi af den database et sted, der er tilgængeligt fra denne instans.</p><p>Når det er gjort, skal du indtaste forbindelsesstrengen til MySQL-instansen i følgende format.</p><p>Alle brugerne importeret fra Clarkson vil have deres brugernavn som deres e-mail i Clarkson-databasen, og adgangskoden er indstillet til<span class='' style='font-weight:bold'>hammond</span></p><code>bruger:adgangskode@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local</code><br/><br/>",
+			"success": "Vi har migreret dataene fra Clarkson med succes. Du vil snart blive omdirigeret til login-siden, hvor du kan logge ind med din eksisterende e-mail og adgangskode: hammond"
+		},
+		"fresh": {
+			"setupadminuser": "Opsætning af administratorbrugere",
+			"yourpassword": "Din adgangskode",
+			"youremail": "Din e-mail",
+			"yourname": "Dit navn",
+			"success": "Du er blevet registreret med succes. Du vil snart blive omdirigeret til login-siden, hvor du kan logge ind og begynde at bruge systemet."
+		}
+	},
+	"roles": {
+		"ADMIN": "ADMIN",
+		"USER": "BRUGER"
+	},
+	"profile": "Profil",
+	"processedon": "Behandlet den",
+	"enable": "Aktivér",
+	"disable": "Deaktiver",
+	"confirm": "Fortsæt",
+	"labelforfile": "Mærke for denne fil"
+}

src/GarageApp/locales/index.tsx

@@ -2,5 +2,6 @@ export const LANGUAGES = [
   { label: "Spanish", code: "es" },
   { label: "English", code: "en" },
   { label: "Italian", code: "it" },
+  { label: "Danish", code: "da" },
 ];
 

src/GarageApp/modules/VehicleCards.tsx

@@ -7,13 +7,21 @@ 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 Button from '@mui/material/Button';
 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';
+import GasStation from './icons/gasFillup'
+import Expense from './icons/Expense'
+
+import { useTranslation, withTranslation, Trans } from 'react-i18next';
+
 
 interface ExpandMoreProps extends IconButtonProps {
   expand: boolean;
@@ -45,6 +53,7 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
 }));
 
 export default function VehicleCard({ nickname, makemodel, registration}) {
+	const { t, i18n } = useTranslation();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -55,7 +64,7 @@ export default function VehicleCard({ nickname, makemodel, registration}) {
     <Card sx={{ }}>
       <CardHeader
         action={
-          <IconButton aria-label="settings">
+          <IconButton aria-label="Edit Vehicle">
             <MoreVertIcon />
           </IconButton>
         }
@@ -69,12 +78,12 @@ export default function VehicleCard({ nickname, makemodel, registration}) {
         alt=""
       />
       <CardActions disableSpacing>
-        <IconButton aria-label="add to favorites">
+        <Button startIcon={<GasStation />}>
-          <FavoriteIcon />
+	  {t ('addfillup')}
-        </IconButton>
+	</Button>
-        <IconButton aria-label="share">
+        <Button startIcon={<Expense />}>
-          <ShareIcon />
+	  {t ('addexpense')}
-        </IconButton>
+	</Button>
         <ExpandMore
           expand={expanded}
           onClick={handleExpandClick}

src/GarageApp/modules/icons/Expense.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+// icon by 480 Design provided by Iconify.design
+// License: CC_BY_4.0
+export default function SolarTagPriceBroken(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" {...props}><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth={2}><path d="M15.39 15.39c.585-.587.664-1.457.176-1.946s-1.359-.409-1.945.177c-.585.586-1.456.665-1.944.177s-.409-1.359.177-1.944m3.535 3.535l.354.354m-.354-.354c-.4.401-.935.565-1.389.471m-2.5-4.36l.354.354m0 0c.331-.332.753-.5 1.146-.497m-4.393-.478a2 2 0 1 0-2-2"></path><path d="M16.137 4.728c-1.546-1.545-2.318-2.318-3.321-2.605c-1.003-.288-2.068-.042-4.197.45l-1.228.283c-1.792.413-2.688.62-3.302 1.233S3.27 5.6 2.856 7.391l-.284 1.228c-.491 2.13-.737 3.194-.45 4.197c.288 1.003 1.061 1.775 2.606 3.32l1.83 1.83C9.248 20.657 10.592 22 12.262 22c1.671 0 3.015-1.344 5.704-4.033c2.69-2.69 4.034-4.034 4.034-5.705c0-1.342-.868-2.474-2.604-4.262"></path></g></svg>);
+}

src/GarageApp/modules/icons/gasFillup.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+// Icon by 480 Design provided by Iconify
+// License: CC_BY_4.0
+export default function SolarGasStationBroken(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" {...props}><g fill="none" stroke="currentColor" strokeWidth={2}><path d="M11 6H8c-.943 0-1.414 0-1.707.293S6 7.057 6 8s0 1.414.293 1.707S7.057 10 8 10h3c.943 0 1.414 0 1.707-.293S13 8.943 13 8s0-1.414-.293-1.707S11.943 6 11 6Z"></path><path strokeLinecap="round" d="M7 17h5m5 5H2M19.5 4l1.233.986c.138.11.207.166.27.222a3 3 0 0 1 .992 2.066c.005.084.005.172.005.348V18.5a1.5 1.5 0 0 1-3 0v-.071c0-.79-.64-1.429-1.429-1.429H16"></path><path strokeLinecap="round" d="M22 8h-1.5A1.5 1.5 0 0 0 19 9.5v2.419a1.5 1.5 0 0 0 1.026 1.423L22 14m-6 8v-7M3 22v-4m0-4V8c0-2.828 0-4.243.879-5.121C4.757 2 6.172 2 9 2h1c2.828 0 4.243 0 5.121.879C16 3.757 16 5.172 16 8v3"></path></g></svg>);
+}