diff --git a/03_source/mobile/package-lock.json b/03_source/mobile/package-lock.json index e669229..3ef2b6e 100644 --- a/03_source/mobile/package-lock.json +++ b/03_source/mobile/package-lock.json @@ -47,9 +47,10 @@ "react-spinners": "^0.17.0", "react-star-ratings": "^2.3.0", "react-use": "^17.6.0", + "react-virtuoso": "^4.13.0", "reselect": "^4.0.0", "sass": "^1.59.3", - "swiper": "^9.1.1", + "swiper": "^11.2.8", "use-sound": "^5.0.0", "zod": "^3.25.56" }, @@ -2073,9 +2074,9 @@ } }, "node_modules/decode-named-character-reference": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz", - "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz", + "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==", "license": "MIT", "dependencies": { "character-entities": "^2.0.0" @@ -4937,6 +4938,16 @@ "react-dom": "*" } }, + "node_modules/react-virtuoso": { + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.13.0.tgz", + "integrity": "sha512-XHv2Fglpx80yFPdjZkV9d1baACKghg/ucpDFEXwaix7z0AfVQj+mF6lM+YQR6UC/TwzXG2rJKydRMb3+7iV3PA==", + "license": "MIT", + "peerDependencies": { + "react": ">=16 || >=17 || >= 18 || >= 19", + "react-dom": ">=16 || >=17 || >= 18 || >=19" + } + }, "node_modules/reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", @@ -5300,11 +5311,6 @@ "node": ">= 10.x" } }, - "node_modules/ssr-window": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", - "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" - }, "node_modules/stack-generator": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", @@ -5427,18 +5433,18 @@ } }, "node_modules/style-to-js": { - "version": "1.1.16", - "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz", - "integrity": "sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==", + "version": "1.1.17", + "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz", + "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==", "license": "MIT", "dependencies": { - "style-to-object": "1.0.8" + "style-to-object": "1.0.9" } }, "node_modules/style-to-object": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz", - "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz", + "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==", "license": "MIT", "dependencies": { "inline-style-parser": "0.2.4" @@ -5484,9 +5490,9 @@ } }, "node_modules/swiper": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.1.tgz", - "integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==", + "version": "11.2.8", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz", + "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==", "funding": [ { "type": "patreon", @@ -5497,9 +5503,7 @@ "url": "http://opencollective.com/swiper" } ], - "dependencies": { - "ssr-window": "^4.0.2" - }, + "license": "MIT", "engines": { "node": ">= 4.7.0" } @@ -7588,9 +7592,9 @@ } }, "decode-named-character-reference": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz", - "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz", + "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==", "requires": { "character-entities": "^2.0.0" } @@ -9482,6 +9486,12 @@ "tslib": "^2.1.0" } }, + "react-virtuoso": { + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.13.0.tgz", + "integrity": "sha512-XHv2Fglpx80yFPdjZkV9d1baACKghg/ucpDFEXwaix7z0AfVQj+mF6lM+YQR6UC/TwzXG2rJKydRMb3+7iV3PA==", + "requires": {} + }, "reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", @@ -9738,11 +9748,6 @@ "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==", "dev": true }, - "ssr-window": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", - "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" - }, "stack-generator": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", @@ -9841,17 +9846,17 @@ "dev": true }, "style-to-js": { - "version": "1.1.16", - "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz", - "integrity": "sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==", + "version": "1.1.17", + "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz", + "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==", "requires": { - "style-to-object": "1.0.8" + "style-to-object": "1.0.9" } }, "style-to-object": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz", - "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz", + "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==", "requires": { "inline-style-parser": "0.2.4" } @@ -9885,12 +9890,9 @@ "dev": true }, "swiper": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.1.tgz", - "integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==", - "requires": { - "ssr-window": "^4.0.2" - } + "version": "11.2.8", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz", + "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==" }, "tar": { "version": "6.1.13", diff --git a/03_source/mobile/package.json b/03_source/mobile/package.json index 887588b..ce01b92 100644 --- a/03_source/mobile/package.json +++ b/03_source/mobile/package.json @@ -45,9 +45,10 @@ "react-spinners": "^0.17.0", "react-star-ratings": "^2.3.0", "react-use": "^17.6.0", + "react-virtuoso": "^4.13.0", "reselect": "^4.0.0", "sass": "^1.59.3", - "swiper": "^9.1.1", + "swiper": "^11.2.8", "use-sound": "^5.0.0", "zod": "^3.25.56" }, diff --git a/03_source/mobile/src/App.tsx b/03_source/mobile/src/App.tsx index 611b0db..f29ce47 100644 --- a/03_source/mobile/src/App.tsx +++ b/03_source/mobile/src/App.tsx @@ -71,6 +71,8 @@ import DummyEventPayPage from './pages/DummyEventPayPage'; import PaymentSuccess from './pages/PaymentSuccess'; import PaymentFailed from './pages/PaymentFailed'; import settings from './pages/tabs/carousell_me/settings'; +import HotelWelcomeTour from './pages/HotelWelcomeTour'; +import HotelServiceWifi from './pages/HotelIntro'; setupIonicReact(); @@ -150,6 +152,9 @@ const IonicApp: React.FC = ({ darkMode, schedule, setIsLoggedIn, + + {/* */} + {/* tabs/hotel_service_intro */} { + return new Promise((res, rej) => { + res(contentMd); + }); +} + +export default getContentMarkdown; diff --git a/03_source/mobile/src/api/getHtmlContent.tsx b/03_source/mobile/src/api/getHtmlContent.tsx new file mode 100644 index 0000000..c32e7cd --- /dev/null +++ b/03_source/mobile/src/api/getHtmlContent.tsx @@ -0,0 +1,119 @@ +import React from 'react'; + +const testHtml = ` + + + + + + Document + + + + +
+ 全館Wi-Fiをご利用いただけます。（無料） +
+ +
+
■ ID: hello_user
+
■ Password: my-best-password
+
+ +

