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

Jump to bottom

VehicleList, VehicleOnField added #6

Merged
merged 5 commits into from
Sep 25, 2022
Merged

VehicleList, VehicleOnField added #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6212882
Merge pull request #2 from ajitk26/stage
anirudhp26 Sep 24, 2022
03a219e
update
anirudhp26 Sep 24, 2022
05078ed
Merge branch 'main' of https://github.com/anirudhp26/parking-platform…
anirudhp26 Sep 24, 2022
d15895f
Update VehicleList.js
anirudhp26 Sep 24, 2022
fcbea37
VehicleList, Vehicle on field added
anirudhp26 Sep 25, 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
3 changes: 0 additions & 3 deletions src/views/configuration/equipments/cashier/Cashier.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,9 +172,6 @@ const Cashier = () => {
width: '100%',
minWidth: '600px',
}}
bordered
borderColor="secondary"
color="dark"
hover
/>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/views/configuration/equipments/entrance/Entrance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,9 +172,7 @@ const Entrance = () => {
width: '100%',
minWidth: '600px',
}}
bordered
borderColor="secondary"
color="dark"
color="light"
hover
/>
</div>
Expand Down
3 changes: 0 additions & 3 deletions src/views/configuration/parkingList/ParkingList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,6 @@ const ParkingList = () => {
width: '100%',
minWidth: '600px',
}}
bordered
borderColor="secondary"
color="dark"
hover
/>
</div>
Expand Down
3 changes: 0 additions & 3 deletions src/views/configuration/zoneList/ZoneList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,6 @@ const ZoneList = () => {
width: '100%',
minWidth: '600px',
}}
bordered
borderColor="secondary"
color="dark"
hover
/>
</div>
Expand Down
277 changes: 275 additions & 2 deletions src/views/vehicle/vehicleList/VehicleList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,280 @@
import React from 'react'

import {
CTable,
CPagination,
CPaginationItem,
CFormSelect,
CButton,
CButtonGroup,
} from '@coreui/react'
const VehicleList = () => {
return <div>VehicleList</div>
const properties = (val) => {
if (val === 'success') {
return (
<CButton color="success" variant="outline" size="sm">
Success
</CButton>
)
} else if (val === 'danger') {
return (
<CButton color="danger" variant="outline" size="sm">
Offline
</CButton>
)
} else if (val === 'authzone') {
return (
<CButton color="success" variant="outline" size="sm">
Main Garage
</CButton>
)
} else if (val === 'expbal') {
return (
<CButton color="danger" variant="outline" size="sm">
12/12/2021
</CButton>
)
}
}

const operation = () => {
return (
<CButtonGroup role="group" aria-label="Basic mixed styles example" size="sm">
<CButton color="info">View</CButton>
<CButton color="warning">Edit</CButton>
<CButton color="success">Update</CButton>
<CButton color="danger">Delete</CButton>
<CButton color="warning">ZoneAuth.</CButton>
</CButtonGroup>
)
}

const columns = [
{
key: 'plateno',
label: 'Plate No.',
_props: { scope: 'col' },
},
{
key: 'cardno',
label: 'Card No.',
_props: { scope: 'col' },
},
{
key: 'driver',
label: 'Driver',
_props: { scope: 'col' },
},
{
key: 'vehicletype',
label: 'Vehicle Type',
_props: { scope: 'col' },
},
{
key: 'vehicleauthtype',
label: 'Vehicle Auth Type',
_props: { scope: 'col' },
},
{
key: 'effect',
label: 'Effect',
_props: { scope: 'col' },
},
{
key: 'expbal',
label: 'Expired / Balance',
_props: { scope: 'col' },
},
{
key: 'status',
label: 'Status',
_props: { scope: 'col' },
},
{
key: 'lstentry',
label: 'Last Entry',
_props: { scope: 'col' },
},
{
key: 'lstexit',
label: 'Last Exit',
_props: { scope: 'col' },
},
{
key: 'authzone',
label: 'Auth. Zone',
_props: { scope: 'col' },
},
{
key: 'operation',
label: 'Operation',
_props: { scope: 'col' },
},
]
const items = [
{
plateno: 'ABC123',
cardno: ' ',
driver: '1',
vehicletype: 'Small Car',
vehicleauthtype: 'Passport Car',
effect: '11/11/2021',
expbal: properties('expbal'),
status: 'OUT',
lstentry: 'N/A',
lstexit: 'N/A',
authzone: properties('authzone'),
operation: operation(),
_cellProps: { id: { scope: 'row' } },
},
]
return (
<>
<div className="conf-list">
<h1>Vehicle List</h1>
<div
style={{
display: 'flex',
margin: '1rem 0',
width: '20%',
justifyContent: 'space-between',
}}
>
<CButton color="info" shape="rounded-0" size="sm" style={{ height: '2rem' }}>
Export
</CButton>
<CButton color="info" shape="rounded-0" size="sm" style={{ height: '2rem' }}>
Import
</CButton>
<CButton color="success" shape="rounded-0" size="sm" style={{ height: '2rem' }}>
Create Vehicle
</CButton>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'space-around',
height: 'max-content',
minHeight: '20vh',
borderTop: '1px solid grey',
borderBottom: '1px solid grey',
width: '100%',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '70%',
minHeight: '5vh',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>Mall</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>- Choose Zone -</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>Plate No.</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<input type="text" placeholder="Search Content" />
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
minHeight: '5vh',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>Vehicle Auth Type</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>Vehicle Type</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect aria-label="Default select example" style={{ width: '20%' }}>
<option>Expiration Type</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '11%',
}}
>
<label htmlFor="expiresfrom">Expires From:</label>
<input type="date" id="expiresfrom" name="expfrom" />
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: '11%' }}>
<label htmlFor="expiresto">Expires To:</label>
<input type="date" id="expiresto" name="expfrom" />
</div>
<CButton color="info" shape="rounded-0" size="sm" style={{ height: '2rem' }}>
Search
</CButton>
<CButton color="secondary" shape="rounded-0" size="sm" style={{ height: '2rem' }}>
Reset
</CButton>
</div>
</div>
<CFormSelect aria-label="Default select example" style={{ width: '10%', margin: '1rem 0' }}>
<option>10</option>
<option value="1">10</option>
<option value="2">25</option>
<option value="3">50</option>
<option value="4">All</option>
</CFormSelect>
<div style={{ overflow: 'auto' }}>
<CTable
columns={columns}
items={items}
style={{
width: '100vw',
minWidth: '600px',
}}
hover
/>
</div>
<CPagination size="sm" align="end" aria-label="Page navigation example">
<CPaginationItem style={{ color: 'black' }} disabled>
Previous
</CPaginationItem>
<CPaginationItem style={{ color: 'black' }} active="true">
1
</CPaginationItem>
<CPaginationItem style={{ color: 'black' }}>2</CPaginationItem>
<CPaginationItem style={{ color: 'black' }}>3</CPaginationItem>
<CPaginationItem style={{ color: 'black' }}>Next</CPaginationItem>
</CPagination>
</div>
</>
)
}

export default VehicleList
Loading