One UI in flutter

padmanto 9cfd3c96f5 Init		3 years ago
android	Init	3 years ago
ios	Init	3 years ago
lib	Init	3 years ago
linux	Init	3 years ago
macos	Init	3 years ago
test	Init	3 years ago
web	Init	3 years ago
windows	Init	3 years ago
.gitignore	Init	3 years ago
.metadata	Init	3 years ago
README.md	Init	3 years ago
analysis_options.yaml	Init	3 years ago
helper_func.fish	Init	3 years ago
pubspec.lock	Init	3 years ago
pubspec.yaml	Init	3 years ago

README.md

onemd

Create web/md_mitra_lab.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mitra Lab MasterData</title>
    <script>
      //setting route for this screen
      function fx_initial_route() {
        return "/mdLabMitra";
      }
    </script>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

index.html for debug

    <script>
      // The value below is injected by flutter build, do not touch.
      var serviceWorkerVersion = null;
      function fx_initial_route() {
        return "/mdLabMitra";
      }
    </script>

main.dart

String initialRoute = homeRoute;
try {
  initialRoute = fxInitialRoute();
} catch (_) {}
return MaterialApp(
  title: ref.watch(webTitleProvider),
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
    canvasColor: Colors.white,
    primaryColor: Colors.blue,
    splashColor: Constants.orange,
    brightness: Brightness.light,
  ),
  onGenerateRoute: AppRoute.generateRoute,
  initialRoute: initialRoute,
);

Build and upload

flutter build web --release --base-href "/one-ui-flutter/md-mitra/" --pwa-strategy none --web-renderer html

ul_flutter_ui devone.aplikasi.web.id

one-ui from existing vuejs

used file : index.php store.js update store.js

import system from "../../apps/modules/system/system.js";
export const store = new Vuex.Store({
    modules: {
        system: system
    },
});

update index.php

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>One</title>
      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
      <link rel="stylesheet" href="../../libs/vendor/css/icomoon-fonts.css">
      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
   </head>
  <style>
  iframe.iframe-flt {
    display:flex;
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    margin-top:60px;
    margin-bottom:30px;
  }
  </style>
   <body>
      <div v-cloak id="app">
         <v-app id="smartApp" >
            <one-navbar></one-navbar>
              <iframe class="iframe-flt"
                  style="width:100%;height:100%;"
                  src="/one-ui-flutter/md-mitra/md_mitra_lab.html">
              </iframe>
            <one-footer> </one-footer>
         </v-app>
      </div>

      <!-- Vendor -->
      <script src="../../libs/vendor/moment.min.js"></script>
      <script src="../../libs/vendor/numeral.min.js"></script>
      <script src="../../libs/vendor/moment-locale-id.js"></script>
      <script src="../../libs/vendor/lodash.js"></script>
      <script src="../../libs/vendor/axios.min.js"></script>
      <script src="../../libs/vendor/vue.js"></script>
      <script src="../../libs/vendor/vuex.js"></script>
      <script src="../../libs/vendor/vuetify.js"></script>
      <script src="../../libs/vendor/httpVueLoader.js"></script>
      <script src="../../libs/one_global.js"></script>
      <!-- App Script -->
<script type="module">
import { store } from './store.js<?php echo $ts; ?>';
window.store = store;
new Vue({
store,
   el: '#app',
   components: {
      'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponent.vue'),
      'one-footer': httpVueLoader('../../apps/components/oneFooter.vue'),
      }
    })
    </script>
    <style>
      [v-cloak] {
         display: none
      }
    </style>
   </body>
</html>