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: {
// Common
and: 'and',
on: 'on',
copy: 'copy',
date: 'date',
on: 'on',
name: 'name',
// Titles
japanese: 'Japanese',
radio_amateur: 'Radio amateur',
@ -23,10 +25,13 @@ const languageStrings = {
portal: 'Portal',
language: 'Language',
// Radio
antenna: 'antenna',
bands: 'bands',
equipment: 'Equipment',
components: 'components',
fielddays: 'Field days',
nvisAntenna: 'NVIS Antenna',
totalUniqueQSO: 'total unique QSO',
// Software
code_pages: 'Code sections',
code_pages_intro: 'Some notes and examples of code.',
@ -37,8 +42,10 @@ const languageStrings = {
nl: {
// Common
and: 'en',
on: 'op',
copy: 'kopieer',
date: 'datum',
on: 'op',
name: 'naam',
// Titles
japanese: 'Japans',
radio_amateur: 'Radiozendamateur',
@ -56,10 +63,13 @@ const languageStrings = {
portal: 'Portaal',
language: 'Taal',
// Radio
antenna: 'antenne',
bands: 'banden',
equipment: 'Apparatuur',
components: 'componenten',
fielddays: 'Velddagen',
nvisAntenna: 'NVIS Antenne',
nvisAntenna: 'NVIS antenne',
totalUniqueQSO: 'totaal unieke QSO',
// Software
code_pages: 'Code secties',
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 Emoji from '../../../Content/Emoji';
import fielddaysData from './fielddays.json';
import { useTheme } from '../../../ThemeContext';
import { getLanguage } from '../../../Language/Language';
import { getString } from '../../../Language/LanguageStrings'
const FielddaysTable = () => {
const { theme } = useTheme();
function generatePath(dateString, language) {
function generatePath(dateString, language, linkText) {
// Assuming dateString is in the format "YYYY-MM-DD"
const parts = dateString.split('-');
const year = parts[0];
@ -18,7 +22,7 @@ const FielddaysTable = () => {
// Return JSX with the path inside an <a> tag
return (
<Link reloadDocument to={path}>
Link
{linkText}
</Link>
);
}
@ -26,29 +30,25 @@ const FielddaysTable = () => {
// Optimize to only show link column for the current language.
// This also eliminates a column.
return (
<table className='table-fielddays'>
<table className={'table table-striped table-hover table-' + theme}>
<thead>
<tr>
<th>Date</th>
<th><Emoji symbol="🇬🇧" /></th>
<th><Emoji symbol="🇳🇱" /></th>
<th>Name</th>
<th>{getString('date')}</th>
<th>{getString('name')}</th>
<th>POTA Locator</th>
<th>WW-FF Locator</th>
<th>Bands</th>
<th>{getString('bands')}</th>
<th>Mode</th>
<th>Transceiver</th>
<th>Total unique QSO</th>
<th>Antenna</th>
<th>{getString('totalUniqueQSO')}</th>
<th>{getString('antenna')}</th>
</tr>
</thead>
<tbody>
{fielddaysData.fielddays.map((fieldDay, index) => (
<tr key={index}>
<td>{fieldDay.date}</td>
<td>{generatePath(fieldDay.date, 'en')}</td>
<td>{generatePath(fieldDay.date, 'nl')}</td>
<td>{fieldDay.name}</td>
<td>{generatePath(fieldDay.date, getLanguage(), fieldDay.date)}</td>
<td>{generatePath(fieldDay.date, getLanguage(), fieldDay.name)}</td>
<td>{fieldDay['identifier-pota']}</td>
<td>{fieldDay['identifier-wwff']}</td>
<td>{fieldDay.bands}</td>