Marbes/Luncher
5
2
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

Zpřehlednění tabulky výběru

Browse Source
This commit is contained in:
Martin Berka 2023-07-29 10:43:00 +02:00
parent 5727c8eca1
commit c0efb01803
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/App.css
View File

@ -67,10 +67,29 @@
justify-content: flex-end; justify-content: flex-end;
} }
.trash-icon { .table {
margin-bottom: 0;
}
.table> :not(caption) .trash-icon {
color: rgb(0, 89, 255); color: rgb(0, 89, 255);
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
padding: 0;
}
.table ul {
padding: 0;
margin-left: 20px;
margin-bottom: 0;
}
.table td {
vertical-align: top;
}
.table>tbody>tr>td>table>tbody>tr>td {
border: none;
} }
.qr-code { .qr-code {

64
client/src/App.tsx
View File

@ -257,7 +257,7 @@ function App() {
<Alert variant={'primary'}> <Alert variant={'primary'}>
Poslední změny: Poslední změny:
<ul> <ul>
<li>Ne.</li> <li>Přehlednější zobrazení tabulky</li>
</ul> </ul>
</Alert> </Alert>
<h1 className='title'>Dnes je {data.date}</h1> <h1 className='title'>Dnes je {data.date}</h1>
@ -287,7 +287,7 @@ function App() {
</Form.Select> </Form.Select>
</>} </>}
{Object.keys(data.choices).length > 0 ? {Object.keys(data.choices).length > 0 ?
<Table striped bordered hover className='results-table mt-5'> <Table bordered className='mt-5'>
<tbody> <tbody>
{Object.keys(data.choices).map((locationKey: string) => { {Object.keys(data.choices).map((locationKey: string) => {
const locationName = Object.values(Locations)[Number(locationKey)]; const locationName = Object.values(Locations)[Number(locationKey)];
@ -295,32 +295,40 @@ function App() {
return ( return (
<tr key={locationKey}> <tr key={locationKey}>
<td>{locationName}</td> <td>{locationName}</td>
<td> <td className='p-0'>
<ul> <Table>
{locationLoginList.map((entry: [string, number[]], index) => { <tbody>
const login = entry[0]; {locationLoginList.map((entry: [string, number[]], index) => {
const userChoices = entry[1]; const login = entry[0];
return <li key={index}>{login} {login === auth.login && <FontAwesomeIcon onClick={() => { const userChoices = entry[1];
doRemoveChoices(locationKey); return <tr key={index}>
}} title='Odstranit, včetně případných podřízených jídel' className='trash-icon' icon={faTrashCan} />} <td className='text-nowrap'>
{userChoices?.length && food ? <ul> {login}
{userChoices.map(foodIndex => { {login === auth.login && <FontAwesomeIcon onClick={() => {
const locationsKey = Object.keys(Locations)[Number(locationKey)] doRemoveChoices(locationKey);
const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey); }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='trash-icon' icon={faTrashCan} />}
const restaurant = Object.values(Restaurants)[restaurantKey]; </td>
const foodName = food[restaurant][foodIndex].name; {userChoices?.length && food ? <td className='w-100'>
return <li key={foodIndex}> <ul>
{foodName} {userChoices.map(foodIndex => {
{login === auth.login && <FontAwesomeIcon onClick={() => { const locationsKey = Object.keys(Locations)[Number(locationKey)]
doRemoveFoodChoice(locationKey, foodIndex); const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
}} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />} const restaurant = Object.values(Restaurants)[restaurantKey];
</li> const foodName = food[restaurant][foodIndex].name;
})} return <li key={foodIndex}>
</ul> : null} {foodName}
</li> {login === auth.login && <FontAwesomeIcon onClick={() => {
} doRemoveFoodChoice(locationKey, foodIndex);
)} }} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />}
</ul> </li>
})}
</ul>
</td> : null}
</tr>
}
)}
</tbody>
</Table>
</td> </td>
</tr>) </tr>)
} }