From 0b110c7e08d8670280032262906b71e290e7bb29 Mon Sep 17 00:00:00 2001
From: unknown <akito030303@gmail.com>
Date: Mon, 18 Nov 2019 15:28:37 +0900
Subject: [PATCH] add file RequestPage.js and .css

---
 client/src/App.js                     |   1 +
 client/src/Menu.js                    |   7 +-
 client/src/components/RequestPage.css | 115 ++++++++++++++++++++++++++
 client/src/components/RequestPage.js  | 111 +++++++++++++++++++++++++
 4 files changed, 231 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/RequestPage.css
 create mode 100644 client/src/components/RequestPage.js

diff --git a/client/src/App.js b/client/src/App.js
index 8f8687c9..749f1468 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -6,6 +6,7 @@ import Fab from '@material-ui/core/Fab';
 import Typography from '@material-ui/core/Typography';
 import PlayArrowOutlinedIcon from '@material-ui/icons/PlayArrowOutlined';
 import PauseOutlinedIcon from '@material-ui/icons/PauseOutlined';
+import Request from "./components/RequestPage";
 import Menu from "./Menu";
 //import { GoogleApiWrapper } from 'google-maps-react';
 
diff --git a/client/src/Menu.js b/client/src/Menu.js
index fc99f4cc..1893b45e 100644
--- a/client/src/Menu.js
+++ b/client/src/Menu.js
@@ -1,11 +1,12 @@
 import React from "react";
 import {BrowserRouter as Router, Link, Route} from "react-router-dom";
 import GoogleApiWrapper from './components/GoogleMap';
+import Requestpage from './components/RequestPage';
 /*react-router-domからモジュールをインストールしてる。*/
 
 const topPage = () => <div><h1>Top Page</h1></div>
 const page1 = () => <div><GoogleApiWrapper/></div>
-
+const page2 = () => <div><Requestpage/></div>
 
 /*ページの中身用のコンポーネントを作成*/
 
