kevin/portfolio
1
0
Fork 0
Code

Update field days table with language strings and bootstrap styling.

Browse Source
This commit is contained in:
PA4KEV 2024-07-02 22:39:59 +02:00
parent bba3acb191
commit 7f100ea3d1
2 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Language/LanguageStrings.js
View File

@ -4,8 +4,10 @@ const languageStrings = {
en: { en: {
// Common // Common
and: 'and', and: 'and',
on: 'on',
copy: 'copy', copy: 'copy',
date: 'date',
on: 'on',
name: 'name',
// Titles // Titles
japanese: 'Japanese', japanese: 'Japanese',
radio_amateur: 'Radio amateur', radio_amateur: 'Radio amateur',
@ -23,10 +25,13 @@ const languageStrings = {
portal: 'Portal', portal: 'Portal',
language: 'Language', language: 'Language',
// Radio // Radio
antenna: 'antenna',
bands: 'bands',
equipment: 'Equipment', equipment: 'Equipment',
components: 'components', components: 'components',
fielddays: 'Field days', fielddays: 'Field days',
nvisAntenna: 'NVIS Antenna', nvisAntenna: 'NVIS Antenna',
totalUniqueQSO: 'total unique QSO',
// Software // Software
code_pages: 'Code sections', code_pages: 'Code sections',
code_pages_intro: 'Some notes and examples of code.', code_pages_intro: 'Some notes and examples of code.',
@ -37,8 +42,10 @@ const languageStrings = {
nl: { nl: {
// Common // Common
and: 'en', and: 'en',
on: 'op',
copy: 'kopieer', copy: 'kopieer',
date: 'datum',
on: 'op',
name: 'naam',
// Titles // Titles
japanese: 'Japans', japanese: 'Japans',
radio_amateur: 'Radiozendamateur', radio_amateur: 'Radiozendamateur',
@ -56,10 +63,13 @@ const languageStrings = {
portal: 'Portaal', portal: 'Portaal',
language: 'Taal', language: 'Taal',
// Radio // Radio
antenna: 'antenne',
bands: 'banden',
equipment: 'Apparatuur', equipment: 'Apparatuur',
components: 'componenten', components: 'componenten',
fielddays: 'Velddagen', fielddays: 'Velddagen',
nvisAntenna: 'NVIS Antenne', nvisAntenna: 'NVIS antenne',
totalUniqueQSO: 'totaal unieke QSO',
// Software // Software
code_pages: 'Code secties', code_pages: 'Code secties',
code_pages_intro: 'Notities en voorbeelden van code.', code_pages_intro: 'Notities en voorbeelden van code.',

28
src/Pages/Radio/fielddays/fielddaysTable.js
View File

@ -2,10 +2,14 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Emoji from '../../../Content/Emoji'; import Emoji from '../../../Content/Emoji';
import fielddaysData from './fielddays.json'; import fielddaysData from './fielddays.json';
import { useTheme } from '../../../ThemeContext';
import { getLanguage } from '../../../Language/Language';
import { getString } from '../../../Language/LanguageStrings'
const FielddaysTable = () => { const FielddaysTable = () => {
const { theme } = useTheme();
function generatePath(dateString, language) { function generatePath(dateString, language, linkText) {
// Assuming dateString is in the format "YYYY-MM-DD" // Assuming dateString is in the format "YYYY-MM-DD"
const parts = dateString.split('-'); const parts = dateString.split('-');
const year = parts[0]; const year = parts[0];
@ -18,7 +22,7 @@ const FielddaysTable = () => {
// Return JSX with the path inside an <a> tag // Return JSX with the path inside an <a> tag
return ( return (
<Link reloadDocument to={path}> <Link reloadDocument to={path}>
Link {linkText}
</Link> </Link>
); );
} }
@ -26,29 +30,25 @@ const FielddaysTable = () => {
// Optimize to only show link column for the current language. // Optimize to only show link column for the current language.
// This also eliminates a column. // This also eliminates a column.
return ( return (
<table className='table-fielddays'> <table className={'table table-striped table-hover table-' + theme}>
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>{getString('date')}</th>
<th><Emoji symbol="🇬🇧" /></th> <th>{getString('name')}</th>
<th><Emoji symbol="🇳🇱" /></th>
<th>Name</th>
<th>POTA Locator</th> <th>POTA Locator</th>
<th>WW-FF Locator</th> <th>WW-FF Locator</th>
<th>Bands</th> <th>{getString('bands')}</th>
<th>Mode</th> <th>Mode</th>
<th>Transceiver</th> <th>Transceiver</th>
<th>Total unique QSO</th> <th>{getString('totalUniqueQSO')}</th>
<th>Antenna</th> <th>{getString('antenna')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{fielddaysData.fielddays.map((fieldDay, index) => ( {fielddaysData.fielddays.map((fieldDay, index) => (
<tr key={index}> <tr key={index}>
<td>{fieldDay.date}</td> <td>{generatePath(fieldDay.date, getLanguage(), fieldDay.date)}</td>
<td>{generatePath(fieldDay.date, 'en')}</td> <td>{generatePath(fieldDay.date, getLanguage(), fieldDay.name)}</td>
<td>{generatePath(fieldDay.date, 'nl')}</td>
<td>{fieldDay.name}</td>
<td>{fieldDay['identifier-pota']}</td> <td>{fieldDay['identifier-pota']}</td>
<td>{fieldDay['identifier-wwff']}</td> <td>{fieldDay['identifier-wwff']}</td>
<td>{fieldDay.bands}</td> <td>{fieldDay.bands}</td>