Configure axios library and read the api-key dynamically

This commit is contained in:
Nabeel Shahzad
2018-03-12 20:14:55 -05:00
parent 0f9ce8bbb9
commit 1896e1cc35
11 changed files with 1655 additions and 46 deletions

View File

@@ -7,21 +7,32 @@ window.Popper = require('popper.js').default;
window.$ = window.jquery = require('jquery');
window.select2 = require('select2');
window.pjax = require('pjax');
window.axios = require('axios');
// Container for phpVMS specific functions
/**
* Container for phpVMS specific functions
*/
window.phpvms = {
};
/**
* Configure Axios
* Configure Axios with both the csrf token and the API key
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
const token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
const api_key = document.head.querySelector('meta[name="api-key"]');
if(api_key) {
window.axios.defaults.headers.common['x-api-key'] = api_key.content;
window.PHPVMS_USER_API_KEY = api_key.content;
} else {
window.PHPVMS_USER_API_KEY = false;
console.error('API Key not found!');
}

2
resources/js/common.js Normal file
View File

@@ -0,0 +1,2 @@

View File

@@ -7,7 +7,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
{{-- Start of required lines block. DON'T REMOVE THESE LINES! They're required or might break things --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="api-key" content="{{ Auth::check() ? Auth::user()->api_key: '' }}">
{{-- End the required lines block --}}
<script src="{{ public_asset('/assets/system/js/jquery.js') }}"></script>

View File

@@ -5,8 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
{{-- Don't remove this! It's required --}}
{{-- Start of required lines block. DON'T REMOVE THESE LINES! They're required or might break things --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="api-key" content="{{ Auth::check() ? Auth::user()->api_key: '' }}">
{{-- End the required lines block --}}
<title>@yield('title') - {{ config('app.name') }}</title>
@@ -21,9 +23,6 @@
<link href="{{ public_asset('/assets/system/css/vendor.css') }}" rel="stylesheet"/>
@yield('css')
{{-- This is required to include --}}
@include('system.scripts')
</head>
<body>
<!-- Navbar -->
@@ -53,8 +52,12 @@
<div class="wrapper">
<div class="clear"></div>
<div class="container-fluid" style="width: 85%!important;">
{{-- These should go where you want your content to show up --}}
@include('flash.message')
@yield('content')
{{-- End the above block--}}
</div>
<div class="clearfix" style="height: 200px;"></div>
@@ -63,7 +66,7 @@
<div class="copyright">
{{--
Please keep the copyright message somewhere, as-per the LICENSE file
Thanks!!
Thanks!!
--}}
powered by <a href="http://www.phpvms.net" target="_blank">phpvms</a>
</div>
@@ -72,20 +75,21 @@
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
{{--<script src="{{ public_asset('/assets/system/js/vendor.js') }}?v={{ time() }}"></script>
<script src="{{ public_asset('/assets/system/js/phpvms.js') }}?v={{ time() }}"></script>--}}
{{-- Start of the required tags block. Don't remove these or things will break!! --}}
<script src="{{ public_asset('/js/frontend/manifest.js') }}"></script>
<script src="{{ public_asset('/js/frontend/vendor.js') }}"></script>
<script src="{{ public_asset('/js/frontend/app.js') }}"></script>
@yield('scripts')
{{-- End the required tags block --}}
<script>
$(document).ready(function () {
$(".select2").select2();
});
</script>
@yield('scripts')
</body>
</html>

View File

@@ -1,28 +1,18 @@
@section('scripts')
<script>
$(document).ready(() => {
const select_id = "select#aircraft_select";
const destContainer = $('#fares_container');
<script>
const select_id = "select#aircraft_select";
const destContainer = $('#fares_container');
$(select_id).change((e) => {
const aircraft_id = $(select_id + " option:selected").val();
console.log('aircraft select change: ', aircraft_id);
$(select_id).change((e) => {
$.ajax({
url: "{{ url('/pireps/fares') }}?aircraft_id=" + aircraft_id,
type: 'GET',
headers: {
'x-api-key': '{{ Auth::user()->api_key }}'
},
success: (data) => {
console.log('returned new fares', data);
destContainer.html(data);
},
error: () => {
destContainer.html('');
}
});
});
});
</script>
const aircraft_id = $(select_id + ' option:selected').val();
const url = '{{ url('/pireps/fares') }}?aircraft_id=' + aircraft_id;
console.log('aircraft select change: ', aircraft_id);
axios.get(url).then(response => {
console.log('returned new fares', response);
destContainer.html(response.data);
});
});
</script>
@endsection

View File

@@ -2,9 +2,5 @@
DO NOT MODIFY THIS FILE. THINGS WILL BREAK IF YOU DO
--}}
<script>
@if (Auth::user())
const PHPVMS_USER_API_KEY = "{{ Auth::user()->api_key }}";
@else
const PHPVMS_USER_API_KEY = false;
@endif
</script>