@@ -21,14 +22,14 @@ const Menu = () => {
             <ul style={{display: 'flex'}}>
                 <li style={liStyle}><Link to = '/'>Top</Link></li>
                 <li style={liStyle}><Link to = '/page1'>Map</Link></li>
-
+                <li style={liStyle}><Link to = '/page2'>Request</Link></li>
             </ul>
 
             <div style = {{marginLeft:'50px'}}>
                 
                 <Route path = '/' exact component = {topPage}/>
                 <Route path = '/page1' exact component = {page1}/>
-               
+                <Route path = '/page2' exact component = {page2}/>
                
             </div>
         </div>
diff --git a/client/src/components/RequestPage.css b/client/src/components/RequestPage.css
new file mode 100644
index 00000000..d0bdd63e
--- /dev/null
+++ b/client/src/components/RequestPage.css
@@ -0,0 +1,115 @@
+*{
+    background-color: #E5E5E5;
+}
+
+.h1{
+    position: absolute;
+    width: 100%;
+    height: 26px;
+    top: 0px;
+    left: 0px;
+    margin: 0px;
+    padding: 24px;
+
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 22px;
+    line-height: 26px;
+    /* identical to box height */
+    
+    display: inline;
+    text-align: center;
+    
+    background: #49BAEB;
+    color: #FFFFFF;    
+}
+
+.a{
+    color: black; 
+    text-decoration: none;
+}
+
+.li{
+    background-color: #ffff;
+    list-style: none;
+    margin: 8px;
+}
+
+.list{
+    position: absolute;
+    width: 444px;
+    height: 135px;
+    left: 20px;
+    top: 93px;
+    padding: 5px;
+    margin: 0px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+}
+
+.list2{
+    position: absolute;
+    width: 444px;
+    height: 135px;
+    left: 20px;
+    top: 255px;
+    padding: 5px;
+    margin: 0px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+}
+
+.list3{
+    position: absolute;
+    width: 444px;
+    height: 135px;
+    left: 20px;
+    top: 417px;
+    padding: 5px;
+    margin: 0px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+}
+
+.list4{
+    position: absolute;
+    width: 444px;
+    height: 135px;
+    left: 20px;
+    top: 581px;
+    padding: 5px;
+    margin: 0px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+}
+
+.listDetail{
+    position: absolute;
+    width: 424px;
+    height: 135px;
+    left: 15px;
+    top: 508px;
+    padding: 15px;
+    margin: 0px;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+}
+
+.detailMap{
+ position: absolute;
+ top: 75px;
+ height: 662px;
+ width: 100%;
+ left: 0px;
+}
\ No newline at end of file
diff --git a/client/src/components/RequestPage.js b/client/src/components/RequestPage.js
new file mode 100644
index 00000000..0a3460dc
--- /dev/null
+++ b/client/src/components/RequestPage.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import GoogleApiWrapper from './GoogleMap';
+import {BrowserRouter as Router, Link, Route} from "react-router-dom";
+import './RequestPage.css';
+
+const detailPage1 = () => 
+ <div>
+  <h1 className="h1">詳細画面</h1>
+    <div className = "detailMap"><GoogleApiWrapper/></div>
+  <ul className="listDetail">  
+    <li className="li">高橋啓太</li>
+    <li className="li">2019‐10‐15 08:04:09</li>
+    <li className="li">北海道函館市hogehohe</li>
+    <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+  </ul>
+ </div>
+
+const detailPage2 = () => 
+ <div>
+  <h1 className="h1">詳細画面</h1>
+    <div className = "detailMap"><GoogleApiWrapper/></div>
+     <ul className="listDetail">
+       <li className="li">渡邊雄之助</li>
+       <li className="li">2019‐10‐10 07:08:09</li>
+       <li className="li">北海道函館市hogehohe</li>
+       <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+     </ul>
+ </div>
+
+const detailPage3 = () => 
+ <div>
+  <h1 className="h1">詳細画面</h1>
+    <div className = "detailMap"><GoogleApiWrapper/></div>
+     <ul className="listDetail">
+        <li className="li">田尻宗準</li>
+        <li className="li">2019‐09‐15 10:04:09</li>
+        <li className="li">北海道函館市hogehohe</li>
+        <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+     </ul>
+ </div>
+
+const detailPage4 = () => 
+ <div>
+  <h1 className="h1">詳細画面</h1>
+    <div className = "detailMap"><GoogleApiWrapper/></div>
+     <ul className="listDetail">
+        <li className="li">若林勇汰</li>
+        <li className="li">2019‐09‐11 08:19:09</li>
+        <li className="li">北海道函館市hogehohe</li>
+        <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+     </ul>
+ </div>
+
+const Request = () => {
+    
+        return(
+         <Router>
+            <div>
+             <h1 className="h1">依頼一覧</h1>
+            
+             <Link to = '/page2/detail1' className = "a">   
+               <ul className="list">  
+                    <li className="li">高橋啓太</li>
+                    <li className="li">2019‐10‐15 08:04:09</li>
+                    <li className="li">北海道函館市hogehohe</li>
+                    <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+               </ul>   
+             </Link>
+
+             <Link to = '/page2/detail2' className = "a">
+                <ul className="list2">
+                    <li className="li">渡邊雄之助</li>
+                    <li className="li">2019‐10‐10 07:08:09</li>
+                    <li className="li">北海道函館市hogehohe</li>
+                    <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+                </ul>
+             </Link>
+
+             <Link to = '/page2/detail3' className = "a">
+                <ul className="list3">
+                    <li className="li">田尻宗準</li>
+                    <li className="li">2019‐09‐15 10:04:09</li>
+                    <li className="li">北海道函館市hogehohe</li>
+                    <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+                </ul>
+             </Link>
+                
+             <Link to = '/page2/detail4' className = "a">
+                <ul className="list4">
+                    <li className="li">若林勇汰</li>
+                    <li className="li">2019‐09‐11 08:19:09</li>
+                    <li className="li">北海道函館市hogehohe</li>
+                    <li className="li">函館空港、〒042‐052 北海道函館市5 11</li>
+                </ul>
+             </Link>
+
+             <div>
+              <Route path = '/page2/detail1' exact component = {detailPage1}/>
+              <Route path = '/page2/detail2' exact component = {detailPage2}/>
+              <Route path = '/page2/detail3' exact component = {detailPage3}/>
+              <Route path = '/page2/detail4' exact component = {detailPage4}/>
+             </div>
+
+            </div>
+         </Router>
+        )
+    
+        }
+
+        
+export default Request