Created Crowd Analyzer Page

frontend/src/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

frontend/src/components/CrowdAnalyzer/SearchBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import SearchIcon from '../../assets/searchIcon.svg'
+
+const SearchContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  gap: 8px;
+`
+
+const StyledButton = styled.img`
+  width: 18.75px;
+  max-height: 18.75px;
+`
+const StyledBox = styled.div`
+  box-sizing: border-box;
+  background: #e4e0e091;
+  border-radius: 20px;
+  width: 300px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+`
+const TextContainer = styled.div`
+  padding-left: 10px;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 15px;
+  color: #807d7d;
+  line-height: 20px;
+`
+/**
+ * @returns A search box
+ *
+ * @example <SearchBox />
+ */
+const SearchBar = ({ text }: { text?: string }) => {
+  return (
+    <SearchContainer>
+      <StyledBox>
+        <TextContainer>{text}</TextContainer>
+      </StyledBox>
+      <StyledButton src={SearchIcon}></StyledButton>
+    </SearchContainer>
+  )
+}
+
+export default SearchBar

frontend/src/routes/CrowdAnalyzer/index.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+import styled from 'styled-components'
+import { Icon } from 'antd-mobile'
+import PullToRefreshRH from '../../components/PullToRefreshRH'
+import BottomNavBar from '../../components/Mobile/BottomNavBar'
+import SearchBar from '../../components/CrowdAnalyzer/SearchBar'
+
+const NavBarIcons = styled(Icon)`
+  &.am-icon-md {
+    width: 35px;
+    height: 35px;
+  }
+
+  margin-left: 0.5rem;
+  width: 35px;
+  height: 35px;
+  position: fixed;
+`
+
+const CrowdAnalyzerBarContainer = styled.div`
+  position: fixed;
+  width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  align-items: center;
+  top: 0;
+  padding-top: env(safe-area-inset-top);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+`
+
+const MainContainer = styled.div`
+  background-color: #fff;
+  min-height: 100vh;
+  height: 100%;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  margin-top: 45px;
+`
+
+const TabContainer = styled.div`
+  display: flex;
+  width: 100%;
+  margin: 0 15%;
+`
+
+const FacilityNameContainer = styled.div`
+  color: '#000000';
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 22px;
+  position: absolute;
+  margin: 15% 10%;
+`
+
+const LevelContainer = styled.div`
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 20px;
+  margin-left: 30px;
+  top: 50%;
+  margin: 15% 10%;
+  position: absolute;
+`
+
+const LevelValueContainer = styled.div`
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 20px;
+  margin-right: 30px;
+  top: 50%;
+  right: 5%;
+  margin: 15% 10%;
+  position: absolute;
+`
+const CrowdAnalyzerTabContainer = styled.div`
+  flex: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 5px;
+  background-color: #ffffff;
+  color: '#000000';
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 22px;
+  height: 20px;
+`
+/**
+ * # CreateCrowdAnalyzerPage
+ * Path: '/crowd'
+ *
+ * ## Page Description
+ * This page is accessed to check crowd analytics.
+ *
+ */
+const CrowdAnalyzerPage = ({ onLeftClick }: { onLeftClick?: () => void }) => {
+  const title = 'Crowd Analyzer'
+  const level = 'Current level:'
+  const value = 'High - 98%'
+  const facility = 'Gym'
+  const history = useHistory()
+
+  return (
+    <PullToRefreshRH>
+      <CrowdAnalyzerBarContainer>
+        <NavBarIcons
+          type="left"
+          onClick={() => {
+            onLeftClick ? onLeftClick() : history.goBack()
+          }}
+        />
+        <TabContainer>
+          <CrowdAnalyzerTabContainer>{title}</CrowdAnalyzerTabContainer>
+        </TabContainer>
+      </CrowdAnalyzerBarContainer>
+
+      <MainContainer>
+        <SearchBar />
+
+        <FacilityNameContainer>{facility}</FacilityNameContainer>
+        <LevelContainer>{level}</LevelContainer>
+        <LevelValueContainer>{value}</LevelValueContainer>
+      </MainContainer>
+      <BottomNavBar />
+    </PullToRefreshRH>
+  )
+}
+
+export default CrowdAnalyzerPage

frontend/src/routes/Routes.tsx

@@ -109,6 +109,9 @@ export enum PATHS {
 
   //GYM
   GYM_MAIN = '/gym',
+
+  //CROWD_ANALYZER
+  CROWD_ANALYZER = '/crowd',
 }
 
 //DOCUMENTATION
@@ -212,6 +215,9 @@ const Payment = React.lazy(() => import(/* webpackChuckName: "Payment" */ './Sup
 
 //GYM
 const Gym = React.lazy(() => import(/* webpackChunckName: "Gym" */ './GymPage'))
+
+//CROWD_ANALYZER
+const CrowdAnalyzer = React.lazy(() => import(/* webpack: "CrowdAnalyzer" */ './CrowdAnalyzer'))
 export default class Routes extends React.Component {
   render() {
     return (
@@ -284,6 +290,8 @@ export default class Routes extends React.Component {
 
             <PrivateRoute exact path={PATHS.GYM_MAIN} component={Gym} />
 
+            <PrivateRoute exact path={PATHS.CROWD_ANALYZER} component={CrowdAnalyzer} />
+
             <PublicRoute exact path={PATHS.DOCS_LANDING_PAGE} component={Docs} />
             <PublicRoute exact path={PATHS.DOCS_SUPPER_BY_FILE} component={Supper_Documentation} />