mirror of
https://github.com/franjsco/tick3t
synced 2025-06-05 22:19:18 +02:00
add Home
This commit is contained in:
0
src/containers/Home/Home.css
Normal file
0
src/containers/Home/Home.css
Normal file
39
src/containers/Home/Home.js
Normal file
39
src/containers/Home/Home.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import {
|
||||||
|
Container,
|
||||||
|
Row,
|
||||||
|
Col
|
||||||
|
} from 'reactstrap';
|
||||||
|
|
||||||
|
import OpenTicketCard from './OpenTicketCard';
|
||||||
|
import ViewTicketCard from './ViewTicketCard';
|
||||||
|
|
||||||
|
import './Home.css';
|
||||||
|
|
||||||
|
|
||||||
|
class Home extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Container>
|
||||||
|
<Row>
|
||||||
|
<Col className="col" xs="12" sm="6">
|
||||||
|
<OpenTicketCard />
|
||||||
|
</Col>
|
||||||
|
<Col className="col" xs="12" sm="6">
|
||||||
|
<ViewTicketCard />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
55
src/containers/Home/OpenTicketCard.js
Normal file
55
src/containers/Home/OpenTicketCard.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Button } from 'reactstrap';
|
||||||
|
|
||||||
|
import Card from '../../components/Card';
|
||||||
|
import Logo from '../../components/Logo';
|
||||||
|
|
||||||
|
import logoSVG from '../../assets/assistance.svg';
|
||||||
|
|
||||||
|
const style={
|
||||||
|
height: '160px',
|
||||||
|
margin: '30px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const LogoOpenTicket = () => {
|
||||||
|
return (
|
||||||
|
<Logo
|
||||||
|
style={style}
|
||||||
|
src={logoSVG}
|
||||||
|
alt="open ticket" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const ButtonPrimary = () => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
tag={Link}
|
||||||
|
to="/open"
|
||||||
|
color="primary"
|
||||||
|
>Open Ticket</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
class OpenTicketCard extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
align="center"
|
||||||
|
title="Open Ticket"
|
||||||
|
message="Open new ticket"
|
||||||
|
body={<LogoOpenTicket />}
|
||||||
|
footer={<ButtonPrimary />} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OpenTicketCard;
|
80
src/containers/Home/ViewTicketCard.js
Normal file
80
src/containers/Home/ViewTicketCard.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Redirect } from 'react-router-dom';
|
||||||
|
import Card from '../../components/Card';
|
||||||
|
import SearchForm from '../../components/SearchForm';
|
||||||
|
|
||||||
|
import logoSVG from '../../assets/ticket.svg';
|
||||||
|
import Logo from '../../components/Logo';
|
||||||
|
|
||||||
|
const style={
|
||||||
|
height: '150px',
|
||||||
|
margin: '30px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const LogoViewTicket = () => {
|
||||||
|
return (
|
||||||
|
<Logo
|
||||||
|
style={style}
|
||||||
|
src={logoSVG}
|
||||||
|
alt="open ticket" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
class ViewTicketCard extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
ticketId: '',
|
||||||
|
submitted: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// binding
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
this.handleChangeInput = this.handleChangeInput.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({
|
||||||
|
submitted: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChangeInput(e) {
|
||||||
|
this.setState({
|
||||||
|
ticketId: e.target.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
if (this.state.submitted) {
|
||||||
|
return (<Redirect to={`/ticket/${this.state.ticketId}`} />);
|
||||||
|
}
|
||||||
|
|
||||||
|
let Search = (
|
||||||
|
<SearchForm
|
||||||
|
name="search"
|
||||||
|
id="search"
|
||||||
|
placeholder="ticket ID"
|
||||||
|
onChange={this.handleChangeInput}
|
||||||
|
onSubmit={this.handleSubmit}
|
||||||
|
value={this.state.ticketId}
|
||||||
|
buttonName="View"
|
||||||
|
/>);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
align="center"
|
||||||
|
title="View Ticket"
|
||||||
|
message="View the ticket status"
|
||||||
|
body={<LogoViewTicket />}
|
||||||
|
footer={Search} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ViewTicketCard;
|
Reference in New Issue
Block a user