reactNative

ReactJS/Native/AlfaPrentice/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

ReactJS/Native/AlfaPrentice/.gitignore

@@ -0,0 +1,13 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

ReactJS/Native/AlfaPrentice/App.js

@@ -0,0 +1,10 @@
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Routes from "./App/index";
+
+export default function App() {
+  return (
+      <Routes />
+  );
+}

ReactJS/Native/AlfaPrentice/App/Cards/CompanyResultCard.js

@@ -0,0 +1,100 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Component, Button } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+//Components
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { Appel: props.Details })}>
+            <Text style={Styles.white}>Bekijk bedrijf</Text>
+        </TouchableOpacity>
+    )
+}
+
+class CompanyResultCard extends React.Component{
+    constructor (props) {
+        super(props);
+        this.state = {
+
+        }
+        
+    }
+    
+
+    render() {
+        
+        return (
+            <ScrollView>
+            <View style={Styles.ResultCard}>
+                <View style={Styles.Row}>
+                    <Text style={Styles.HeroHeading}>Bedrijfsnaam 1</Text>
+                   <Navigate Details = {this.props.details}/>
+                </View>
+                <View style={Styles.ContentRow}>
+                    <Text>Locatie: Groningen</Text>
+                    <Text>Opleding: AO</Text>
+                </View>
+                <View style={Styles.ContentRowRa}>
+                    <Text>Beschikbaarheid: 2 plekken over</Text>
+                </View>
+                
+            </View>
+            <View style={Styles.HR}/>
+            </ScrollView>
+        )
+    }
+}
+
+
+
+const Styles = StyleSheet.create ({
+    ResultCard: {
+        padding: 30,
+    },
+    HeroHeading: {
+        color: "#DE0000",
+        fontSize: 20,
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+       
+    },
+    white: {
+        color: '#ffffff',
+    },
+    Row: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between'
+    },
+    ContentRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        marginTop: 15,
+    },
+    ContentRowRa: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        marginTop: 15,
+    },
+    HR: {
+        height: 2,
+        backgroundColor: '#DE0000',
+        
+    }
+})
+
+export default CompanyResultCard;

ReactJS/Native/AlfaPrentice/App/Header/Header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image} from 'react-native';
+import { block } from 'react-native-reanimated';
+
+class Header extends React.Component {
+    render() {
+        return(
+            <View style={Styles.Header}>
+                <Image style={Styles.HeaderLogo} source={require('../Images/logo.png')} />
+            </View>
+        )
+    }
+}
+
+const Styles = StyleSheet.create({
+    Header: {
+        color: '#ffffff',
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        paddingVertical: 15,
+        paddingHorizontal: 10,
+        marginTop: 10,
+        height: 60,
+
+    },
+    HeaderLogo: {
+        width: '40%',
+        height: '100%',
+        
+    },
+  });
+  
+export default Header;

ReactJS/Native/AlfaPrentice/App/Hero/Hero.js

