Commit 4b246ae3 authored by Sebastian Trebunak's avatar Sebastian Trebunak
Browse files

Notification Info screen implemented,, sk strngs

parent 583e4ec7
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";
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}
......@@ -20,5 +19,3 @@ export default class NotificationScreen extends PureComponent {
);
}
}
const styles = StyleSheet.create({});
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);
......@@ -14,6 +14,24 @@ export const NOTIFICATIONS = [
audioMatch: 82,
videoMatch: 65,
rate: 5,
videoUri:
"https://www.youtube.com/watch?v=U3zbyPAGe2E&fbclid=IwAR3TedMYanInV31_Ex5zX4povIHp8pEeWHobmOuo1nSDTaElUwYyThBsdD0",
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 +42,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 +54,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 +66,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 +78,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 +90,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 +102,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,6 +9,7 @@ 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({
......@@ -17,7 +18,7 @@ const BranchStack = createStackNavigator({
});
BranchStack.navigationOptions = {
tabBarLabel: "Branches",
tabBarLabel: "Pobočky",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......@@ -27,11 +28,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 +47,7 @@ const SettingsStack = createStackNavigator({
});
SettingsStack.navigationOptions = {
tabBarLabel: "Settings",
tabBarLabel: "Nastavenia",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......
......@@ -6,7 +6,7 @@ import NotificationList from "../components/notifications/NotificationList";
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 };
};
......
......@@ -5,7 +5,7 @@ import { BRANCHES } from "../constants/Data";
export default class BranchesScreen extends Component {
static navigationOptions = {
title: "Branches"
title: "Pobočky"
};
state = {
......
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"
}}
onPress={this._onCallPressed}
containerStyle={styles.containerButton}
buttonStyle={styles.callButton}
titleStyle={styles.buttonTitle}
title="Volať Políciu"
/>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1 },
containerInner: { marginTop: 5, marginBottom: 10 },
horizontalOffset: { paddingHorizontal: 15 },
buttonTabContainer: {},
videoStyle: { width: "100%", height: 230 },
title: {
...iOSUIKit.largeTitleEmphasized,
marginHorizontal: 20,
marginBottom: 15
},
buttonView: {
flex: 1,
alignItems: "center",
marginTop: 20
},
buttonTitle: {
paddingHorizontal: 20
},
callButton: {
backgroundColor: "#FF5858",
height: 50,
borderRadius: 25
}
});
......@@ -7,7 +7,7 @@ import { NOTIFICATIONS } from "../constants/Data";
export default class NotificationScreen extends Component {
static navigationOptions = {
title: "Notifications"
title: "Upozornenia"
};
constructor(props) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment