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;
}
.trash-icon {
.table {
margin-bottom: 0;
}
.table> :not(caption) .trash-icon {
color: rgb(0, 89, 255);
cursor: pointer;
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 {

64
client/src/App.tsx
View File

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