@@ -0,0 +1,75 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, ImageBackground, Image, TextInput } from 'react-native';
+const image = { uri: "https://reactjs.org/logo-og.png" };
+
+class Hero extends React.Component {
+    constructor (props) {
+        super(props);
+    }
+    render() {
+        return (
+                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
+                    <View>
+                        <Text style={Styles.HeroHeading}>{this.props.HeroHeading}</Text>
+                        <Text style={Styles.HeroText}>{this.props.HeroText}</Text>
+                    </View>
+                </ImageBackground>
+        );
+    }
+}
+
+const HeroSearch = (props) => {
+    const [SearchBar, onChangeSearch] = React.useState('');
+        return (
+                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
+                    <View style={Styles.InputContainer}>
+                        <TextInput 
+                         style={Styles.Input} 
+                         onChangeText={text => onChangeSearch(text)}
+                         placeholder="Zoek"
+                         placeholderTextColor="#DE0000"
+                         value={SearchBar}
+                        />
+                    </View>
+                </ImageBackground>
+        );
+    
+}
+
+const Styles = StyleSheet.create ({
+    image: {
+        resizeMode: "cover",
+        width: '100%',
+        height: 100,
+        backgroundColor: "#DE0000a0",
+      },
+    HeroHeading: {
+        color: "white",
+        fontSize: 30,
+        textAlign: "center",
+        backgroundColor: "#DE0000a0"
+    },
+    HeroText: {
+        color: "white",
+        backgroundColor: "#DE0000a0",
+        textAlign: "center",
+        height: 55,
+    },
+    InputContainer: {
+        height: "100%",
+        backgroundColor: "#DE0000a0",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    Input: {
+        height: 40,
+        backgroundColor: '#ffffff',
+        width: '60%',
+        paddingHorizontal: 10,
+    }
+})
+
+export {HeroSearch};
+export default Hero;

ReactJS/Native/AlfaPrentice/App/Layouts/DefaultLayout.js

@@ -0,0 +1,24 @@
+//Mopdules
+import React from 'react';
+import {View, Text, ScrollView} from 'react-native';
+
+//Components
+import Header from '../Header/Header';
+
+class DefaultLayout extends React.Component {
+    constructor(props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <ScrollView appel = {this.props.appel}>
+                <Header/>
+                
+                {this.props.children}
+            </ScrollView>
+        );
+    }
+}
+
+export default DefaultLayout;

ReactJS/Native/AlfaPrentice/App/Router/Router.js

@@ -0,0 +1,48 @@
+//Modules
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+//Pages
+import { Home, SearchPage, Login, CompanyProfile} from '../index';
+
+const Stack = createStackNavigator();
+
+class Routes extends React.Component {
+   constructor(props){
+      super(props);
+      this.state = {
+         items: this.props.item,
+      }
+   }
+
+   render() {
+    return (
+      <NavigationContainer>
+      <Stack.Navigator screenOptions={{
+            headerShown: false
+          }}>
+        <Stack.Screen
+          name="Login"
+          component={Login}
+        />
+        <Stack.Screen
+          name="Home"
+          component={Home}
+        />
+        <Stack.Screen
+          name="Search"
+          component={SearchPage}
+        />
+        <Stack.Screen
+          name="Companyprofile"
+          component={CompanyProfile}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+    )
+    }
+   
+    }
+export default Routes;

ReactJS/Native/AlfaPrentice/App/Views/Home.js

@@ -0,0 +1,22 @@
+//Modules
+import React from 'react'
+import { TouchableOpacity, Text } from 'react-native';
+import { Actions } from 'react-native-router-flux';
+
+//Components
+import { DefaultLayout, Hero } from '../index';
+
+const Home = ({ navigation }) => {
+   return (
+       <DefaultLayout>
+           <Hero HearoHeader="AlfaPrentice"/>
+            <TouchableOpacity style = {{ margin: 128 }} >
+                <Text onPress={() => navigation.navigate('Search')}>Zoek</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style = {{ margin: 128 }} >
+                <Text>Terug naar login</Text>
+            </TouchableOpacity>
+      </DefaultLayout>
+   )
+}
+export default Home

ReactJS/Native/AlfaPrentice/App/Views/Login.js

@@ -0,0 +1,86 @@
+//Modules
+import React from 'react';
+import {View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+
+
+//Components
+import {DefaultLayout} from '../index';
+
+const Login = ({ navigation }) => {
+        const [UserName, onChangeUserName] = React.useState('');
+        const [PassWord, onChangePassWord] = React.useState('');
+
+        return ( 
+            <DefaultLayout>
+                <View style={Styles.Container}>
+                    <TextInput 
+                    style={Styles.Input} 
+                    onChangeText={text => onChangeUserName(text)}
+                    placeholder="Gebruikersnaam"
+                    value={UserName}
+                    />
+                    <TextInput 
+                    style={Styles.Input} 
+                    onChangeText={text => onChangePassWord(text)}
+                    placeholder="Wachtwoord"
+                    value={PassWord}
+                    secureTextEntry={true}
+                    />
+                    <View style={Styles.BtnWrapper}>
+                        <TouchableOpacity style={Styles.BtnOutline}>
+                            <Text>Anuleren</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={Styles.Btn}>
+                            <Text style={Styles.white} onPress={() =>
+                                navigation.navigate('Home')
+                            }>Login</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </DefaultLayout>
+        );
+    
+}
+
+const Styles = StyleSheet.create ({
+    Container: {
+        marginTop: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        
+    },
+    Input: {
+        height: 40, 
+        borderColor: '#DE0000', 
+        borderRadius: 5,
+        borderWidth: 1,
+        width: '60%',
+        marginTop: 30,
+        padding: 10.
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+        marginLeft: 50,
+    },
+    BtnOutline: {
+        borderColor: '#DE0000',
+        borderRadius: 5,
+        borderWidth: 1,
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+    },
+    white: {
+        color: '#ffffff',
+    },
+    BtnWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: 30,
+    },
+})
+
+export default Login;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/CompanyProfile.js