HELLOWORLD HOTELでは、

+

全客室・宴会場の一部に

+

有線LAN接続によるインターネット

+

接続環境を開業時より

+

導入しておりましたが、

+

さらなる利便性向上を図るため、

+

このたび、ロビー・客室フロアに無線LAN

+

アクセスポイントを設置し、

+

各客室内でもWi-Fi接続による

+

インターネットを利用できる

+

環境を構築いたしました。

+

より快適なWi-Fi接続サービスによる

+

無料のインターネット接続を

+

ご利用いただけます。

+ + +

■ ご利用いただける端末

+

・LAN / 無線LAN（Wi-Fi規格）アダプタ内蔵PC

+

・WindowsXP以上、Mac OSX以上のOSを搭載したPC

+

・無線LAN（Wi-Fi規格）対応のiOS機器（iPhone・iPad等）

+

・無線LAN（Wi-Fi規格）のAndroid機器（スマートフォン・タブレットPC等）

+ +

■ Wi-Fi接続サービスの規格・接続

+

IEEE802.11 n/b/gの規格に準拠しており、同時使用が可能です。

+

ネットアクセスポイントにつきましては、各ホテルSSIDをフロントにてご案内いたします。

+ +

■ 各ホテル内でインターネット接続サービスが可能なエリア

+

・全客室内（有線LAN・Wi-Fi接続）

+

・フロント前ロビー（Wi-Fi接続）

+

・各宴会場（有線LAN接続）

+ +

■ ご注意

+

※有線・無線LANを通してインターネット接続サービスを無料でご利用いただけます。

+

※Wi-Fi接続サービスは、ホテルのSSIDが発出されている場所でご利用になれますが、場所により電波の届かないエリア、もしくは電波が弱くご利用が難しい場合もあります。

+

※ご利用に際してのセキュリティ設定は、お客様ご自身の責任において行っていただくようにお願いいたします。

+

※本サービスのご利用・予期せぬ停止や不良が原因となり発生した損失や損害については、ホテルは一切の責任は負いかねますので、予めご了承ください。

+

※ネット対戦ゲーム、大容量ファイルの送受信など、回線を長時間占有してのご利用は、他のお客様のご迷惑となりますので、ご遠慮ください。

+ +

待進變果沒致友環健問水法代人苦天。📅📍🎻

+

待進變果沒致友環健問水法代人苦天。📅📍🎻

+

待進變果沒致友環健問水法代人苦天。📅📍🎻

+

待進變果沒致友環健問水法代人苦天。📅📍🎻

+
待進變果沒致友環健問水法代人苦天。📅📍🎻
+
待進變果沒致友環健問水法代人苦天。📅📍🎻
+ +

+ 業立臺四即文善公作有往，等怕準命小電個。 + 査今聞光洋後化外財強主職。 + 🌲🔯🍣💵 🐪👫🐈📅📍🎻💼 🐣🍖🐻📩🍨. 🎇👬💨 +

+ + +

Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻

+

Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻

+

Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻

+

Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻

+
Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻
+
Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information📅📍🎻
+ +

+ Lorem Ipsum: Usage, Common examples, Translation, Variants and technical information + Essay: Lorem Ipsum--when, and when not to use it + 🌲🔯🍣💵 🐪👫🐈📅📍🎻💼 🐣🍖🐻📩🍨. 🎇👬💨 +

+ +

📤🏮👀🍮 💃👪👦🌀🌶📈 🍵📊💓🐧🎢👃 🍕🌛🔎🔋🎣🍃 🎡👩📔🍈💭 🎣👅🔽📟📑💋

+ + +`.trim(); + +function getHtmlContent(): Promise { + return new Promise((res, rej) => { + res(testHtml); + }); +} + +export default getHtmlContent; diff --git a/03_source/mobile/src/api/getUnsplashRandomImage.tsx b/03_source/mobile/src/api/getUnsplashRandomImage.tsx new file mode 100644 index 0000000..c1ae7da --- /dev/null +++ b/03_source/mobile/src/api/getUnsplashRandomImage.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +function getRandomInt(max: number) { + return Math.floor(Math.random() * max); +} + +function getUnsplashRandomImage({ keyword }: { keyword: string }) { + return `https://media.karousell.com/media/photos/profiles/2025/02/05/louis_coding_1738774979_f1598e0b.jpg`; +} + +export default getUnsplashRandomImage; diff --git a/03_source/mobile/src/pages/HotelIntro/index.tsx b/03_source/mobile/src/pages/HotelIntro/index.tsx new file mode 100644 index 0000000..ac3e4c1 --- /dev/null +++ b/03_source/mobile/src/pages/HotelIntro/index.tsx @@ -0,0 +1,221 @@ +import React, { useRef, useEffect, useState } from 'react'; +import { + IonContent, + IonPage, + IonHeader, + IonToolbar, + IonButtons, + IonButton, + IonIcon, + useIonViewWillEnter, + IonBackButton, + IonText, +} from '@ionic/react'; +import { arrowForward, share, star, starOutline } from 'ionicons/icons'; +import { setMenuEnabled } from '../../data/sessions/sessions.actions'; +import { setHasSeenTutorial } from '../../data/user/user.actions'; +import './style.scss'; +import { connect } from '../../data/connect'; +import { RouteComponentProps } from 'react-router'; +import PATHS from '../../PATHS'; +import getUnsplashRandomImage from '../../api/getUnsplashRandomImage'; +import schedulePng from './sampleHeader.png'; + +// import type { Swiper } from 'swiper/types'; +// import type { Swiper as SwiperClass } from 'swiper/types'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import '@ionic/react/css/ionic-swiper.css'; + +import getHtmlContent from '../../api/getHtmlContent'; + +interface OwnProps extends RouteComponentProps {} +interface DispatchProps { + setHasSeenTutorial: typeof setHasSeenTutorial; + setMenuEnabled: typeof setMenuEnabled; +} + +interface TutorialProps extends OwnProps, DispatchProps {} + +const HotelServiceWifi: React.FC = () => { + const [htmlContent, setHtmlContent] = useState(''); + let [loadingContent, setLoadingContent] = useState(true); + useEffect(() => { + getHtmlContent() + .then((res) => setHtmlContent(res.trim())) + .then(() => setLoadingContent(false)); + }, []); + + return ( + + + + + + + + {}}> + {false ? ( + + ) : ( + + )} + + {}}> + + + + + + + + {/* helloworld */} + + +
+ + +
+ + +
+ + + + {/* */} +
+
{}
+
+ + + ); +}; + +export default connect({ + mapDispatchToProps: { + setHasSeenTutorial, + setMenuEnabled, + }, + component: HotelServiceWifi, +}); + +const contentHtml = ` + + + + + + + Document + + + + +
+

helloworld Hotel

+
+ +
〒107-0062 東京都港区南青山1丁目26-1
+
+ +
+
ホテル情報
+
+ + + + + + + + + + +
チェックイン15:00
チェックアウト10:00
夜間玄関施錠25:00
+
+ +
+
ご利用可能なクレジットカード
+
+
+ +
+
helloworld 物語
+
"TRAVEL IS LIFE, DX IS HOW"
+
+ +
+ +
+

異国情緒あふれる館に招かれたような優雅なひととき。

+ +

helloworld LifeHOTELはヨーロッパを中心とした様々なコンセプトで全国に展開しており、ホテルに一歩足を踏み入れた瞬間から、異国情緒あふれるLYNKEDならではの世界観を楽しんでいただけます。

+

ご宿泊の際は、1日の締めくくりにほっとくつろいでいただけるあたたかさと機能性を兼ね備えた客室で。

+

邸宅に招かれたような雰囲気を兼ね備えたレストランでのお食事は、記念日など特別な日にも。

+

オーセンティックな教会や華やかで明るいパーティールームで最高にロマンティックな結婚式を。

+

そのほか各種パーティーや会議、天然温泉をひいたスパ施設など、心あたたまるおもてなしで、みなさまをお迎えいたします。

+

helloworld HOTELのドラマティックステージへようこそ。

+
+ + +`; diff --git a/03_source/mobile/src/pages/HotelIntro/product.png b/03_source/mobile/src/pages/HotelIntro/product.png new file mode 100644 index 0000000..1a22996 Binary files /dev/null and b/03_source/mobile/src/pages/HotelIntro/product.png differ diff --git a/03_source/mobile/src/pages/HotelIntro/profile.png b/03_source/mobile/src/pages/HotelIntro/profile.png new file mode 100644 index 0000000..1f5bf43 Binary files /dev/null and b/03_source/mobile/src/pages/HotelIntro/profile.png differ diff --git a/03_source/mobile/src/pages/HotelIntro/sampleHeader.png b/03_source/mobile/src/pages/HotelIntro/sampleHeader.png new file mode 100644 index 0000000..fceb10c Binary files /dev/null and b/03_source/mobile/src/pages/HotelIntro/sampleHeader.png differ diff --git a/03_source/mobile/src/pages/HotelIntro/schedule.png b/03_source/mobile/src/pages/HotelIntro/schedule.png new file mode 100644 index 0000000..ff14486 Binary files /dev/null and b/03_source/mobile/src/pages/HotelIntro/schedule.png differ diff --git a/03_source/mobile/src/pages/Tutorial.scss b/03_source/mobile/src/pages/HotelIntro/style.scss similarity index 94% rename from 03_source/mobile/src/pages/Tutorial.scss rename to 03_source/mobile/src/pages/HotelIntro/style.scss index 5b9f8a7..5a531be 100644 --- a/03_source/mobile/src/pages/Tutorial.scss +++ b/03_source/mobile/src/pages/HotelIntro/style.scss @@ -10,7 +10,7 @@ .slider { display: grid; - grid-template-columns: repeat(4, 100%); + // grid-template-columns: repeat(4, 100%); grid-template-rows: 1fr; height: 100%; diff --git a/03_source/mobile/src/pages/HotelServiceIntro/index.tsx b/03_source/mobile/src/pages/HotelServiceIntro/index.tsx new file mode 100644 index 0000000..b1c38c2 --- /dev/null +++ b/03_source/mobile/src/pages/HotelServiceIntro/index.tsx @@ -0,0 +1,210 @@ +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonPage, + IonText, + IonToolbar, + useIonRouter, +} from '@ionic/react'; +import React, { useEffect, useState } from 'react'; + +import { star, starOutline, share, chevronBack } from 'ionicons/icons'; + +// import type { Swiper } from 'swiper/types'; +// import type { Swiper as SwiperClass } from 'swiper/types'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import '@ionic/react/css/ionic-swiper.css'; + +import './style.scss'; + +import Sampleheader from './sampleHeader.png'; +import getUnsplashRandomImage from '../../api/getUnsplashRandomImage'; +// import ContentHtml from './ContentHtml.tsx.del'; +import getHtmlContent from '../../api/getHtmlContent'; +import PATHS from '../../PATHS'; + +const tutorialSample1 = { + image: getUnsplashRandomImage({ keyword: 'seafood' }), + title: ` + ## ホテルの利益率は？`.trim(), + content: ` + 新型コロナウイルス感染症拡大により、ホテル業界は厳しい経営を強いられる中、ウィズコロナに向けて。`.trim(), +}; + +const tutorialSample2 = { + image: getUnsplashRandomImage({ keyword: 'hotel' }), + title: ` + ## ホテルの収益構造`.trim(), + content: ` + ホテルの収益構造を分解すると、以下の3部門に分けられます。`.trim(), +}; +const tutorialSample3 = { + image: getUnsplashRandomImage({ keyword: 'hotel' }), + title: ` + ## 宿泊部門`.trim(), + content: ` + ホテル・旅館の主軸となるサービスが宿泊部門で、利用者の宿泊に関する料金が計上されます。`.trim(), +}; +const tutorialSample4 = { + image: getUnsplashRandomImage({ keyword: 'hotel' }), + title: ` + ## 飲食部門`.trim(), + content: ` + ホテルに内設されているレストランやバーで、飲食サービスを提供するのが飲食部門です。`.trim(), +}; +const tutorialSample5 = { + image: getUnsplashRandomImage({ keyword: 'hotel' }), + title: ` + ## 宴会・イベント部門`.trim(), + content: ` + 団体・グループで宴会やイベントを催したい場合に、会場の貸し出しや料理の提供を行うのが宴会・イベント部門です。`.trim(), +}; + +const tutorialSetup = [ + tutorialSample1, + tutorialSample2, + tutorialSample3, + tutorialSample4, + tutorialSample5, +]; +const tutorialLastSlideIdx = tutorialSetup.length - 1; + +interface HotelServiceIntro {} + +const HotelServiceIntro: React.FC = () => { + const route = useIonRouter(); + + // const pageRef = useRef(); + // let [swiper, setSwiper] = useState(); + + const [htmlContent, setHtmlContent] = useState(''); + let [loadingContent, setLoadingContent] = useState(true); + + useEffect(() => { + getHtmlContent() + .then((res) => setHtmlContent(res.trim())) + .then(() => setLoadingContent(false)); + }, []); + + return ( + + + + + route.push(PATHS.EVENT_LIST)}> + + + + + {}}> + {false ? ( + + ) : ( + + )} + + {}}> + + + + + + + + + +
+ + +
+ + +
+ + + +
+
+
+ +
+ {loadingContent ? ( + <>loading content + ) : ( + <> +
+
+
+
+ end +
+ + )} +
+ + + ); +}; + +export default React.memo(HotelServiceIntro); diff --git a/03_source/mobile/src/pages/HotelServiceIntro/product.png b/03_source/mobile/src/pages/HotelServiceIntro/product.png new file mode 100644 index 0000000..1a22996 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceIntro/product.png differ diff --git a/03_source/mobile/src/pages/HotelServiceIntro/profile.png b/03_source/mobile/src/pages/HotelServiceIntro/profile.png new file mode 100644 index 0000000..1f5bf43 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceIntro/profile.png differ diff --git a/03_source/mobile/src/pages/HotelServiceIntro/sampleHeader.png b/03_source/mobile/src/pages/HotelServiceIntro/sampleHeader.png new file mode 100644 index 0000000..fceb10c Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceIntro/sampleHeader.png differ diff --git a/03_source/mobile/src/pages/HotelServiceIntro/schedule.png b/03_source/mobile/src/pages/HotelServiceIntro/schedule.png new file mode 100644 index 0000000..ff14486 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceIntro/schedule.png differ diff --git a/03_source/mobile/src/pages/HotelServiceIntro/style.scss b/03_source/mobile/src/pages/HotelServiceIntro/style.scss new file mode 100644 index 0000000..241b8e3 --- /dev/null +++ b/03_source/mobile/src/pages/HotelServiceIntro/style.scss @@ -0,0 +1,2 @@ +#hotel-service-intro-page { +} diff --git a/03_source/mobile/src/pages/HotelServiceWifi/index.tsx b/03_source/mobile/src/pages/HotelServiceWifi/index.tsx new file mode 100644 index 0000000..7f26eb2 --- /dev/null +++ b/03_source/mobile/src/pages/HotelServiceWifi/index.tsx @@ -0,0 +1,126 @@ +import React, { useEffect, useState } from 'react'; +import { + IonContent, + IonPage, + IonHeader, + IonToolbar, + IonButtons, + IonButton, + IonIcon, + IonBackButton, +} from '@ionic/react'; +import { share, star, starOutline } from 'ionicons/icons'; +import { setMenuEnabled } from '../../data/sessions/sessions.actions'; +import { setHasSeenTutorial } from '../../data/user/user.actions'; +import './style.scss'; +import { connect } from '../../data/connect'; +import { RouteComponentProps } from 'react-router'; + +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import '@ionic/react/css/ionic-swiper.css'; + +import getHtmlContent from '../../api/getHtmlContent'; + +interface OwnProps extends RouteComponentProps {} +interface DispatchProps { + setHasSeenTutorial: typeof setHasSeenTutorial; + setMenuEnabled: typeof setMenuEnabled; +} + +interface TutorialProps extends OwnProps, DispatchProps {} + +const HotelServiceWifi: React.FC = () => { + const [htmlContent, setHtmlContent] = useState(''); + let [loadingContent, setLoadingContent] = useState(true); + + useEffect(() => { + getHtmlContent() + .then((res) => setHtmlContent(res.trim())) + .then(() => setLoadingContent(false)); + }, []); + + return ( + + + + + + + + {}}> + {false ? ( + + ) : ( + + )} + + {}}> + + + + + + + + {/* helloworld */} + + +
+ + +
+ + +
+ + + + {/* */} +
+
{}
+
+ + + ); +}; + +export default connect({ + mapDispatchToProps: { + setHasSeenTutorial, + setMenuEnabled, + }, + component: HotelServiceWifi, +}); diff --git a/03_source/mobile/src/pages/HotelServiceWifi/product.png b/03_source/mobile/src/pages/HotelServiceWifi/product.png new file mode 100644 index 0000000..1a22996 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceWifi/product.png differ diff --git a/03_source/mobile/src/pages/HotelServiceWifi/profile.png b/03_source/mobile/src/pages/HotelServiceWifi/profile.png new file mode 100644 index 0000000..1f5bf43 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceWifi/profile.png differ diff --git a/03_source/mobile/src/pages/HotelServiceWifi/sampleHeader.png b/03_source/mobile/src/pages/HotelServiceWifi/sampleHeader.png new file mode 100644 index 0000000..fceb10c Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceWifi/sampleHeader.png differ diff --git a/03_source/mobile/src/pages/HotelServiceWifi/schedule.png b/03_source/mobile/src/pages/HotelServiceWifi/schedule.png new file mode 100644 index 0000000..ff14486 Binary files /dev/null and b/03_source/mobile/src/pages/HotelServiceWifi/schedule.png differ diff --git a/03_source/mobile/src/pages/HotelServiceWifi/style.scss b/03_source/mobile/src/pages/HotelServiceWifi/style.scss new file mode 100644 index 0000000..5a531be --- /dev/null +++ b/03_source/mobile/src/pages/HotelServiceWifi/style.scss @@ -0,0 +1,56 @@ +#tutorial-page { + ion-toolbar { + --background: transparent; + --border-color: transparent; + } + + .slide-title { + margin-top: 2.8rem; + } + + .slider { + display: grid; + // grid-template-columns: repeat(4, 100%); + grid-template-rows: 1fr; + + height: 100%; + + overflow: scroll; + scroll-snap-type: x mandatory; + } + + section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + width: 100%; + + scroll-snap-align: center; + scroll-snap-stop: always; + } + + .slide-image { + max-height: 50%; + max-width: 60%; + margin: -5vh 0 0; + pointer-events: none; + } + + b { + font-weight: 500; + } + + p { + padding: 0 40px; + font-size: 14px; + line-height: 1.5; + color: var(--ion-color-step-600, #60646b); + + b { + color: var(--ion-text-color, #000000); + } + } +} diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/index.tsx b/03_source/mobile/src/pages/HotelWelcomeTour/index.tsx new file mode 100644 index 0000000..f1d26eb --- /dev/null +++ b/03_source/mobile/src/pages/HotelWelcomeTour/index.tsx @@ -0,0 +1,155 @@ +import React, { useRef, useEffect } from 'react'; +import { + IonContent, + IonPage, + IonHeader, + IonToolbar, + IonButtons, + IonButton, + IonIcon, + useIonViewWillEnter, +} from '@ionic/react'; +import { arrowForward } from 'ionicons/icons'; +import { setMenuEnabled } from '../../data/sessions/sessions.actions'; +import { setHasSeenTutorial } from '../../data/user/user.actions'; +import './style.scss'; +import { connect } from '../../data/connect'; +import { RouteComponentProps } from 'react-router'; +import PATHS from '../../PATHS'; +import getUnsplashRandomImage from '../../api/getUnsplashRandomImage'; +import schedulePng from './sampleHeader.png'; + +interface OwnProps extends RouteComponentProps {} +interface DispatchProps { + setHasSeenTutorial: typeof setHasSeenTutorial; + setMenuEnabled: typeof setMenuEnabled; +} + +interface TutorialProps extends OwnProps, DispatchProps {} + +const HotelWelcomeTour: React.FC = ({ + history, + setHasSeenTutorial, + setMenuEnabled, +}) => { + const sliderRef = useRef(null); + + useIonViewWillEnter(() => { + setMenuEnabled(false); + // Scroll to first slide when entering the tutorial + if (sliderRef.current) { + sliderRef.current.scrollTo({ + left: 0, + behavior: 'smooth', + }); + } + }); + + const startApp = async () => { + await setHasSeenTutorial(true); + await setMenuEnabled(true); + + history.push(PATHS.EVENT_LIST, { direction: 'none' }); + }; + + return ( + + + + + + Skip + + + + + {/* */} + +
+ {/* */} +
+
+
+

