Merge pull request #13 from DHBW-FN-TIT20/KWYG-24-React-Applikation-a…

…n-Guidelines-+-Seitenhierarchie-anpassen

Kwyg 24 react applikation an guidelines + seitenhierarchie anpassen

src/components/app.jsx

@@ -1,156 +1,56 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 import {
-  f7,
-  f7ready,
   App,
   Panel,
   Views,
   View,
-  Popup,
   Page,
   Navbar,
-  Toolbar,
-  NavRight,
-  Link,
   Block,
-  BlockTitle,
-  LoginScreen,
-  LoginScreenTitle,
-  List,
-  ListItem,
-  ListInput,
-  ListButton,
-  BlockFooter
 } from 'framework7-react';
 
 
 import routes from '../js/routes';
 import store from '../js/store';
 
-const MyApp = () => {
-  // Login screen demo data
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+class MyApp extends React.Component {
 
-  // Framework7 Parameters
-  const f7params = {
+  f7params = {
     name: 'Know Where You Go', // App name
-      theme: 'auto', // Automatic theme detection
-
-
-
-      // App store
-      store: store,
-      // App routes
-      routes: routes,
-      // Register service worker (only on production build)
-      serviceWorker: process.env.NODE_ENV ==='production' ? {
-        path: '/service-worker.js',
-      } : {},
+    theme: 'auto', // Automatic theme detection
+    // App store
+    store: store,
+    // App routes
+    routes: routes,
+    // Register service worker (only on production build)
+    serviceWorker: process.env.NODE_ENV === 'production' ? {
+      path: '/service-worker.js',
+    } : {},
   };
-  const alertLoginData = () => {
-    f7.dialog.alert('Username: ' + username + '<br>Password: ' + password, () => {
-      f7.loginScreen.close();
-    });
-  }
-  f7ready(() => {
-
 
-    // Call F7 APIs here
-  });
+  render() {
 
-  return (
-    <App { ...f7params } dark>
+    return (
+      <App {...this.f7params} dark>
 
         {/* Left panel with cover effect*/}
         <Panel left cover dark>
           <View>
             <Page>
-              <Navbar title="Left Panel"/>
+              <Navbar title="Left Panel" />
               <Block>Left panel content goes here</Block>
             </Page>
           </View>
         </Panel>
 
-
-        {/* Right panel with reveal effect*/}
-        <Panel right reveal dark>
-          <View>
-            <Page>
-              <Navbar title="Right Panel"/>
-              <Block>Right panel content goes here</Block>
-            </Page>
-          </View>
-        </Panel>
-
-
         {/* Views/Tabs container */}
         <Views tabs className="safe-areas">
-          {/* Tabbar for switching views-tabs */}
-          <Toolbar tabbar labels bottom>
-            <Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconAurora="f7:house_fill" iconMd="material:home" text="Home" />
-            <Link tabLink="#view-catalog" iconIos="f7:square_list_fill" iconAurora="f7:square_list_fill" iconMd="material:view_list" text="Catalog" />
-            <Link tabLink="#view-settings" iconIos="f7:gear" iconAurora="f7:gear" iconMd="material:settings" text="Settings" />
-          </Toolbar>
-
-          {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
           <View id="view-home" main tab tabActive url="/" />
-
-          {/* Catalog View */}
-          <View id="view-catalog" name="catalog" tab url="/catalog/" />
-
-          {/* Settings View */}
-          <View id="view-settings" name="settings" tab url="/settings/" />
-
         </Views>
-
-      {/* Popup */}
-      <Popup id="my-popup">
-        <View>
-          <Page>
-            <Navbar title="Popup">
-              <NavRight>
-                <Link popupClose>Close</Link>
-              </NavRight>
-            </Navbar>
-            <Block>
-              <p>Popup content goes here.</p>
-            </Block>
-          </Page>
-        </View>
-      </Popup>
-
-      <LoginScreen id="my-login-screen">
-        <View>
-          <Page loginScreen>
-            <LoginScreenTitle>Login</LoginScreenTitle>
-            <List form>
-              <ListInput
-                type="text"
-                name="username"
-                placeholder="Your username"
-                value={username}
-                onInput={(e) => setUsername(e.target.value)}
-              ></ListInput>
-              <ListInput
-                type="password"
-                name="password"
-                placeholder="Your password"
-                value={password}
-                onInput={(e) => setPassword(e.target.value)}
-              ></ListInput>
-            </List>
-            <List>
-              <ListButton title="Sign In" onClick={() => alertLoginData()} />
-              <BlockFooter>
-                Some text about login information.<br />Click "Sign In" to close Login Screen
-              </BlockFooter>
-            </List>
-          </Page>
-        </View>
-      </LoginScreen>
-    </App>
-  )
+      </App>
+    )
+  }
 }
+
 export default MyApp;

src/js/routes.js

@@ -1,95 +1,10 @@
 
-import HomePage from '../pages/home.jsx';
-import AboutPage from '../pages/about.jsx';
-import FormPage from '../pages/form.jsx';
-import CatalogPage from '../pages/catalog.jsx';
-import ProductPage from '../pages/product.jsx';
-import SettingsPage from '../pages/settings.jsx';
-
-import DynamicRoutePage from '../pages/dynamic-route.jsx';
-import RequestAndLoad from '../pages/request-and-load.jsx';
-import NotFoundPage from '../pages/404.jsx';
+import Home from '../pages/home.jsx';
 
 var routes = [
   {
     path: '/',
-    component: HomePage,
-  },
-  {
-    path: '/about/',
-    component: AboutPage,
-  },
-  {
-    path: '/form/',
-    component: FormPage,
-  },
-  {
-    path: '/catalog/',
-    component: CatalogPage,
-  },
-  {
-    path: '/product/:id/',
-    component: ProductPage,
-  },
-  {
-    path: '/settings/',
-    component: SettingsPage,
-  },
-
-  {
-    path: '/dynamic-route/blog/:blogId/post/:postId/',
-    component: DynamicRoutePage,
-  },
-  {
-    path: '/request-and-load/user/:userId/',
-    async: function ({ router, to, resolve }) {
-      // App instance
-      var app = router.app;
-
-      // Show Preloader
-      app.preloader.show();
-
-      // User ID from request
-      var userId = to.params.userId;
-
-      // Simulate Ajax Request
-      setTimeout(function () {
-        // We got user data from request
-        var user = {
-          firstName: 'Vladimir',
-          lastName: 'Kharlampidi',
-          about: 'Hello, i am creator of Framework7! Hope you like it!',
-          links: [
-            {
-              title: 'Framework7 Website',
-              url: 'http://framework7.io',
-            },
-            {
-              title: 'Framework7 Forum',
-              url: 'http://forum.framework7.io',
-            },
-          ]
-        };
-        // Hide Preloader
-        app.preloader.hide();
-
-        // Resolve route to load page
-        resolve(
-          {
-            component: RequestAndLoad,
-          },
-          {
-            props: {
-              user: user,
-            }
-          }
-        );
-      }, 1000);
-    },
-  },
-  {
-    path: '(.*)',
-    component: NotFoundPage,
+    component: Home,
   },
 ];
 

src/js/store.js

@@ -3,33 +3,15 @@ import { createStore } from 'framework7/lite';
 
 const store = createStore({
   state: {
-    products: [
-      {
-        id: '1',
-        title: 'Apple iPhone 8',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
-      },
-      {
-        id: '2',
-        title: 'Apple iPhone 8 Plus',
-        description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
-      },
-      {
-        id: '3',
-        title: 'Apple iPhone X',
-        description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
-      },
-    ]
+
   },
+
   getters: {
-    products({ state }) {
-      return state.products;
-    }
+
   },
+
   actions: {
-    addProduct({ state }, product) {
-      state.products = [...state.products, product];
-    },
+
   },
 })
 export default store;