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