Skip to content

R
Repair-app
Commit a6fe7eed authored by chaiwat's avatar chaiwat
Browse files
Options

add Homr page

parent 4c20e709
Expand all Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 85 deletions
.env 0 → 100644
View file @ a6fe7eed
REACT_APP_SECRET_API=http://localhost:3000
\ No newline at end of file
craco.config.js 0 → 100644
View file @ a6fe7eed
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
\ No newline at end of file
package.json
View file @ a6fe7eed
...@@ -3,10 +3,13 @@ ...@@ -3,10 +3,13 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@craco/craco": "^6.4.3",
"@line/liff": "^2.17.0", "@line/liff": "^2.17.0",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"antd": "^4.18.2",
"craco-less": "^2.0.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",
...@@ -14,10 +17,9 @@ ...@@ -14,10 +17,9 @@
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "craco start",
"build": "react-scripts build", "build": "craco build",
"test": "react-scripts test", "test": "craco test"
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
......
public/favicon.ico
View replaced file @ 4c20e709 View file @ a6fe7eed
public/favicon.ico

3.78 KB | W: | H:

public/favicon.ico

28.5 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
View file @ a6fe7eed
...@@ -5,42 +5,25 @@ ...@@ -5,42 +5,25 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL. <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
Learn how to configure a non-root public URL by running `npm run build`. <title>Repair Center</title>
--> <style>
<!-- line sdk --> .da-contact-card .ant-table-tbody>tr>td:first-child {
<script src="https://static.line-scdn.net/liff/edge/2.1/liff.js"></script> text-align: left !important;
<!-- line sdk --> }
<title>React App</title> </style>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>
\ No newline at end of file
src/App.jsx
View file @ a6fe7eed
import Routers from './router/Routers'; import Routers from './router/Routers';
import './assets/less/theme.less';
function App() { function App() {
return <Routers /> return <Routers />
} }
......
src/Layouts/index.jsx 0 → 100644
View file @ a6fe7eed
import { React, Fragment } from "react";
import TabHeader from "./tabHeader";
export default function App () {
return (
<Fragment>
<TabHeader />
</Fragment>
);
}
src/Layouts/tabHeader.jsx 0 → 100644
View file @ a6fe7eed
import { React } from "react";
import { Col, Layout, Row } from "antd";
import { useHistory } from "react-router-dom";
const { Header } = Layout;
export default function App() {
const history = useHistory();
const clicklogo = () => {
history.push("/");
};
return (
<Header className="header-home" style={{ zIndex: 1 }}>
<div>
{/* <img src={logo} alt="Logo" width={30} height={30}/> */}
<Row>
<Col span={20}>
<Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp;
<div className="logo"> Center</div>
</Row>
</Col>
</Row>
</div>
</Header>
);
}
src/assets/less/Home/index.less 0 → 100644
View file @ a6fe7eed
.header-home {
background-color: red;
position: "fixed";
width: "100%";
font-size: 20px;
font-weight: bold;
}
.footer-home {
background-color: red;
}
.site-layout-background {
background-color: red;
width: 100%;
height: 100%;
text-align: center;
}
.main-logo {
cursor: pointer;
float: left;
width: 190px;
height: 31px;
}
.home-content {
padding: 90px 0;
text-align: center;
}
.text-repair {
font-size: 60px;
font-weight: bold;
}
.img-repair {
width: 500px;
}
.text-discripttion {
font-size: 18px;
color: aliceblue;
}
.pading {
padding: 50px 0;
text-align: center;
}
.widget1 {
width: 50px;
height: 50px;
background-color: rgb(0, 0, 0);
position: absolute;
animation: mymove1 1.5s infinite;
border-radius: 50%;
}
@keyframes mymove1 {
from {right: 50%;}
to {right: 45%;}
}
.widget2 {
width: 50px;
height: 50px;
background-color: rgb(255, 255, 255);
position: absolute;
animation: mymove2 1.5s infinite;
border-radius: 50%;
}
@keyframes mymove2 {
from {left: 50%;}
to {left: 45%;}
}
.bg-color-red {
background-color: red;
}
\ No newline at end of file
src/assets/less/Layouts/header.less 0 → 100644
View file @ a6fe7eed
.logo {
float: left;
color: rgb(255, 255, 255);
font-size: 100 px;
font-weight: bold;
}
.site-layout .site-layout-background {
background: #fff;
}
\ No newline at end of file
src/assets/less/index.less 0 → 100644
View file @ a6fe7eed
@import "Layouts/header.less";
@import "Home/index.less";
\ No newline at end of file
src/assets/less/theme.less 0 → 100644
View file @ a6fe7eed
@import '~antd/dist/antd.less';
@import "./index.less";
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
\ No newline at end of file
src/router/Routers.jsx
View file @ a6fe7eed
import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom"; import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
import Ecommerce from "../view/Dashboards/ecommerce"; import Ecommerce from "../view/Dashboards/ecommerce";
//import Login //import
import Login from "../view/Login"; import Login from "../view/Login";
// import Home from "../view/Homes/index";
import Home from "../view/Homes/index"
export default function Routers() { export default function Routers() {
return ( return (
...@@ -11,6 +13,14 @@ export default function Routers() { ...@@ -11,6 +13,14 @@ export default function Routers() {
<Route <Route
exact exact
path={"/"} path={"/"}
render={() => {
return <Home />;
}}
/>
<Route
exact
path={"/login"}
render={() => { render={() => {
return <Login />; return <Login />;
}} }}
...@@ -18,7 +28,7 @@ export default function Routers() { ...@@ -18,7 +28,7 @@ export default function Routers() {
<Route <Route
exact exact
path={"/Dashboard"} path={"/dashboard"}
render={() => { render={() => {
return <Ecommerce />; return <Ecommerce />;
}} }}
......
src/view/Dashboards/ecommerce/index.jsx
View file @ a6fe7eed
import React from 'react' import { React, Fragment } from "react";
import Header from '../../../Layouts/tabHeader'
export default function Ecommerce() { export default function Ecommerce() {
return ( return (
<div> <Fragment>
<Header />
<h3>สวัสดี, Fariw 👋</h3> <h3>สวัสดี, Fariw 👋</h3>
</div> </Fragment>
) );
} }
src/view/Homes/index.jsx 0 → 100644
View file @ a6fe7eed
import { React } from "react";
import { Layout, Row, Col, Button, Spin } from "antd";
import textrepair from "../../assets/images/repair.png";
import { useHistory } from "react-router-dom";
const { Header, Content, Footer } = Layout;
export default function App() {
const history = useHistory();
const clicklogo = () => {
history.push("/");
};
const getstarted = () => {
history.push("/dashboard");
}
return (
<div className="home">
<Header className="header-home" style={{ zIndex: 1 }}>
<div>
{/* <img src={logo} alt="Logo" width={30} height={30}/> */}
<Row>
<Col span={20}>
<Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp;
<div className="logo"> Center</div>
</Row>
</Col>
</Row>
</div>
</Header>
<Content
className="site-layout-background"
style={{
minHeight: 522,
}}
>
<div className="home-content">
<Col span={24}>
<Row>
<Col span={24}>
<img className="img-repair" src={textrepair} alt="Logo" />
</Col>
</Row>
<Row>
<Col span={24}>
<div className="text-discripttion">
<Spin />
ระบบจัดการร้านซ่อม รวบรวมร้านซ่อมทุกประเภทเข้ามาในระบบ
เพื่อง่ายต่อการซ่อมในครั้งถัดไป
<Spin />
</div>
</Col>
</Row>
<div className="pading">
<Row>
<Col span={24}>
<Button size="large" shape="round" onClick={getstarted}>
เริ่มต้นใช้งาน
</Button>
</Col>
</Row>
</div>
<Row>
<Col span={24}>
<div className="widget1"></div>
</Col>
<Col span={24}>
<div className="widget2"></div>
</Col>
</Row>
</Col>
</div>
</Content>
<Footer className="footer-home" style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</div>
);
}
src/view/Login/Login.js
View file @ a6fe7eed
import liff from "@line/liff"; // import liff from "@line/liff";
import { Fragment, useEffect, useState } from "react"; import { React, Fragment } from "react";
function App() { function App() {
// const [pictureUrl, setPictureUrl] = useState(logo)
// eslint-disable-next-line no-unused-vars
const [idToken, setIdToken] = useState("");
// const [displayName, setDisplayName] = useState('')
// const [statusMessage, setStatusMessage] = useState('')
// const [userId, setUserId] = useState('')
// const logout = () => { console.log(process.env.REACT_APP_SECRET_API)
// liff.logout()
// window.location.reload()
// }
const initLine = () => {
liff.init(
{ liffId: "1656654849-0gQezROW" },
() => {
if (liff.isLoggedIn()) {
runApp();
} else {
liff.login();
}
},
(err) => console.error(err)
);
};
const runApp = () => {
const idToken = liff.getIDToken();
setIdToken(idToken);
liff
.getProfile()
.then((profile) => {
console.log(profile)
setTimeout(() => {
window.location.href = '/Dashboard'
}, 3000);
})
.catch((err) => console.error(err));
};
useEffect(() => {
initLine();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return ( return (
<Fragment></Fragment> <Fragment>
<h3>สวัสดี, Login page 👋</h3>
</Fragment>
); );
} }
......
yarn.lock
View file @ a6fe7eed
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment