198 lines
9.7 KiB
TypeScript
198 lines
9.7 KiB
TypeScript
// REQ0116/main-tab
|
|
//
|
|
import React, { useEffect, useState } from 'react';
|
|
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel, IonButton } from '@ionic/react';
|
|
import { Route, Redirect } from 'react-router';
|
|
import { calendar, location, informationCircle, people } from 'ionicons/icons';
|
|
import SchedulePage from '../SchedulePage';
|
|
import SpeakerList from '../SpeakerList';
|
|
import SpeakerDetail from '../SpeakerDetail';
|
|
import SessionDetail from '../SessionDetail';
|
|
import MapView from '../MapView';
|
|
import About from '../About';
|
|
import EventList from '../EventList';
|
|
import MembersNearByList from '../MembersNearByList';
|
|
import OrderList from '../OrderList';
|
|
import MyProfile from '../MyProfile';
|
|
import MessageList from '../MessageList';
|
|
import PATHS from '../../PATHS';
|
|
import Favourites from '../Favourites';
|
|
import Helloworld from '../Helloworld';
|
|
import TabAppRoute from '../../TabAppRoute';
|
|
import CarousellMe from '../CarousellMe';
|
|
import ServiceMenu from './ServiceMenu';
|
|
|
|
//
|
|
import QRPage from '../tabs/carousell_me/QRPage';
|
|
|
|
//
|
|
import svgIcon1 from './icons/air-conditioning-cooling-heat-temperature-svgrepo-com.svg';
|
|
import svgIcon2 from './icons/alert-attention-caution-dangerous-warning-svgrepo-com.svg';
|
|
import svgIcon3 from './icons/alert-bell-call-message-sign-svgrepo-com.svg';
|
|
import svgIcon4 from './icons/assistance-business-person-reception-service-svgrepo-com.svg';
|
|
import svgIcon5 from './icons/bag-baggage-luggage-suitcase-travel-svgrepo-com.svg';
|
|
import svgIcon6 from './icons/baggage-bellhop-hotel-service-waiter-svgrepo-com.svg';
|
|
import svgIcon7 from './icons/bag-holiday-journey-suitcase-vacation-svgrepo-com.svg';
|
|
import svgIcon8 from './icons/banking-financial-money-payment-transaction-svgrepo-com.svg';
|
|
import svgIcon9 from './icons/bar-cafe-chair-club-stool-svgrepo-com.svg';
|
|
import svgIcon10 from './icons/bath-bathroom-cotton-textile-towel-svgrepo-com.svg';
|
|
import svgIcon11 from './icons/bathroom-bathtub-bubble-foam-water-svgrepo-com.svg';
|
|
import svgIcon12 from './icons/bathroom-faucet-room-sink-wash-svgrepo-com.svg';
|
|
import svgIcon13 from './icons/bed-furniture-interior-pillow-rest-2-svgrepo-com.svg';
|
|
import svgIcon14 from './icons/bed-furniture-interior-pillow-rest-3-svgrepo-com.svg';
|
|
import svgIcon15 from './icons/bed-furniture-interior-pillow-rest-svgrepo-com.svg';
|
|
import svgIcon16 from './icons/book-catalog-document-guidebook-instruction-svgrepo-com.svg';
|
|
import svgIcon17 from './icons/business-finance-money-saving-wallet-svgrepo-com.svg';
|
|
import svgIcon18 from './icons/cafe-card-food-menu-vintage-svgrepo-com.svg';
|
|
import svgIcon19 from './icons/cafe-cup-drink-mug-tea-svgrepo-com.svg';
|
|
import svgIcon20 from './icons/calendar-date-day-month-time-svgrepo-com.svg';
|
|
import svgIcon21 from './icons/cappuccino-coffee-cup-drink-espresso-2-svgrepo-com.svg';
|
|
import svgIcon22 from './icons/cappuccino-coffee-cup-drink-espresso-svgrepo-com.svg';
|
|
import svgIcon23 from './icons/card-credit-currency-finance-money-svgrepo-com.svg';
|
|
import svgIcon24 from './icons/card-door-key-lock-security-svgrepo-com.svg';
|
|
import svgIcon25 from './icons/chair-comfortable-decoration-garden-terrace-svgrepo-com.svg';
|
|
import svgIcon26 from './icons/clean-clothing-laundry-washing-wind-svgrepo-com.svg';
|
|
import svgIcon27 from './icons/comfortable-fabric-footwear-shoe-slipper-svgrepo-com.svg';
|
|
import svgIcon28 from './icons/coupon-entertainment-event-paper-ticket-svgrepo-com.svg';
|
|
import svgIcon29 from './icons/door-elevator-entrance-floor-lift-svgrepo-com.svg';
|
|
import svgIcon30 from './icons/door-enter-entry-exit-open-svgrepo-com.svg';
|
|
import svgIcon31 from './icons/door-entrance-handle-key-security-svgrepo-com.svg';
|
|
import svgIcon32 from './icons/door-key-lock-room-security-svgrepo-com.svg';
|
|
import svgIcon33 from './icons/electronic-internet-screen-technology-television-svgrepo-com.svg';
|
|
import svgIcon34 from './icons/holiday-hotel-journey-service-travel-2-svgrepo-com.svg';
|
|
import svgIcon35 from './icons/holiday-hotel-journey-service-travel-svgrepo-com.svg';
|
|
import svgIcon36 from './icons/holiday-hotel-motel-sign-travel-svgrepo-com.svg';
|
|
import svgIcon37 from './icons/holiday-journey-luggage-suitcase-vacation-2-svgrepo-com.svg';
|
|
import svgIcon38 from './icons/hotel-location-map-pin-travel-svgrepo-com.svg';
|
|
import getButtonSvg from '../../api/getButtonSvg';
|
|
import HotelServiceIntro from '../HotelWelcomeTour';
|
|
import HotelIntro from '../HotelIntro';
|
|
import HotelServiceWifi from '../HotelServiceIntro';
|
|
import OrderHistory from '../OrderHistory';
|
|
import Insights from '../Insights';
|
|
//
|
|
|
|
const hotelServiceMenu = [
|
|
{ name: '停車場', icon: svgIcon1, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '接機服務', icon: svgIcon2, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '餐廳', icon: svgIcon3, targetUrl: '/tabs/hotel/:hotelid/restaurants' },
|
|
{ name: '咖啡室', icon: svgIcon4, targetUrl: '/tabs/restaurant/:restaurant_id/food/:food_id/intro' },
|
|
{ name: '酒吧', icon: svgIcon5, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '會議室', icon: svgIcon6, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '托兒服務', icon: svgIcon7, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '茶室', icon: svgIcon8, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '多功能室', icon: svgIcon9, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '商務便利設施', icon: svgIcon10, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '健身室', icon: svgIcon11, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '公共區域 Wi-Fi免費', icon: svgIcon12, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '貨幣兌換', icon: svgIcon13, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: 'wifi', icon: svgIcon14, targetUrl: PATHS.HOTEL_SERVICE_WIFI },
|
|
{ name: '叫醒服務', icon: svgIcon16, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
|
|
{ name: '關於酒店', icon: svgIcon16, targetUrl: '/tabs/hotel_intro' },
|
|
];
|
|
|
|
interface MainTabsProps {}
|
|
|
|
const MainTabs: React.FC<MainTabsProps> = () => {
|
|
let [buttonSvg, setButtonSvg] = useState<string | null>(null);
|
|
|
|
let [mainTabVisible, setMainTabVisible] = useState<'bottom' | undefined>(undefined);
|
|
let [showCenterButton, setShowCenterButton] = useState(mainTabVisible == 'bottom');
|
|
|
|
const hideMainTab = () => {
|
|
setMainTabVisible(undefined);
|
|
setShowCenterButton(false);
|
|
};
|
|
const showMainTab = () => {
|
|
setMainTabVisible('bottom');
|
|
setShowCenterButton(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
getButtonSvg().then((res) => setButtonSvg(res));
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<ServiceMenu buttonSvg={buttonSvg} hotelServiceMenu={hotelServiceMenu} showCenterButton={showCenterButton} />
|
|
|
|
{/* */}
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
{/* REQ0117/default-route */}
|
|
<Redirect exact path="/tabs" to="/tabs/events" />
|
|
|
|
{/*
|
|
Using the render method prop cuts down the number of renders your components will have due to route changes.
|
|
Use the component prop when your component depends on the RouterComponentProps passed in automatically.
|
|
*/}
|
|
|
|
<Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
|
|
<Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
|
|
<Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />
|
|
|
|
<Route path="/tabs/schedule/:id" component={SessionDetail} />
|
|
<Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
|
|
<Route path="/tabs/map" render={() => <MapView />} exact={true} />
|
|
|
|
<Route path="/tabs/about" render={() => <About />} exact={true} />
|
|
<Route path="/tabs/helloworld" render={() => <Helloworld />} exact={true} />
|
|
|
|
{/* */}
|
|
<Route path={PATHS.CAROUSELL_ME} render={() => <CarousellMe />} exact={true} />
|
|
<Route path={PATHS.CAROUSELL_ME_QR} component={QRPage} exact={true} />
|
|
<Route path={PATHS.CAROUSELL_ME_INSIGHTS} component={Insights} exact={true} />
|
|
{/*
|
|
<Route path="/tabs/carousell_me/OffersMade" component={OffersMade} exact={true} />
|
|
<Route path="/tabs/carousell_me/settings" component={Settings} exact={true} />
|
|
<Route path="/tabs/carousell_me/my_profile" component={MyProfile} exact={true} />
|
|
*/}
|
|
|
|
<Route path={PATHS.HOTEL_INTRO} component={HotelIntro} exact={true} />
|
|
<Route path={PATHS.HOTEL_SERVICE_WIFI} component={HotelServiceWifi} exact={true} />
|
|
|
|
<Route path="/tabs/restaurant/:restaurant_id/order_history" render={() => <OrderHistory />} exact={true} />
|
|
|
|
<TabAppRoute />
|
|
</IonRouterOutlet>
|
|
|
|
<IonTabBar slot="bottom">
|
|
{/*
|
|
<IonTabButton tab="speakers" href={'/tabs/speakers'}>
|
|
<IonIcon icon={calendar} />
|
|
<IonLabel>Speakers</IonLabel>
|
|
</IonTabButton>
|
|
*/}
|
|
|
|
<IonTabButton tab="events" href={PATHS.EVENT_LIST}>
|
|
<IonIcon icon={calendar} />
|
|
<IonLabel>Event</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
|
|
<IonIcon icon={people} />
|
|
<IonLabel>Nearby</IonLabel>
|
|
</IonTabButton>
|
|
{/*
|
|
<IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
|
|
<IonIcon icon={location} />
|
|
<IonLabel>Order</IonLabel>
|
|
</IonTabButton>
|
|
*/}
|
|
<IonTabButton disabled></IonTabButton>
|
|
|
|
<IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>Message</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="my_profile" href={PATHS.PROFILE}>
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>Profile</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainTabs;
|