@@ -0,0 +1,17 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+const CompanyProfile = ({navigation, route}) => {
+
+        return(
+            <View>
+                <Text>
+                {route.params.Appel}
+                </Text>
+            </View>
+        );
+    
+}
+
+export default CompanyProfile;

ReactJS/Native/AlfaPrentice/App/Views/SearchPage.js

@@ -0,0 +1,52 @@
+//Modules
+import React from 'react'
+import { TouchableOpacity, Text } from 'react-native'
+import { Actions } from 'react-native-router-flux'
+import { Router, Scene } from 'react-native-router-flux';
+import { useNavigation } from '@react-navigation/native';
+
+//Components
+import { DefaultLayout, HeroSearch, CompanyResultcard } from '../index';
+
+//Pages
+import { CompanyProfile} from '../index';
+
+function ToHome ({screenName}) {
+   const navigation = useNavigation();
+   return(
+      <TouchableOpacity style = {{ margin: 128 }} onPress = {() => navigation.navigate('Home')}>
+         <Text>Terug naar home</Text>
+      </TouchableOpacity>
+   )
+}
+
+class SearchPage extends React.Component {
+   constructor(props){
+      super(props);
+      this.state = {
+         
+      }
+      
+   }
+     
+
+   render(){
+     
+   return (
+      <DefaultLayout>
+         <HeroSearch/>
+         <CompanyResultcard details = "Bedrijf 1"/>
+         <CompanyResultcard details = "Bedrijf 2"/>
+         <CompanyResultcard details = "Bedrijf 3"/>
+         <CompanyResultcard details = "Bedrijf 4"/>
+         <ToHome/>
+         
+         
+         
+      </DefaultLayout>
+   )
+   }
+
+}   
+
+export default SearchPage;

ReactJS/Native/AlfaPrentice/App/index.js

@@ -0,0 +1,32 @@
+//Components
+import Header from './Header/Header';
+import Routes from './Router/Router';
+import DefaultLayout from './Layouts/DefaultLayout';
+import Hero from './Hero/Hero';
+import {HeroSearch} from './Hero/Hero';
+import CompanyResultcard from './Cards/CompanyResultCard';
+
+//Pages
+import Home from "./Views/Home";
+import SearchPage from './Views/SearchPage';
+import Login from './Views/Login';
+import CompanyProfile from './Views/Profiles/CompanyProfile';
+
+//Components export
+export {
+    Header,
+    DefaultLayout,
+    Hero,
+    HeroSearch,
+    CompanyResultcard,
+}
+
+//Pages export
+export {
+    Home,
+    SearchPage,
+    Login,
+    CompanyProfile,
+}
+
+export default Routes; 

ReactJS/Native/AlfaPrentice/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "AlfaPrentice",
+    "slug": "AlfaPrentice",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

ReactJS/Native/AlfaPrentice/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

ReactJS/Native/AlfaPrentice/package.json

@@ -0,0 +1,30 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
+    "expo": "~39.0.2",
+    "expo-status-bar": "~1.0.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-gesture-handler": "^1.7.0",
+    "react-native-reanimated": "^1.13.2",
+    "react-native-router-flux": "^4.2.0",
+    "react-native-safe-area-context": "^3.1.4",
+    "react-native-screens": "^2.10.1",
+    "react-native-web": "~0.13.12"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0"
+  },
+  "private": true
+}