Improved menu and buttons, Webcam zoom.

nikosavola · Jul 23, 2020 · c631fb6 · c631fb6
1 parent a9e23ba
commit c631fb6
Show file tree

Hide file tree

Showing 34 changed files with 5,389 additions and 464 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
   extends: [
     'airbnb',
     'plugin:react/recommended',
+    'plugin:jest/recommended'
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -17,7 +18,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: [
-    'react',
+    'react','jest'
   ],
   rules: {
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

diff --git a/App.js b/App.js
@@ -3,6 +3,7 @@ import React from 'react'
 import {
   createDrawerNavigator,
 } from '@react-navigation/drawer'
+import { View, Image } from 'react-native'
 import { NavigationContainer } from '@react-navigation/native'
 import Webcam from './components/Webcam'
 import Home from './components/Home'
@@ -16,11 +17,34 @@ const App = () => (
       drawerType="front"
       drawerStyle={styles.drawer}
       drawerContentOptions={{
-        itemStyle: { marginVertical: 10 },
+        itemStyle: {
+          marginVertical: 20,
+          flexDirection: 'row',
+        },
       }}
     >
-      <Drawer.Screen name="Ettäisyys" component={Home} />
-      <Drawer.Screen name="Kauppatori" component={Webcam} />
+      <Drawer.Screen
+        name="Ettäisyys"
+        component={Home}
+        options={{
+          drawerIcon: () => (
+            <View style={{ width: 170, height: 170 }}>
+              <Image style={{ flex: 1, width: undefined, height: undefined }} source={require('./assets/icon1.png')} />
+            </View>
+          ),
+        }}
+      />
+      <Drawer.Screen
+        name="Kauppatori"
+        component={Webcam}
+        options={{
+          drawerIcon: () => (
+            <View style={{ width: 170, height: 170 }}>
+              <Image style={{ flex: 1, width: undefined, height: undefined }} source={require('./assets/ToripolliisiCropped.png')} />
+            </View>
+          ),
+        }}
+      />
     </Drawer.Navigator>
   </NavigationContainer>
 )

diff --git a/__tests__/App.test.js b/__tests__/App.test.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import App from '../App'
+
+describe('<App />', () => {
+  it('has 1 child', () => {
+    const tree = renderer.create(<App />).toJSON()
+    expect(tree.children.length).toBe(1)
+  })
+})
diff --git a/assets/ToripolliisiCropped.png b/assets/ToripolliisiCropped.png
diff --git a/assets/shareButton.png b/assets/shareButton.png
diff --git a/components/Home.js b/components/Home.js
@@ -5,6 +5,7 @@ import {
 } from 'react-native'
 import haversine from 'haversine'
 import Hamburger from 'react-native-hamburger'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import {
   getLocationPerms, findCoordinates, findCity, toripolliisiLocation,
 } from '../utils/location'
@@ -15,11 +16,13 @@ const Home = ({ navigation }) => {
   // ref callbacks
   const viewContainer = useRef(null)
 
+  // constants
+  const dimensions = Dimensions.get('window')
+
   // states
   const [location, setLocation] = useState({ latitude: 0, longitude: 0 })
   const [city, setCity] = useState('Etsitään sijaintia…')
   const [colorFlag, setColorFlag] = useState(true)
-  const [hamburgerState, setHamburgerState] = useState(false)
 
   // effects
   useEffect(() => {
@@ -44,79 +47,78 @@ const Home = ({ navigation }) => {
   }, [])
 
   // handlers
-  const changeColor = async () => {
+  const changeColor = () => {
     setColorFlag(!colorFlag)
+  }
+
+  const handleShare = async () => {
     console.log(viewContainer)
     await openShareDialogAsync(viewContainer)
   }
 
-  const dimensions = Dimensions.get('window')
-
-  // render
-  /* <ImageBackground
-  source={colorFlag
-  ? require('./assets/backgroundWhite.png')
-  : require('./assets/backgroundPink.png')}
-  style={styles.image_background}
-  collapsable={false}
-  > */
   return (
     <>
-      <Hamburger
-        active={hamburgerState}
-        type="cross"
-        onPress={() => {
-          setHamburgerState(!hamburgerState)
-          navigation.toggleDrawer()
-        }}
-        style={styles.hamburger}
-      />
-      <View
+      <SafeAreaView
         ref={viewContainer}
         style={
           colorFlag ? styles.container_white
             : styles.container_pink
         }
         collapsable={false}
       >
-        <TouchableOpacity onPress={changeColor}>
-          <Image
-            collapsable={false}
-            source={colorFlag
-              ? require('../assets/ToripolliisiPink.png')
-              : require('../assets/ToripolliisiWhite.png')}
-            style={{
-              width: Math.round(dimensions.width * (13 / 16)),
-              height: Math.round(dimensions.height * (8 / 16)),
-              resizeMode: 'center',
-            }}
+        <View style={styles.home_side}>
+          <Hamburger
+            active
+            type="cross"
+            onPress={() => { navigation.toggleDrawer() }}
+            style={styles.hamburger}
           />
-        </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity onPress={changeColor}>
+            <Image
+              collapsable={false}
+              source={colorFlag
+                ? require('../assets/ToripolliisiPink.png')
+                : require('../assets/ToripolliisiWhite.png')}
+              style={{
+                width: Math.round(dimensions.width * (13 / 16)),
+                height: Math.round(dimensions.height * (8 / 16)),
+                resizeMode: 'center',
+              }}
+            />
+          </TouchableOpacity>
 
-        <Text style={colorFlag
-          ? styles.textB
-          : styles.textW}
-        >
-          {'\n'}
-          Ettäisyys Toripolliisiin on
-        </Text>
+          <Text style={colorFlag
+            ? styles.textB
+            : styles.textW}
+          >
+            {'\n'}
+            Ettäisyys Toripolliisiin on
+          </Text>
 
-        { location.latitude === 0
-          ? <ActivityIndicator size="large" color="#F80160" />
-          : (
-            <Text style={styles.distance}>
-              {' '}
-              {String(haversine(location, toripolliisiLocation)).substring(0, 6)}
-              {' '}
-              km
-            </Text>
-          ) }
+          { location.latitude === 0
+            ? <ActivityIndicator size="large" color="#F80160" />
+            : (
+              <Text style={styles.distance}>
+                {' '}
+                {String(haversine(location, toripolliisiLocation)).substring(0, 6)}
+                {' '}
+                km
+              </Text>
+            ) }
 
-        <Text style={styles.location}>
-          {city}
-        </Text>
+          <Text style={styles.location}>
+            {city}
+          </Text>
+        </View>
+        <View style={styles.home_side}>
+          <TouchableOpacity onPress={handleShare} style={styles.hamburger}>
+            <Image source={require('../assets/shareButton.png')} style={{}} />
+          </TouchableOpacity>
+        </View>
 
-      </View>
+      </SafeAreaView>
     </>
   )
 }

diff --git a/components/Webcam.js b/components/Webcam.js
@@ -1,20 +1,39 @@
 import React from 'react'
-import { Image, Dimensions } from 'react-native'
+import { Image, Dimensions, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Hamburger from 'react-native-hamburger'
+import ImageZoom from 'react-native-image-pan-zoom'
+import { styles } from '../style/style'
 
 const Webcam = ({ navigation }) => {
-  const url = { uri: 'http://www.oulunkaupunki.fi/_private/kamera/picture1.jpg' }
-
-  const dimensions = Dimensions.get('window')
+  const url = { uri: `http://www.oulunkaupunki.fi/_private/kamera/picture1.jpg?${Date.now()}` }
 
   return (
-    <Image
-      source={url}
-      style={{
-        width: Math.round(dimensions.width * (13 / 16)),
-        height: Math.round(dimensions.height * (8 / 16)),
-        resizeMode: 'center',
-      }}
-    />
+    <SafeAreaView style={styles.container_webcam}>
+      <View style={styles.container_white}>
+        <View style={styles.home_side}>
+          <Hamburger
+            active
+            type="cross"
+            onPress={() => { navigation.toggleDrawer() }}
+            style={styles.hamburger}
+          />
+        </View>
+      </View>
+      <ImageZoom
+        cropWidth={Dimensions.get('window').width}
+        cropHeight={Dimensions.get('window').height * 0.9}
+        imageWidth={1920}
+        imageHeight={1080}
+      >
+        <Image
+          style={{ width: 1920, height: 1080 }}
+          source={url}
+        />
+      </ImageZoom>
+      <View style={styles.home_side} />
+
+    </SafeAreaView>
   )
 }
 

diff --git a/coverage/clover.xml b/coverage/clover.xml
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1595531048637" clover="3.2.0">
+  <project timestamp="1595531048637" name="All files">
+    <metrics statements="67" coveredstatements="0" conditionals="12" coveredconditionals="0" methods="25" coveredmethods="0" elements="104" coveredelements="0" complexity="0" loc="67" ncloc="67" packages="5" files="8" classes="8"/>
+    <package name="Ettaisyyspolliisi">
+      <metrics statements="6" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="0"/>
+      <file name=".eslintrc.js" path="D:\Media\Dev\Ettaisyyspolliisi\.eslintrc.js">
+        <metrics statements="1" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+        <line num="1" count="0" type="stmt"/>
+      </file>
+      <file name="App.js" path="D:\Media\Dev\Ettaisyyspolliisi\App.js">
+        <metrics statements="5" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="0"/>
+        <line num="12" count="0" type="stmt"/>
+        <line num="13" count="0" type="stmt"/>
+        <line num="14" count="0" type="stmt"/>
+        <line num="31" count="0" type="stmt"/>
+        <line num="42" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Ettaisyyspolliisi.components">
+      <metrics statements="29" coveredstatements="0" conditionals="8" coveredconditionals="0" methods="12" coveredmethods="0"/>
+      <file name="Home.js" path="D:\Media\Dev\Ettaisyyspolliisi\components\Home.js">
+        <metrics statements="25" coveredstatements="0" conditionals="8" coveredconditionals="0" methods="10" coveredmethods="0"/>
+        <line num="15" count="0" type="stmt"/>
+        <line num="17" count="0" type="stmt"/>
+        <line num="20" count="0" type="stmt"/>
+        <line num="23" count="0" type="stmt"/>
+        <line num="24" count="0" type="stmt"/>
+        <line num="25" count="0" type="stmt"/>
+        <line num="28" count="0" type="stmt"/>
+        <line num="29" count="0" type="stmt"/>
+        <line num="30" count="0" type="stmt"/>
+        <line num="31" count="0" type="stmt"/>
+        <line num="33" count="0" type="stmt"/>
+        <line num="36" count="0" type="stmt"/>
+        <line num="37" count="0" type="stmt"/>
+        <line num="40" count="0" type="stmt"/>
+        <line num="41" count="0" type="stmt"/>
+        <line num="42" count="0" type="stmt"/>
+        <line num="44" count="0" type="stmt"/>
+        <line num="45" count="0" type="stmt"/>
+        <line num="50" count="0" type="stmt"/>
+        <line num="51" count="0" type="stmt"/>
+        <line num="54" count="0" type="stmt"/>
+        <line num="55" count="0" type="stmt"/>
+        <line num="56" count="0" type="stmt"/>
+        <line num="59" count="0" type="stmt"/>
+        <line num="73" count="0" type="stmt"/>
+      </file>
+      <file name="Webcam.js" path="D:\Media\Dev\Ettaisyyspolliisi\components\Webcam.js">
+        <metrics statements="4" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="0"/>
+        <line num="8" count="0" type="stmt"/>
+        <line num="9" count="0" type="stmt"/>
+        <line num="11" count="0" type="stmt"/>
+        <line num="18" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Ettaisyyspolliisi.style">
+      <metrics statements="1" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+      <file name="style.js" path="D:\Media\Dev\Ettaisyyspolliisi\style\style.js">
+        <metrics statements="1" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+        <line num="3" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Ettaisyyspolliisi.utils">
+      <metrics statements="27" coveredstatements="0" conditionals="2" coveredconditionals="0" methods="7" coveredmethods="0"/>
+      <file name="location.js" path="D:\Media\Dev\Ettaisyyspolliisi\utils\location.js">
+        <metrics statements="19" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="5" coveredmethods="0"/>
+        <line num="5" count="0" type="stmt"/>
+        <line num="6" count="0" type="stmt"/>
+        <line num="7" count="0" type="stmt"/>
+        <line num="9" count="0" type="stmt"/>
+        <line num="17" count="0" type="stmt"/>
+        <line num="18" count="0" type="stmt"/>
+        <line num="19" count="0" type="stmt"/>
+        <line num="21" count="0" type="stmt"/>
+        <line num="22" count="0" type="stmt"/>
+        <line num="23" count="0" type="stmt"/>
+        <line num="24" count="0" type="stmt"/>
+        <line num="26" count="0" type="stmt"/>
+        <line num="30" count="0" type="stmt"/>
+        <line num="34" count="0" type="stmt"/>
+        <line num="35" count="0" type="stmt"/>
+        <line num="36" count="0" type="stmt"/>
+        <line num="37" count="0" type="stmt"/>
+        <line num="39" count="0" type="stmt"/>
+        <line num="43" count="0" type="stmt"/>
+      </file>
+      <file name="sharing.js" path="D:\Media\Dev\Ettaisyyspolliisi\utils\sharing.js">
+        <metrics statements="8" coveredstatements="0" conditionals="2" coveredconditionals="0" methods="2" coveredmethods="0"/>
+        <line num="5" count="0" type="stmt"/>
+        <line num="6" count="0" type="stmt"/>
+        <line num="8" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="9" count="0" type="stmt"/>
+        <line num="10" count="0" type="stmt"/>
+        <line num="11" count="0" type="stmt"/>
+        <line num="15" count="0" type="stmt"/>
+        <line num="21" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Ettaisyyspolliisi.web-build">
+      <metrics statements="4" coveredstatements="0" conditionals="2" coveredconditionals="0" methods="3" coveredmethods="0"/>
+      <file name="register-service-worker.js" path="D:\Media\Dev\Ettaisyyspolliisi\web-build\register-service-worker.js">
+        <metrics statements="4" coveredstatements="0" conditionals="2" coveredconditionals="0" methods="3" coveredmethods="0"/>
+        <line num="3" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="4" count="0" type="stmt"/>
+        <line num="5" count="0" type="stmt"/>
+        <line num="11" count="0" type="stmt"/>
+      </file>
+    </package>
+  </project>
+</coverage>