ホテルの利益率は？

+

+ 新型コロナウイルス感染症拡大により、ホテル業界は厳しい経営を強いられる中、ウィズコロナに向けて。 +

+
+
+ {/* */} +
+
+
+

ホテルの利益率は？

+

+ 新型コロナウイルス感染症拡大により、ホテル業界は厳しい経営を強いられる中、ウィズコロナに向けて。 +

+
+
+ {/* */} + +
+
+ +

飲食部門

+

+ ホテルに内設されているレストランやバーで、飲食サービスを提供するのが飲食部門です。 +

+
+
+ {/* */} +
+
+ +

宴会・イベント部門

+

+ 団体・グループで宴会やイベントを催したい場合に、会場の貸し出しや料理の提供を行うのが宴会・イベント部門です。 +

+ + Continue + + +
+
+
+ + + ); +}; + +export default connect({ + mapDispatchToProps: { + setHasSeenTutorial, + setMenuEnabled, + }, + component: HotelWelcomeTour, +}); diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/product.png b/03_source/mobile/src/pages/HotelWelcomeTour/product.png new file mode 100644 index 0000000..1a22996 Binary files /dev/null and b/03_source/mobile/src/pages/HotelWelcomeTour/product.png differ diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/profile.png b/03_source/mobile/src/pages/HotelWelcomeTour/profile.png new file mode 100644 index 0000000..1f5bf43 Binary files /dev/null and b/03_source/mobile/src/pages/HotelWelcomeTour/profile.png differ diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/sampleHeader.png b/03_source/mobile/src/pages/HotelWelcomeTour/sampleHeader.png new file mode 100644 index 0000000..fceb10c Binary files /dev/null and b/03_source/mobile/src/pages/HotelWelcomeTour/sampleHeader.png differ diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/schedule.png b/03_source/mobile/src/pages/HotelWelcomeTour/schedule.png new file mode 100644 index 0000000..ff14486 Binary files /dev/null and b/03_source/mobile/src/pages/HotelWelcomeTour/schedule.png differ diff --git a/03_source/mobile/src/pages/HotelWelcomeTour/style.scss b/03_source/mobile/src/pages/HotelWelcomeTour/style.scss new file mode 100644 index 0000000..5a531be --- /dev/null +++ b/03_source/mobile/src/pages/HotelWelcomeTour/style.scss @@ -0,0 +1,56 @@ +#tutorial-page { + ion-toolbar { + --background: transparent; + --border-color: transparent; + } + + .slide-title { + margin-top: 2.8rem; + } + + .slider { + display: grid; + // grid-template-columns: repeat(4, 100%); + grid-template-rows: 1fr; + + height: 100%; + + overflow: scroll; + scroll-snap-type: x mandatory; + } + + section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + width: 100%; + + scroll-snap-align: center; + scroll-snap-stop: always; + } + + .slide-image { + max-height: 50%; + max-width: 60%; + margin: -5vh 0 0; + pointer-events: none; + } + + b { + font-weight: 500; + } + + p { + padding: 0 40px; + font-size: 14px; + line-height: 1.5; + color: var(--ion-color-step-600, #60646b); + + b { + color: var(--ion-text-color, #000000); + } + } +} diff --git a/03_source/mobile/src/pages/Insights/buy_sell.svg b/03_source/mobile/src/pages/Insights/buy_sell.svg new file mode 100644 index 0000000..98fb7f8 --- /dev/null +++ b/03_source/mobile/src/pages/Insights/buy_sell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/03_source/mobile/src/pages/Insights/histogram.jpg b/03_source/mobile/src/pages/Insights/histogram.jpg new file mode 100644 index 0000000..926c0e6 Binary files /dev/null and b/03_source/mobile/src/pages/Insights/histogram.jpg differ diff --git a/03_source/mobile/src/pages/Insights/index.tsx b/03_source/mobile/src/pages/Insights/index.tsx new file mode 100644 index 0000000..26f531a --- /dev/null +++ b/03_source/mobile/src/pages/Insights/index.tsx @@ -0,0 +1,124 @@ +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonPage, + IonPopover, + IonSegment, + IonSegmentButton, + IonText, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { star, starOutline } from 'ionicons/icons'; +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +// import AboutPopover from '../../components/AboutPopover'; + +import './style.scss'; +import histogramJpg from './histogram.jpg'; +import buySellSvg from './buy_sell.svg'; + +type SessionListProps = { + hide: boolean; +}; + +const ShoutoutContent: React.FC = ({ hide }) => { + if (hide) return <>; + return ( + <> +
+ +
Create a shoutout to reach more buyers
+ +
+ + der of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it + is pleasure, but because those who do not know how to pursue pleasure rationally + encounter consequences that are extremely painful. Nor again is there + + +
+
+ + ); +}; + +const VisitsContent: React.FC = ({ hide }) => { + if (hide) return <>; + return ( + <> + + + ); +}; + +interface InsightsProps {} + +const Insights: React.FC = () => { + const [showPopover, setShowPopover] = useState(false); + const [popoverEvent, setPopoverEvent] = useState(); + const [location, setLocation] = useState<'madison' | 'austin' | 'chicago' | 'seattle'>('madison'); + const [conferenceDate, setConferenceDate] = useState('2047-05-17T00:00:00-05:00'); + + const [segment, setSegment] = useState<'visits' | 'shoutout'>('visits'); + const { t } = useTranslation(); + + return ( + + + + + + + + + {}}> + {false ? ( + + ) : ( + + )} + + + + + + +
+ +

Insights

+ +
{' '} + setSegment(e.detail.value as any)} + > + {t('Visits')} + {t('Shoutout')} + + + + + + {/* + setShowPopover(false)}> + setShowPopover(false)} /> + + */} + + ); +}; + +export default React.memo(Insights); diff --git a/03_source/mobile/src/pages/Insights/style.scss b/03_source/mobile/src/pages/Insights/style.scss new file mode 100644 index 0000000..3a5e059 --- /dev/null +++ b/03_source/mobile/src/pages/Insights/style.scss @@ -0,0 +1,2 @@ +#sample-blank-page { +} diff --git a/03_source/mobile/src/pages/MainTabs/index.tsx b/03_source/mobile/src/pages/MainTabs/index.tsx index d940508..c11ee70 100644 --- a/03_source/mobile/src/pages/MainTabs/index.tsx +++ b/03_source/mobile/src/pages/MainTabs/index.tsx @@ -65,24 +65,29 @@ 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: '/tabs/hotel_service_intro' }, - { name: '接機服務', icon: svgIcon2, targetUrl: '/tabs/hotel_service_intro' }, + { 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: '/tabs/hotel_service_intro' }, - { name: '會議室', icon: svgIcon6, targetUrl: '/tabs/hotel_service_intro' }, - { name: '托兒服務', icon: svgIcon7, targetUrl: '/tabs/hotel_service_intro' }, - { name: '茶室', icon: svgIcon8, targetUrl: '/tabs/hotel_service_intro' }, - { name: '多功能室', icon: svgIcon9, targetUrl: '/tabs/hotel_service_intro' }, - { name: '商務便利設施', icon: svgIcon10, targetUrl: '/tabs/hotel_service_intro' }, - { name: '健身室', icon: svgIcon11, targetUrl: '/tabs/hotel_service_intro' }, - { name: '公共區域 Wi-Fi免費', icon: svgIcon12, targetUrl: '/tabs/hotel_service_intro' }, - { name: '貨幣兌換', icon: svgIcon13, targetUrl: '/tabs/hotel_service_intro' }, - { name: '行李寄存免費', icon: svgIcon14, targetUrl: '/tabs/hotel_service_intro' }, - { name: '叫醒服務', icon: svgIcon16, targetUrl: '/tabs/hotel_service_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' }, ]; @@ -136,13 +141,18 @@ const MainTabs: React.FC = () => { {/* */} } exact={true} /> + {/* - */} + + + + } exact={true} /> + diff --git a/03_source/mobile/src/pages/OrderHistory/OrderHistoryItem/index.tsx b/03_source/mobile/src/pages/OrderHistory/OrderHistoryItem/index.tsx new file mode 100644 index 0000000..f34914d --- /dev/null +++ b/03_source/mobile/src/pages/OrderHistory/OrderHistoryItem/index.tsx @@ -0,0 +1,71 @@ +import { IonItem, IonText } from '@ionic/react'; +import React from 'react'; + +interface OrderHistoryItemProps { + status: string; + quantity: number; + price: number; + name: string; + time: string; +} + +const OrderHistoryItem: React.FC = ({ + status, + quantity, + price, + name, + time, +}) => { + let statusBgColor = ['rgba(128,0,0,0.1)', 'rgba(0,128,0,0.1)', 'rgba(0,0,128,0.1)']; + let statusTextcolor = ['rgba(128,0,0,0.9)', 'rgba(0,128,0,0.9)', 'rgba(0,0,128,0.9)']; + let statusMap = ['準備中', '提供済', 'キャンセル']; + let statusIdx = statusMap.indexOf(status) || 0; + + return ( + <> + +
+ + {status} + +
+
+
+ {name} +
受付: {time}
+
+
+ + ¥{price} x {quantity}点 + +
+
+ + + ); +}; + +export default React.memo(OrderHistoryItem); diff --git a/03_source/mobile/src/pages/OrderHistory/index.tsx b/03_source/mobile/src/pages/OrderHistory/index.tsx new file mode 100644 index 0000000..3460c16 --- /dev/null +++ b/03_source/mobile/src/pages/OrderHistory/index.tsx @@ -0,0 +1,229 @@ +import { + IonAvatar, + IonBackButton, + IonButton, + IonButtons, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonChip, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonPage, + IonText, + IonTitle, + IonToolbar, + useIonRouter, +} from '@ionic/react'; +import React from 'react'; +import { Virtuoso } from 'react-virtuoso'; + +import { arrowBackCircleOutline, share, star, starOutline } from 'ionicons/icons'; +import './style.scss'; +import OrderHistoryItem from './OrderHistoryItem'; + +const orderList = [ + { + status: '準備中', + quantity: 1, + price: 1, + name: 'テスト', + time: '23年02月08日 16時43分', + }, + + { + status: '提供済', + quantity: 1, + price: 1, + name: 'テスト', + time: '23年02月08日 16時43分', + }, + + { + status: 'キャンセル', + quantity: 1, + price: 1, + name: 'テスト', + time: '23年02月08日 16時43分', + }, +]; + +interface OrderHistoryProps {} + +const OrderHistory: React.FC = () => { + const route = useIonRouter(); + const test = () => { + console.log(route); + }; + return ( + <> + + + + + + + 注文履歴 + + {}}> + {false ? ( + + ) : ( + + )} + + {}}> + + + + + + + +
+ + + + 已 order 清單 + + { + return ( + <> + + + + + + + ); + }} + /> + + + +
+ + +
+
+
+ + 合計 + +
+
+ + ¥1000 + +
+
+
+
+ + 割り勘する + +
+
+ 1 +
+
+
+
+ + 合計 + +
+
+ 一人当たり ¥1 +
+
+
+ + +
+
+ + + + ); +}; + +export default React.memo(OrderHistory); diff --git a/03_source/mobile/src/pages/OrderHistory/style.scss b/03_source/mobile/src/pages/OrderHistory/style.scss new file mode 100644 index 0000000..919d1e0 --- /dev/null +++ b/03_source/mobile/src/pages/OrderHistory/style.scss @@ -0,0 +1,2 @@ +#order-history-page { +} diff --git a/03_source/mobile/src/pages/Tutorial.tsx b/03_source/mobile/src/pages/Tutorial.tsx deleted file mode 100644 index 9c1931d..0000000 --- a/03_source/mobile/src/pages/Tutorial.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import { - IonContent, - IonPage, - IonHeader, - IonToolbar, - IonButtons, - IonButton, - IonIcon, - useIonViewWillEnter, -} from '@ionic/react'; -import { arrowForward } from 'ionicons/icons'; -import { setMenuEnabled } from '../data/sessions/sessions.actions'; -import { setHasSeenTutorial } from '../data/user/user.actions'; -import './Tutorial.scss'; -import { connect } from '../data/connect'; -import { RouteComponentProps } from 'react-router'; - -interface OwnProps extends RouteComponentProps {} -interface DispatchProps { - setHasSeenTutorial: typeof setHasSeenTutorial; - setMenuEnabled: typeof setMenuEnabled; -} - -interface TutorialProps extends OwnProps, DispatchProps {} - -const Tutorial: React.FC = ({ history, setHasSeenTutorial, setMenuEnabled }) => { - useIonViewWillEnter(() => { - setMenuEnabled(false); - }); - - const startApp = async () => { - await setHasSeenTutorial(true); - await setMenuEnabled(true); - history.push('/tabs/schedule', { direction: 'none' }); - }; - - return ( - - - - - - Skip - - - - - -
-
-
- -

