React App
+
diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx
index 987543d..f16cb51 100644
--- a/src/components/ScrollableTab.jsx
+++ b/src/components/ScrollableTab.jsx
@@ -1,18 +1,14 @@
import React, { useState } from "react";
-import ReactDOM from "react-dom";
import { Tabs, Tab } from "react-tabs-scrollable";
import "react-tabs-scrollable/dist/rts.css";
-import { Modal } from "@geist-ui/core";
-import PopupModal from "./PopupModal";
var amountTabs = 0;
var reachedEndValue = false;
var rightSideEnd = true;
var endElement = amountTabs;
-function ScrollableTab({ children }) {
- const [activeTab, setActiveTab] = useState(1);
- const [modalVisible, setModalVisible] = useState(false);
+function ScrollableTab({ onActiveTabChange, children }) {
+ const [activeTab, setActiveTab] = useState(0);
// define a onClick function to bind the value on tab click
const onTabClick = (e, index) => {
@@ -27,10 +23,9 @@ function ScrollableTab({ children }) {
if (actionType === "button") {
window.location.href = redirectLoc;
- } else if (actionType === "modal") {
- setModalVisible(true);
}
setActiveTab(index);
+ onActiveTabChange(index);
};
/*
@@ -44,10 +39,6 @@ function ScrollableTab({ children }) {
};
*/
- const closeModal = () => {
- setModalVisible(false);
- };
-
const onHoverElement = () => {};
const onHoverTab = (key) => {
@@ -112,7 +103,6 @@ function ScrollableTab({ children }) {
redirectLoc={k.props.redirectLoc}
>
{k.props.children}
-
);
});
diff --git a/src/index.css b/src/index.css
index 04689fd..70961ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,4 +34,10 @@ canvas {
.centeredLogo {
display: block;
margin: 0 auto;
+}
+
+.leaflet-container {
+ height: 75vh;
+ width: 95%;
+ margin: 10px auto;
}
\ No newline at end of file
diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx
index 72e2f0a..36bc788 100644
--- a/src/pages/study_site_2/StartPage2.jsx
+++ b/src/pages/study_site_2/StartPage2.jsx
@@ -1,13 +1,12 @@
-import React from "react";
-import { getTranslation } from "../../core/i18n/I18NHandler";
+import React, { useState } from "react";
import WebpageBanner from "../../components/webpage_container/WebpageBanner";
import { Tab } from "react-tabs-scrollable";
import {
StudySite,
getHeatmapData,
} from "../../components/webpage_container/StudySite";
-import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
-import { Collapse, Text, Spacer } from "@geist-ui/core";
+import { pushToMouseLog } from "../../core/log/SensorLogger";
+import { Spacer } from "@geist-ui/core";
import ScrollableTab from "../../components/ScrollableTab";
import {
Emoji,
@@ -21,11 +20,38 @@ import {
User,
ArrowUpRight,
} from "@geist-ui/icons";
+import HotelInformation from "./tab_content/HotelInformation";
+import HotelRatings from "./tab_content/HotelRatings";
+import HotelFeatures from "./tab_content/HotelFeatures";
+import HotelRooms from "./tab_content/HotelRooms";
+import HotelFacilities from "./tab_content/HotelFacilities";
+import HotelLocation from "./tab_content/HotelLocation";
+import HotelFlights from "./tab_content/HotelFlights";
+import HotelCatering from "./tab_content/HotelCatering";
+
+
+const tabContent = [
+ (),
+ (),
+ (),
+ (),
+ (),
+ (),
+ "",
+ "",
+ (),
+ (),
+];
function StartPage2({ redirectLoc }) {
+ const [activeTabIndex, setActiveTabIndex] = useState(0);
+
var saveMouseLog = function () {
pushToMouseLog(getHeatmapData());
- //window.location.href = "./" + redirectLoc;
+ };
+
+ var onActiveTabChange = (index) => {
+ setActiveTabIndex(index);
};
// TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
@@ -36,60 +62,62 @@ function StartPage2({ redirectLoc }) {
-
+
Hotel Le Laboratoire
-
-
-
+
+ {tabContent[activeTabIndex]}
+
+
Features
-
+
Facilities
-
+
Location
-
+
Flights
-
+
Rooms
-
+
Catering
-
+
Tour Operators
-
+
Map
-
+
Ratings
-
+
Useful Information
diff --git a/src/pages/study_site_2/TourOperators.jsx b/src/pages/study_site_2/TourOperators.jsx
index f21f5a9..38d588d 100644
--- a/src/pages/study_site_2/TourOperators.jsx
+++ b/src/pages/study_site_2/TourOperators.jsx
@@ -1,5 +1,4 @@
import React from "react";
-import { getTranslation } from "../../core/i18n/I18NHandler";
import WebpageBanner from "../../components/webpage_container/WebpageBanner";
import { Tab } from "react-tabs-scrollable";
import {
diff --git a/src/pages/study_site_2/tab_content/HotelCatering.jsx b/src/pages/study_site_2/tab_content/HotelCatering.jsx
new file mode 100644
index 0000000..8e3a7c5
--- /dev/null
+++ b/src/pages/study_site_2/tab_content/HotelCatering.jsx
@@ -0,0 +1,16 @@
+import { Text } from "@geist-ui/core";
+
+function HotelCatering() {
+ return (
+
+ Our on-site restaurant, The Alchemist, serves a menu inspired by molecular
+ gastronomy and scientific innovation. Guests can enjoy a range of dishes
+ that combine traditional flavors with modern techniques, creating a dining
+ experience that is both delicious and visually stunning. The rooftop bar,
+ The Observatory, offers a selection of cocktails and snacks with a
+ panoramic view of the city.
+
+ );
+}
+
+export default HotelCatering;
diff --git a/src/pages/study_site_2/tab_content/HotelFacilities.jsx b/src/pages/study_site_2/tab_content/HotelFacilities.jsx
new file mode 100644
index 0000000..d752879
--- /dev/null
+++ b/src/pages/study_site_2/tab_content/HotelFacilities.jsx
@@ -0,0 +1,20 @@
+import { Text } from "@geist-ui/core";
+
+function HotelFacilities() {
+ return (
+
+
+ The hotel boasts state-of-the-art facilities designed to enhance your
+ stay:
+
+
+
Fully equipped fitness center
+
Indoor swimming pool
+
Spa and wellness center
+
Conference rooms and event spaces
+
+
+ );
+}
+
+export default HotelFacilities;
diff --git a/src/pages/study_site_2/tab_content/HotelFeatures.jsx b/src/pages/study_site_2/tab_content/HotelFeatures.jsx
new file mode 100644
index 0000000..d7f473d
--- /dev/null
+++ b/src/pages/study_site_2/tab_content/HotelFeatures.jsx
@@ -0,0 +1,21 @@
+import { Text } from "@geist-ui/core";
+
+function HotelFeatures() {
+ return (
+
+
+ Hotel Le Laboratoire offers a unique experience inspired by scientific
+ research and laboratories. Enjoy cutting-edge technology, interactive
+ exhibits, and a futuristic ambiance. Features include:
+
+
+
Modern, science-themed rooms
+
On-site science museum
+
Interactive lab experiences
+
Rooftop observatory
+
+
+ );
+}
+
+export default HotelFeatures;
diff --git a/src/pages/study_site_2/tab_content/HotelFlights.jsx b/src/pages/study_site_2/tab_content/HotelFlights.jsx
new file mode 100644
index 0000000..aab8684
--- /dev/null
+++ b/src/pages/study_site_2/tab_content/HotelFlights.jsx
@@ -0,0 +1,14 @@
+import { Text } from "@geist-ui/core";
+
+function HotelFlights() {
+ return (
+
+ Amsterdam Schiphol Airport is the main international gateway to the city.
+ It offers numerous direct flights to major cities worldwide. Our concierge
+ service can assist you with booking flights and arranging airport
+ transfers.
+
+ );
+}
+
+export default HotelFlights;
diff --git a/src/pages/study_site_2/tab_content/HotelInformation.jsx b/src/pages/study_site_2/tab_content/HotelInformation.jsx
new file mode 100644
index 0000000..e2cc360
--- /dev/null
+++ b/src/pages/study_site_2/tab_content/HotelInformation.jsx
@@ -0,0 +1,18 @@
+import { Description, Spacer } from "@geist-ui/core";
+
+function HotelInformation() {
+ return (
+