Commit f468ede4 authored by p's avatar p
Browse files

Merge remote-tracking branch 'origin/master'

parents 9e2b4e49 05c2039b
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
// import { withNavigation } from "react-navigation";
import MapView, { Marker } from "react-native-maps";
class BranchesMap extends PureComponent {
state = {
region: {
atitude: 48.723221,
longitude: 21.256716,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
};
render() {
const { data } = this.props;
return (
<MapView
style={styles.map}
initialRegion={this.state.region}
loadingEnabled
>
<Marker
key="marker"
coordinate={{ latitude: data.lat, longitude: data.long }}
title={`${data.address}, ${data.zip} ${data.city}`}
description="Pobočka Tatra banky"
/>
</MapView>
);
}
}
const styles = StyleSheet.create({
map: {
flex: 1
}
});
export default BranchesMap;
import React, { PureComponent } from "react";
import { ScrollView, FlatList, StyleSheet } from "react-native";
import KeywordsListItem from "./KeywordsListItem";
export default class KeywordsWidget extends PureComponent {
_keyExtractor = item => `keyword-${item}`;
_renderItem = ({ item }) => <KeywordsListItem item={item} />;
render() {
const { keywords } = this.props;
if (!keywords) return null;
return (
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<FlatList
contentContainerStyle={styles.listOffset}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
numColumns={5}
data={keywords}
// showsHorizontalScrollIndicator={false}
/>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
listOffset: { marginLeft: 15 }
});
import React, { PureComponent } from "react";
import { StyleSheet, View, Text } from "react-native";
import { iOSColors } from "react-native-typography";
class KeywordsListItem extends PureComponent {
render() {
const { item } = this.props;
return (
<View style={styles.itemContainer}>
<Text style={styles.textStyle}>{item}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
itemContainer: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: 32,
backgroundColor: iOSColors.blue,
marginHorizontal: 6,
marginVertical: 4,
borderRadius: 18
},
textStyle: {
paddingHorizontal: 20,
color: iOSColors.white
}
});
export default KeywordsListItem;
......@@ -7,19 +7,19 @@ const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24;
function getDayOfWeekString(day) {
if (day === 0) {
return "Sunday";
return "Nedeľa";
} else if (day === 1) {
return "Monday";
return "Pondelok";
} else if (day === 2) {
return "Tuesday";
return "Utorok";
} else if (day === 3) {
return "Wednesday";
return "Streda";
} else if (day === 4) {
return "Thursday";
return "Štvrtok";
} else if (day === 5) {
return "Friday";
return "Piatok";
} else if (day === 6) {
return "Saturday";
return "Sobota";
}
}
......@@ -46,12 +46,12 @@ export default class NotificationDate extends PureComponent {
if (diffDays <= 1 && required.getDay() == current.getDay()) {
return `${required.getHours()}:${required.getMinutes()}`;
} else if (diffDays === 1) {
return "Yesterday";
return "Včera";
} else if (diffDays > 1 && diffDays < 7) {
const dayOfWeek = required.getDay();
return getDayOfWeekString(dayOfWeek);
} else {
return `${required.getDay()}.${required.getMonth()}`;
return `${required.getDate()}.${required.getMonth() + 1}`;
}
};
......@@ -59,12 +59,14 @@ export default class NotificationDate extends PureComponent {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>{this.state.timeString}</Text>
<Icon
name="chevron-right"
type="feather"
size={14}
iconStyle={styles.iconStyle}
/>
{this.props.isPressable && (
<Icon
name="chevron-right"
type="feather"
size={14}
iconStyle={styles.iconStyle}
/>
)}
</View>
);
}
......
import React, { PureComponent } from "react";
import { StyleSheet, FlatList } from "react-native";
import { FlatList } from "react-native";
import NotificationListItem from "./NotificationListItem";
import NotificationListEmptyItem from "./NotificationListEmptyItem";
export default class NotificationScreen extends PureComponent {
_keyExtractor = item => `bank-${item.id}`;
_keyExtractor = item => `notification-${item.id}`;
_renderItem = ({ item }) => <NotificationListItem item={item} />;
render() {
return (
<FlatList
// contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
initialNumToRender={6}
renderItem={this._renderItem}
ItemSeparatorComponent={NotificationListItem.Divider}
ListEmptyComponent={<NotificationListEmptyItem />}
data={this.props.data}
/>
);
}
}
const styles = StyleSheet.create({});
import React, { PureComponent } from "react";
import { ListItem, Icon } from "react-native-elements";
import { StyleSheet } from "react-native";
import { iOSColors } from "react-native-typography";
class NotificationListEmptyItem extends PureComponent {
render() {
return (
<ListItem
title="Notifikácie sú prázdne"
onPress={this._onPress}
leftAvatar={
<Icon
type="feather"
name="folder"
color="white"
size={15}
containerStyle={styles.avatarContainer}
/>
}
/>
);
}
}
const styles = StyleSheet.create({
avatarContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
width: 36,
borderRadius: 18,
backgroundColor: iOSColors.blue
}
});
export default NotificationListEmptyItem;
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import { ListItem, Divider } from "react-native-elements";
import { withNavigation } from "react-navigation";
import DangerRating from "./DangerRating";
import NotificationDate from "./NotificationDate";
import NotificationAVMatch from "./NotificationAVMatch";
import { iOSColors } from "react-native-typography";
export default class NotificationListItem extends PureComponent {
class NotificationListItem extends PureComponent {
_onPress = () => {
this.props.navigation.navigate("NotificationInfo", {
notification: this.props.item
});
};
render() {
const { item } = this.props;
const { item, isPressable = true } = this.props;
return (
<ListItem
......@@ -19,7 +26,13 @@ export default class NotificationListItem extends PureComponent {
videoMatch={item.videoMatch}
/>
}
rightTitle={<NotificationDate timeStamp={item.timeStamp} />}
rightTitle={
<NotificationDate
isPressable={isPressable}
timeStamp={item.timeStamp}
/>
}
onPress={isPressable ? this._onPress : undefined}
leftAvatar={<DangerRating rate={item.rate} />}
contentContainerStyle={styles.rowMargin}
subtitleStyle={styles.subtitle}
......@@ -46,5 +59,7 @@ const styles = StyleSheet.create({
borderRadius: 18,
backgroundColor: iOSColors.blue
},
rowMargin: { marginVertical: 7 }
rowMargin: { marginVertical: 6 }
});
export default withNavigation(NotificationListItem);
export const BRANCHES = [
{ address: "OC Aupark", zip: "040 01", city: "Košice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Košice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Košice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Košice", id: 4 }
{
address: "OC Aupark",
zip: "040 01",
city: "Košice",
id: 1,
lat: 48.717727,
long: 21.262987
},
{
address: "Hlavná 81",
zip: "040 01",
city: "Košice",
id: 2,
lat: 48.723221,
long: 21.256716
},
{
address: "OC Galeria",
zip: "040 01",
city: "Košice",
id: 3,
lat: 48.715233,
long: 21.238327
},
{
address: "OC Optima",
zip: "040 01",
city: "Košice",
id: 4,
lat: 48.695508,
long: 21.237335
}
];
export const NOTIFICATIONS = [
......@@ -14,6 +42,23 @@ export const NOTIFICATIONS = [
audioMatch: 82,
videoMatch: 65,
rate: 5,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: [
"Prepad",
"Peniaze",
"Zem",
"Dajte",
"Taška",
"Zbraň",
"Strieľať",
"Náboj",
"Boj",
"Útok",
"Dole",
"Ticho",
"Strela",
"Problém"
],
timeStamp: "2019-05-01T06:50:27"
},
{
......@@ -24,6 +69,8 @@ export const NOTIFICATIONS = [
audioMatch: 45,
videoMatch: 42,
rate: 2,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-05-01T05:50:36"
},
{
......@@ -34,6 +81,8 @@ export const NOTIFICATIONS = [
audioMatch: 35,
videoMatch: 40,
rate: 1,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-04-30T20:42:41"
},
{
......@@ -44,6 +93,8 @@ export const NOTIFICATIONS = [
audioMatch: 82,
videoMatch: 72,
rate: 1,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-04-30T06:50:48"
},
{
......@@ -54,6 +105,8 @@ export const NOTIFICATIONS = [
audioMatch: 55,
videoMatch: 60,
rate: 3,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-04-29T18:49:12"
},
{
......@@ -64,6 +117,8 @@ export const NOTIFICATIONS = [
audioMatch: 58,
videoMatch: 63,
rate: 3,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-04-28T15:16:12"
},
{
......@@ -74,6 +129,8 @@ export const NOTIFICATIONS = [
audioMatch: 75,
videoMatch: 65,
rate: 4,
videoUri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
keywords: ["Prepad", "Peniaze", "Zem", "Dajte", "Náboj", "Zbraň", "Strela"],
timeStamp: "2019-04-24T15:16:12"
}
];
......@@ -9,15 +9,17 @@ import TabBarIcon from "../components/TabBarIcon";
import BranchesScreen from "../screens/BranchesScreen";
import BranchInfoScreen from "../screens/BranchInfoScreen";
import NotificationsScreen from "../screens/NotificationScreen";
import NotificationInfoScreen from "../screens/NotificationInfoScreen";
import SettingsScreen from "../screens/SettingsScreen";
const BranchStack = createStackNavigator({
Branches: BranchesScreen,
BranchInfo: BranchInfoScreen
BranchInfo: BranchInfoScreen,
NotificationInfo: NotificationInfoScreen
});
BranchStack.navigationOptions = {
tabBarLabel: "Branches",
tabBarLabel: "Pobočky",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......@@ -27,11 +29,12 @@ BranchStack.navigationOptions = {
};
const NotificationStack = createStackNavigator({
Notifications: NotificationsScreen
Notifications: NotificationsScreen,
NotificationInfo: NotificationInfoScreen
});
NotificationStack.navigationOptions = {
tabBarLabel: "Notifications",
tabBarLabel: "Upozornenia",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......@@ -45,7 +48,7 @@ const SettingsStack = createStackNavigator({
});
SettingsStack.navigationOptions = {
tabBarLabel: "Settings",
tabBarLabel: "Nastavenia",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......
import React, { Component } from "react";
import { StyleSheet, View, InteractionManager } from "react-native";
import {
ScrollView,
StyleSheet,
View,
InteractionManager,
Text
} from "react-native";
import { NOTIFICATIONS } from "../constants/Data";
import { iOSUIKit } from "react-native-typography";
import NotificationList from "../components/notifications/NotificationList";
import BranchesMap from "../components/branches/BranchesMap";
export default class BranchInfoScreen extends Component {
static navigationOptions = ({ navigation }) => {
const branch = navigation.getParam("branch", null);
const headerTitle = branch ? branch.address : "Branch";
const headerTitle = branch ? branch.address : "Pobočka";
return { headerTitle };
};
......@@ -15,7 +23,8 @@ export default class BranchInfoScreen extends Component {
this.state = {
isLoaded: false,
branch: this.props.navigation.getParam("branch", null)
branch: this.props.navigation.getParam("branch", null),
data: []
};
}
......@@ -31,9 +40,15 @@ export default class BranchInfoScreen extends Component {
render() {
return (
<View style={styles.container}>
<NotificationList data={this.state.data} />
</View>
<ScrollView style={styles.container}>
<View style={styles.mapContainer}>
{this.state.isLoaded && <BranchesMap data={this.state.branch} />}
</View>
<View style={styles.innerContainer}>
<Text style={styles.title}>Notifikácie</Text>
<NotificationList data={this.state.data} />
</View>
</ScrollView>
);
}
}
......@@ -42,5 +57,14 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
},
innerContainer: {
marginTop: 20
},
title: {
...iOSUIKit.largeTitleEmphasized,
marginHorizontal: 20,
marginBottom: 15
},
mapContainer: { height: 275 }
});
......@@ -5,11 +5,12 @@ import { BRANCHES } from "../constants/Data";
export default class BranchesScreen extends Component {
static navigationOptions = {
title: "Branches"
title: "Pobočky"
};
state = {
data: BRANCHES
data: BRANCHES,
mapView: true
};
_keyExtractor = item => `branch-${item.id}`;
......
import React, { Component } from "react";
import {
ScrollView,
View,
StyleSheet,
Text,
Platform,
Linking
} from "react-native";
import { Button } from "react-native-elements";
import { Video } from "expo";
import { iOSUIKit } from "react-native-typography";
import NotificationListItem from "../components/notifications/NotificationListItem";
import KeywordsList from "../components/notifications/KeywordsList";
export default class NotificationInfoScreen extends Component {
static navigationOptions = {
title: "Upozornenie"
};
constructor(props) {
super(props);
this.state = {
data: this.props.navigation.getParam("notification", null)
};
}
_onCallPressed = () => {
const prefix = Platform.OS === "android" ? "tel:" : "tel://";
const phoneNo = "123456789";
Linking.openURL(prefix + phoneNo);
};
render() {
const { data } = this.state;
return (
<ScrollView style={styles.container}>
<View style={[styles.containerInner, styles.horizontalOffset]}>
<NotificationListItem item={data} isPressable={false} />
</View>
<View style={styles.containerInner}>
<Text style={styles.title}>Video</Text>
<Video
source={{
uri: data.videoUri
}}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
useNativeControls
style={styles.videoStyle}
/>
</View>
<View style={styles.containerInner}>
<Text style={styles.title}>Kľúčové slová</Text>
<KeywordsList keywords={data.keywords} />
</View>
<View style={[styles.containerInner, styles.buttonView]}>
<Button
icon={{
name: "phone",
type: "feather",
color: "white"
}}