- Welcome to ICA -

-

- The ionic conference app is a practical preview of the ionic framework in - action, and a demonstration of proper code use. -

-
-
-
-
- -

What is Ionic?

-

- Ionic Framework is an open source SDK that enables developers to build high - quality mobile apps with web technologies like HTML, CSS, and JavaScript. -

-
-
-
-
- -

What is Ionic Appflow?

-

- Ionic Appflow is a powerful set of services and features built on top of - Ionic Framework that brings a totally new level of app development agility to mobile - dev teams. -

-
-
-
-
- -

Ready to Play?

- - Continue - - -
-
-
- - - ); -}; - -export default connect({ - mapDispatchToProps: { - setHasSeenTutorial, - setMenuEnabled, - }, - component: Tutorial, -}); diff --git a/03_source/mobile/src/pages/Tutorial/index copy.tsx b/03_source/mobile/src/pages/Tutorial/index copy.tsx deleted file mode 100644 index 0e6ea72..0000000 --- a/03_source/mobile/src/pages/Tutorial/index copy.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useRef, useEffect } from 'react'; -import { - IonContent, - IonPage, - IonHeader, - IonToolbar, - IonButtons, - IonButton, - IonIcon, - useIonViewWillEnter, -} from '@ionic/react'; -import { arrowForward } from 'ionicons/icons'; -import { setMenuEnabled } from '../../data/sessions/sessions.actions'; -import { setHasSeenTutorial } from '../../data/user/user.actions'; -import './Tutorial.scss'; -import { connect } from '../../data/connect'; -import { RouteComponentProps } from 'react-router'; - -interface OwnProps extends RouteComponentProps {} -interface DispatchProps { - setHasSeenTutorial: typeof setHasSeenTutorial; - setMenuEnabled: typeof setMenuEnabled; -} - -interface TutorialProps extends OwnProps, DispatchProps {} - -const Tutorial: React.FC = ({ history, setHasSeenTutorial, setMenuEnabled }) => { - const sliderRef = useRef(null); - - useIonViewWillEnter(() => { - setMenuEnabled(false); - // Scroll to first slide when entering the tutorial - if (sliderRef.current) { - sliderRef.current.scrollTo({ - left: 0, - behavior: 'smooth', - }); - } - }); - - const startApp = async () => { - await setHasSeenTutorial(true); - await setMenuEnabled(true); - history.push('/tabs/schedule', { direction: 'none' }); - }; - - return ( - - - - - - Skip - - - - - -
-
-
- -

- Welcome to ICA -

-

- The ionic conference app is a practical preview of the ionic framework in - action, and a demonstration of proper code use. -

-
-
-
-
- -

What is Ionic?

-

- Ionic Framework is an open source SDK that enables developers to build high - quality mobile apps with web technologies like HTML, CSS, and JavaScript. -

-
-
-
-
- -

What is Ionic Appflow?

-

- Ionic Appflow is a powerful set of services and features built on top of - Ionic Framework that brings a totally new level of app development agility to mobile - dev teams. -

-
-
-
-
- -

Ready to Play?

- - Continue - - -
-
-
- - - ); -}; - -export default connect({ - mapDispatchToProps: { - setHasSeenTutorial, - setMenuEnabled, - }, - component: Tutorial, -}); diff --git a/HKSingleParty.code-workspace b/HKSingleParty.code-workspace index 2c8b98d..9b4ead4 100644 --- a/HKSingleParty.code-workspace +++ b/HKSingleParty.code-workspace @@ -20,9 +20,6 @@ }, { "path": "98_AI_workspace" - }, - { - "path": "99_references" } ], "settings": {