<!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">
    <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">
    <title>One</title>
</head>

<body>

<v-dialog
      v-model="alertError"
      width="350"
    >

      <v-card>
        <v-card-title
          class="headline error lighten-2"
          primary-title
        >
            Error
        </v-card-title>

        <v-card-text>
          {{errMessage}}
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="alertError = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <div v-cloak id="app">
        <v-app id="smartApp">
            <one-navbar></one-navbar>
          
                <v-container style="background: #F5E8DF!important" fluid fill-height class="pl-1 pr-1 pt-2 pb-2 mt-4">
                    <v-layout row wrap>
                        <v-flex xs12 class="left" fill-height pa-1>
                            <request-listing></request-listing>
                        </v-flex>
                    </v-layout>
                </v-container>
           
            <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';
        window.store = store;
        
        
        
        new Vue({
            store,
            el: "#app",
            methods: {},
            components: {
                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
                'request-listing': httpVueLoader('./components/requestListing.vue')
            },
            computed: {
                
                alertError: {
                    get() {
                        return this.$store.state.requester.alertError;
                    },
                    set(val) {
                        this.$store.commit("requester/updateAlertError", val);
                    }   
                },
                errMessage: {
                    get() {
                        return this.$store.state.requester.errMessage;
                    },
                    set(val) {
                        this.$store.commit("requester/updateErrMessage", val);
                    }
                }
            }
        })

       
    </script>
    <style>
        [v-cloak] {
            display: none
        }
    </style>
</body>

</html>