8 changed files with 352 additions and 8 deletions
-
28package-lock.json
-
2package.json
-
3public/locales/de/translation.json
-
3public/locales/en/translation.json
-
12src/App.js
-
107src/components/ScrollableTab.jsx
-
102src/pages/study_site_2/StartPage2.jsx
-
103src/pages/study_site_2/TourOperators.jsx
@ -0,0 +1,107 @@ |
|||||
|
import React from "react"; |
||||
|
import { Tabs, Tab } from "react-tabs-scrollable"; |
||||
|
import "react-tabs-scrollable/dist/rts.css"; |
||||
|
|
||||
|
var amountTabs = 0; |
||||
|
var reachedEndValue = false; |
||||
|
var rightSideEnd = true; |
||||
|
var endElement = amountTabs; |
||||
|
|
||||
|
export default class ScrollableTab extends React.Component { |
||||
|
//extends AudioPlayer { |
||||
|
|
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.state = { |
||||
|
activeTab: 1, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// define a onClick function to bind the value on tab click |
||||
|
onTabClick(e, index) { |
||||
|
this.setState({ activeTab: index }); |
||||
|
} |
||||
|
|
||||
|
onHoverElement() {} |
||||
|
|
||||
|
onHoverTab(key) { |
||||
|
const clamp = (num, min, max) => Math.min(Math.max(num, min), max); |
||||
|
const panVal = rightSideEnd |
||||
|
? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1) |
||||
|
: clamp(2 * ((-1 / amountTabs) * -1 * key + 1) - 4, -1, 1); // ((-1 / amountTabs) * key + 1); |
||||
|
console.log(panVal); |
||||
|
const frequencyVal = rightSideEnd |
||||
|
? Math.round((key / amountTabs) * key + 6) |
||||
|
: Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6); |
||||
|
var endValueVisible = this.isVisible(document.getElementById(endElement)); |
||||
|
|
||||
|
if (endValueVisible) { |
||||
|
reachedEndValue = true; |
||||
|
} |
||||
|
|
||||
|
if (reachedEndValue && endValueVisible) { |
||||
|
//this.playChordEndSound(); |
||||
|
if (rightSideEnd) { |
||||
|
endElement = 1; |
||||
|
rightSideEnd = false; |
||||
|
} else { |
||||
|
endElement = amountTabs; |
||||
|
rightSideEnd = true; |
||||
|
} |
||||
|
} else if (!endValueVisible) { |
||||
|
//this.playChordSound(panVal, frequencyVal); |
||||
|
//this.playPitchSound(panVal, 200 + 10*key); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// didReachEnd is bad... That is why, I have my own function... :) |
||||
|
// This sets it to "visible", if at least some part is visible... But maybe I want to have a percentage-based thing... |
||||
|
// If whole viewport is necessary, this makes it also bad, since a scroll all the way is required... |
||||
|
// Not really necessary, since the user already "knows", that this is the end... |
||||
|
isVisible(el) { |
||||
|
var rect = el.getBoundingClientRect(); |
||||
|
|
||||
|
return ( |
||||
|
rect.bottom > 0 && |
||||
|
rect.right > 0 && |
||||
|
rect.left < (window.innerWidth || document.documentElement.clientWidth) && |
||||
|
rect.top < (window.innerHeight || document.documentElement.clientHeight) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
//var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); |
||||
|
// onFocus as an additional thingy? |
||||
|
var tabId = 0; |
||||
|
amountTabs = this.props.children.length; |
||||
|
endElement = amountTabs; |
||||
|
|
||||
|
var tabs = this.props.children.map((k) => { |
||||
|
tabId += 1; |
||||
|
return ( |
||||
|
<Tab |
||||
|
id={tabId} |
||||
|
onTouchStart={() => this.onHoverTab(k)} |
||||
|
onMouseOver={() => this.onHoverTab(k)} |
||||
|
key={tabId} |
||||
|
> |
||||
|
{k.props.children} |
||||
|
</Tab> |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
const tabsStyle = {};//{position: "fixed", bottom: "0"}; |
||||
|
|
||||
|
return ( |
||||
|
<div style={tabsStyle}> |
||||
|
<Tabs |
||||
|
onMouseOver={() => this.onHoverElement()} |
||||
|
activeTab={this.state.activeTab} |
||||
|
onTabClick={(e, index) => this.onTabClick(e, index)} |
||||
|
> |
||||
|
{tabs} |
||||
|
</Tabs> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,102 @@ |
|||||
|
import React from "react"; |
||||
|
import { getTranslation } from "../../core/i18n/I18NHandler"; |
||||
|
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 ScrollableTab from "../../components/ScrollableTab"; |
||||
|
import { |
||||
|
Emoji, |
||||
|
Home, |
||||
|
HelpCircle, |
||||
|
Map, |
||||
|
MapPin, |
||||
|
Star, |
||||
|
Flag, |
||||
|
Key, |
||||
|
User, |
||||
|
ArrowUpRight, |
||||
|
} from "@geist-ui/icons"; |
||||
|
|
||||
|
function StartPage2({ redirectLoc }) { |
||||
|
var saveMouseLog = function () { |
||||
|
pushToMouseLog(getHeatmapData()); |
||||
|
//window.location.href = "./" + redirectLoc; |
||||
|
}; |
||||
|
|
||||
|
// TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT??? |
||||
|
// IS THAT OKAY??? |
||||
|
|
||||
|
return ( |
||||
|
<StudySite> |
||||
|
<WebpageBanner translationKey="task_2_info" /> |
||||
|
<Spacer h={2} /> |
||||
|
<img |
||||
|
src="/images/budget_bird_logo.png" |
||||
|
width="150px" |
||||
|
alt="BudgetBird Airlines Logo" |
||||
|
/> |
||||
|
<Spacer h={1} /> |
||||
|
<h4>Hotel Le Laboratoire</h4> |
||||
|
<Spacer h={2} /> |
||||
|
<ScrollableTab> |
||||
|
<Tab> |
||||
|
<Flag viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Features |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<Home viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Facilities |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<MapPin viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Location |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<ArrowUpRight viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Flights |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<Key viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Rooms |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<Emoji viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Catering |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<User viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Tour Operators |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<Map viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Map |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<Star viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Ratings |
||||
|
</Tab> |
||||
|
<Tab> |
||||
|
<HelpCircle viewBox="0 -8 24 32" size={18}/> |
||||
|
<Spacer inline w={.35} /> |
||||
|
Useful Information |
||||
|
</Tab> |
||||
|
</ScrollableTab> |
||||
|
</StudySite> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default StartPage2; |
||||
@ -0,0 +1,103 @@ |
|||||
|
import React from "react"; |
||||
|
import { getTranslation } from "../../core/i18n/I18NHandler"; |
||||
|
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 { Divider, Text, Spacer, Card } from "@geist-ui/core"; |
||||
|
import ScrollableTab from "../../components/ScrollableTab"; |
||||
|
import { |
||||
|
Emoji, |
||||
|
Home, |
||||
|
HelpCircle, |
||||
|
Map, |
||||
|
MapPin, |
||||
|
Star, |
||||
|
Flag, |
||||
|
Key, |
||||
|
User, |
||||
|
ArrowUpRight, |
||||
|
} from "@geist-ui/icons"; |
||||
|
|
||||
|
function TourOperators({ redirectLoc }) { |
||||
|
var saveMouseLog = function () { |
||||
|
pushToMouseLog(getHeatmapData()); |
||||
|
//window.location.href = "./" + redirectLoc; |
||||
|
}; |
||||
|
|
||||
|
// TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT??? |
||||
|
// IS THAT OKAY??? |
||||
|
|
||||
|
return ( |
||||
|
<StudySite> |
||||
|
<WebpageBanner translationKey="task_2_info" /> |
||||
|
<Spacer h={2} /> |
||||
|
<img |
||||
|
src="/images/budget_bird_logo.png" |
||||
|
width="150px" |
||||
|
alt="BudgetBird Airlines Logo" |
||||
|
/> |
||||
|
<Spacer h={1} /> |
||||
|
<h4>Hotel Le Laboratoire</h4> |
||||
|
<Spacer h={2} /> |
||||
|
<Card> |
||||
|
<Card.Content> |
||||
|
<Text b my={0}> |
||||
|
Haphazard Holidays |
||||
|
</Text> |
||||
|
</Card.Content> |
||||
|
<Divider h="1px" my={0} /> |
||||
|
<Card.Content> |
||||
|
<Text> |
||||
|
Ever thought, how the best experiences in life happen, when you just stumble upon them? That is the goal with Haphazard Holidays. |
||||
|
</Text> |
||||
|
<ul> |
||||
|
<li><a href="">Prices</a></li> |
||||
|
<li><a href="mailto:haphazard.holidays@example.com">Contact</a></li> |
||||
|
</ul> |
||||
|
</Card.Content> |
||||
|
</Card> |
||||
|
<Card> |
||||
|
<Card.Content> |
||||
|
<Text b my={0}> |
||||
|
Misguided Getaways |
||||
|
</Text> |
||||
|
</Card.Content> |
||||
|
<Divider h="1px" my={0} /> |
||||
|
<Card.Content> |
||||
|
<Text> |
||||
|
We at Misguided Getaways are specialized in hotels and tours, not captured by conventional tour operators to "mis"guide you into your perfect vacation. |
||||
|
</Text> |
||||
|
<ul> |
||||
|
<li><a href="">Prices</a></li> |
||||
|
<li><a href="mailto:misguided.getaways@example.com">Contact</a></li> |
||||
|
</ul> |
||||
|
</Card.Content> |
||||
|
</Card> |
||||
|
<Card> |
||||
|
<Card.Content> |
||||
|
<Text b my={0}> |
||||
|
Lost & Found Excursions |
||||
|
</Text> |
||||
|
</Card.Content> |
||||
|
<Divider h="1px" my={0} /> |
||||
|
<Card.Content> |
||||
|
<Text> |
||||
|
Here at Lost & Found Excursions try to capture the same feeling, when you find something precious again by chance but we don't let luck decide upon your perfect holiday or trip. |
||||
|
</Text> |
||||
|
<Text> |
||||
|
<ul> |
||||
|
<li><a href="">Prices</a></li> |
||||
|
<li><a href="mailto:l_f_excursions@example.com">Contact</a></li> |
||||
|
</ul> |
||||
|
</Text> |
||||
|
</Card.Content> |
||||
|
</Card> |
||||
|
</StudySite> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default TourOperators; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue