Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Car logging #16

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Car logging #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
4ea7845
started on car logging feature on booking page
maxska Apr 4, 2021
5c1c3c3
created new car logging page
alrikmunoz Apr 28, 2021
73eda98
worked on logging form
alrikmunoz May 4, 2021
f960850
started on handling of backend error messages
maxska May 12, 2021
0835515
status messages in form and working post
alrikmunoz May 12, 2021
9db65c4
started on LoggingHistory page
maxska Aug 11, 2021
df967ec
improved LoggingHistory design
maxska Aug 11, 2021
3d20db2
added finished loggings to LoggingHistory page
maxska Aug 12, 2021
176e1d3
added more info to finished loggings
maxska Aug 26, 2021
c09c453
improved loggingHistory item readability
maxska Aug 26, 2021
713cff3
improved logging page design
maxska Aug 26, 2021
7a5132e
Added notice for incompatible Node version
parslie Nov 4, 2021
102904a
Remove redundant fields (carDays, trailerDays, activeMember)
parslie Nov 25, 2021
f26037a
Adhere to new car log model names/variables
parslie Nov 26, 2021
7ec09ab
Add trailer user id input to car-logging
parslie Dec 9, 2021
36a3722
Update car-logging history with relevant data
parslie Dec 9, 2021
402d45f
Checked and rewrote car-logging page.js
parslie Dec 9, 2021
9b36a31
Add field for selecting committee in car logging
parslie Dec 16, 2021
936caac
Populate committee selector & send committe in car-logging
parslie Feb 3, 2022
24cbbef
Update layout of car-logging page and items (+functionality)
parslie Feb 6, 2022
5ab37ff
Re-fetch car logs after successful logging
parslie Feb 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ As a non developer you can visit this project at [medlem.d-sektionen.se](https:/

## Development

### Important

This project works with Node **v.14**. If you are using a newer version (especially **v.16**) you might need to downgrade before getting started.

### Prerequisites

Must know:
Expand Down
14,926 changes: 6,533 additions & 8,393 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

259 changes: 259 additions & 0 deletions src/components/carLogging/loggingHistory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */

import React, { useState } from 'react'
import useSWR from 'swr'
import PropTypes from 'prop-types'
import style from '../../scss/loggingHistory.module.scss'

import { List } from '../ui/list'

const Row = ({ children }) => <div className={style.tableRow}>{children}</div>
Row.defaultProps = { children: undefined }
Row.propTypes = { children: PropTypes.node }

function LoggingHistory() {
const [openHistoryItem, setOpenHistoryItem] = useState(null)

const { data: logStarts } = useSWR('/carlogging/starts/')
const { data: logEnds } = useSWR('/carlogging/entries/')

return (
<>
<h2>Loggningar</h2>
<p>
Här ser du gjorda billoggningar som är relevanta för dig. Du ser
billoggningar som andra gjort åt dig när du har bokat bilen,
billoggningar du gjort åt andra, samt billoggningar du gjort åt dig
själv.
</p>
<List>
{logStarts &&
logStarts.map(
(logStart, index) =>
!logStart.is_finished && (
<div>
<div
className={style.logInfo}
onClick={() =>
openHistoryItem === index
? setOpenHistoryItem(null)
: setOpenHistoryItem(index)
}
style={
openHistoryItem === index
? { backgroundColor: '#333' }
: {}
}
>
<span>
Påbörjad körning för {logStart.car_user.pretty_name}
</span>
<span className={style.date}>
{logStart.logging_date.split('T')[0]}
</span>
</div>

{openHistoryItem === index && (
<div className={style.table}>
<Row>
<span>Bilen bokad av</span>
<span>{logStart.car_user.pretty_name}</span>
</Row>
<Row>
<span>Loggad av</span>
<span>{logStart.logging_user.pretty_name}</span>
</Row>
<Row>
<span>Loggning gjord</span>
<span>
{logStart.logging_date.split('T')[0]}, kl{' '}
{logStart.logging_date.split('T')[1].split('.')[0]}
</span>
</Row>
<Row>
<span>Mätarställning</span>
<span>{logStart.kilometers} km</span>
</Row>
<Row>
<span>Meddelande</span>
<span>{logStart.message}</span>
</Row>
<Row>
<span>Bilen var städad</span>
<span>{logStart.car_cleaned ? 'Ja' : 'Nej'}</span>
</Row>
</div>
)}
</div>
)
)}

{logEnds &&
logEnds.map((logEnd, index) => (
<div>
<div
className={style.logInfo}
onClick={() =>
openHistoryItem === index
? setOpenHistoryItem(null)
: setOpenHistoryItem(index)
}
style={
openHistoryItem === index ? { backgroundColor: '#333' } : {}
}
>
<span>
Avslutad körning för {logEnd.car_user.pretty_name}
{!logEnd.is_paid ? (
<span style={{ color: '#ff4949' }}> (obetald)</span>
) : (
<span style={{ color: '#49ff49' }}> (betald)</span>
)}
</span>
<span className={style.date}>
{logEnd.logging_date.split('T')[0]}
</span>
</div>

{openHistoryItem === index && (
<div className={style.table}>
<Row>
<span>Kostnad</span>
<span>{logEnd.cost} kr</span>
</Row>
<Row>
<span>Betald</span>
{logEnd.is_paid ? (
<span style={{ color: '#49ff49' }}>Ja</span>
) : (
<span style={{ color: '#ff4949' }}>Nej</span>
)}
</Row>

{!logEnd.is_paid && (
<div className={style.withPadding}>
Betala genom att swisha {logEnd.cost} kr till 123 585 58
53. Märk betalningen med LiU-ID på den som bokat bilen,
LiU-ID på den som bokat släpet, och antal körda km.
</div>
)}

<div className={style.withPadding}>
Kostnaden beräknas genom följande:
<ul>
<li>
Bilen kostar 3 kr/km + 30 kr/dygn (utöver det första)
</li>
<li>Släpet kostar 100 kr/dygn</li>
</ul>
</div>
<br />

<div className={style.withPadding}>
Statistik om körningen:
</div>
<Row>
<span>Sträcka som körts:</span>
<span>
{logEnd.kilometers - logEnd.log_start.kilometers} km
</span>
</Row>
<Row>
<span>Antal dagar som bilen använts:</span>
<span>{logEnd.car_days}</span>
</Row>
<Row>
<span>Antal dagar som släpet använts:</span>
<span>{logEnd.trailer_days}</span>
</Row>

<div className={style.withPadding}>
Allmän information om loggningen:
</div>
<Row>
<span>Bilen bokad av</span>
<span>{logEnd.car_user.pretty_name}</span>
</Row>
<Row>
<span>Loggad av</span>
<span>{logEnd.logging_user.pretty_name}</span>
</Row>
<Row>
<span>Loggning gjord</span>
<span>
{logEnd.logging_date.split('T')[0]}, kl{' '}
{logEnd.logging_date.split('T')[1].split('.')[0]}
</span>
</Row>
<Row>
<span>Utskott kört för</span>
<span>{logEnd.committee.name}</span>
</Row>
<Row>
<span>Mätarställning</span>
<span>{logEnd.kilometers} km</span>
</Row>
<Row>
<span>Meddelande</span>
<span>{logEnd.message}</span>
</Row>
<Row>
<span>Bilen städades</span>
<span>{logEnd.car_cleaned ? 'Ja' : 'Nej'}</span>
</Row>
<Row>
<span>Släpet användes</span>
<span>{logEnd.trailer_user ? 'Ja' : 'Nej'}</span>
</Row>
{logEnd.trailer_user && (
<Row>
<span>Släpet bokat av</span>
<span>{logEnd.trailer_user.pretty_name}</span>
</Row>
)}

<div className={style.withPadding}>
Information om tillhörande start-loggning:
</div>
<Row>
<span>Loggning gjord</span>
<span>
{logEnd.log_start.logging_date.split('T')[0]}, kl{' '}
{
logEnd.log_start.logging_date
.split('T')[1]
.split('.')[0]
}
</span>
</Row>
<Row>
<span>Mätarställning</span>
<span>{logEnd.log_start.kilometers} km</span>
</Row>
{logEnd.log_start.logging_user && (
<Row>
<span>Loggad av</span>
<span>{logEnd.log_start.logging_user.pretty_name}</span>
</Row>
)}
{logEnd.log_start.logging_user && (
<Row>
<span>Meddelande</span>
<span>{logEnd.log_start.message}</span>
</Row>
)}
<Row>
<span>Bilen var städad</span>
<span>{logEnd.log_start.car_cleaned ? 'Ja' : 'Nej'}</span>
</Row>
</div>
)}
</div>
))}
</List>
</>
)
}

export default LoggingHistory
Loading