Started implementing vue.js
This commit is contained in:
Dave Earley
parent
f9b4669c41
commit
5e5521c830
|
|
@ -28,6 +28,7 @@ class EventCheckInController extends MyBaseController
|
|||
];
|
||||
|
||||
JavaScript::put([
|
||||
'attendees' => $event->attendees,
|
||||
'qrcodeCheckInRoute' => route('postQRCodeCheckInAttendee', ['event_id' => $event->id]),
|
||||
'checkInRoute' => route('postCheckInAttendee', ['event_id' => $event->id]),
|
||||
'checkInSearchRoute' => route('postCheckInSearch', ['event_id' => $event->id]),
|
||||
|
|
|
|||
|
|
@ -1,130 +1,171 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Check In: {{$event->title}}
|
||||
</title>
|
||||
<head>
|
||||
<title>
|
||||
Check In: {{$event->title}}
|
||||
</title>
|
||||
|
||||
{!! HTML::style('assets/stylesheet/application.css') !!}
|
||||
{!! HTML::style('assets/stylesheet/check_in.css') !!}
|
||||
{!! HTML::script('vendor/jquery/jquery.js') !!}
|
||||
{!! HTML::style('assets/stylesheet/application.css') !!}
|
||||
{!! HTML::style('assets/stylesheet/check_in.css') !!}
|
||||
{!! HTML::script('vendor/jquery/jquery.js') !!}
|
||||
|
||||
@include('Shared/Layouts/ViewJavascript')
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
|
||||
@include('Shared/Layouts/ViewJavascript')
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-Token': "<?php echo csrf_token() ?>"
|
||||
}
|
||||
});
|
||||
<script>
|
||||
$(function () {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-Token': "<?php echo csrf_token() ?>"
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="menuToggle hide">
|
||||
<i class="ico-menu"></i>
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="menuToggle hide">
|
||||
<i class="ico-menu"></i>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="attendee in attendees">
|
||||
Name: <b>@{{ attendee.first_name }} @{{ attendee.last_name }} </b>
|
||||
<br>
|
||||
Reference: <b>@{{ attendee.reference }}</b>
|
||||
<br>
|
||||
Ticket: <b>@{{ attendee.ticket_id }}</b>
|
||||
<a href="" class="ci btn btn-successfulQrRead">
|
||||
<i class="ico-checkmark"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="attendee_input_wrap">
|
||||
<div class="input-group">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="attendee_input_wrap">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button title="Scan QR Code" class="btn btn-default qr_search" type="button"><i class="ico-qrcode"></i> </button>
|
||||
<button title="Scan QR Code" class="btn btn-default qr_search" type="button"><i
|
||||
class="ico-qrcode"></i></button>
|
||||
</span>
|
||||
{!! Form::text('attendees_q', null, [
|
||||
'class' => 'form-control attendee_search',
|
||||
'id' => 'search',
|
||||
'placeholder' => 'Search by Attendee Name, Order Reference, Attendee Reference... '
|
||||
]) !!}
|
||||
{!! Form::text('attendees_q', null, [
|
||||
'class' => 'form-control attendee_search',
|
||||
'id' => 'search',
|
||||
'placeholder' => 'Search by Attendee Name, Order Reference, Attendee Reference... '
|
||||
]) !!}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<span class="clearSearch ico-cancel"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="clearSearch ico-cancel"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="attendeeList">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="attendee_list">
|
||||
<h4 class="attendees_title">
|
||||
All Attendees
|
||||
</h4>
|
||||
<ul class="list-group" id="attendee_list">
|
||||
Loading Attendees...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="hide">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{--QR Modal--}}
|
||||
<div role="dialog" id="QrModal" class="modal fade" style="display: none;">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
@if(session()->has('success_message'))
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 col-xs-12">
|
||||
<div class="alert alert-success alert-dismissible text-center" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<p><strong>Success</strong>: {{ session('success_message') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div id="ScanVideoOutter">
|
||||
</div>
|
||||
<div class="well" id="ScanResult"></div>
|
||||
<canvas id="QrCanvas" width="800" height="600"></canvas>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{!! Form::button('Close', ['class'=>"btn modal-close btn-danger",'data-dismiss'=>'modal']) !!}
|
||||
<a class="btn btn-primary startScanner" href="javascript:void(0);"><i class="fa fa-refresh"></i> Scan another ticket</a>
|
||||
|
||||
</div>
|
||||
</div><!-- /end modal content-->
|
||||
</div>
|
||||
</div>
|
||||
{{-- /END QR Modal--}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
{!! HTML::script('vendor/qrcode-scan/llqrcode.js') !!}
|
||||
{!! HTML::script('assets/javascript/backend.js') !!}
|
||||
{!! HTML::script('assets/javascript/check_in.js') !!}
|
||||
<section class="attendeeList">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="attendee_list">
|
||||
<h4 class="attendees_title">
|
||||
All Attendees
|
||||
</h4>
|
||||
<ul class="list-group" id="attendee_list">
|
||||
Loading Attendees...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<footer class="hide">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{--QR Modal--}}
|
||||
<div role="dialog" id="QrModal" class="modal fade" style="display: none;">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
@if(session()->has('success_message'))
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 col-xs-12">
|
||||
<div class="alert alert-success alert-dismissible text-center" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<p><strong>Success</strong>: {{ session('success_message') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div id="ScanVideoOutter">
|
||||
</div>
|
||||
<div class="well" id="ScanResult"></div>
|
||||
<canvas id="QrCanvas" width="800" height="600"></canvas>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{!! Form::button('Close', ['class'=>"btn modal-close btn-danger",'data-dismiss'=>'modal']) !!}
|
||||
<a class="btn btn-primary startScanner" href="javascript:void(0);"><i class="fa fa-refresh"></i> Scan
|
||||
another ticket</a>
|
||||
|
||||
</div>
|
||||
</div><!-- /end modal content-->
|
||||
</div>
|
||||
</div>
|
||||
{{-- /END QR Modal--}}
|
||||
{!! HTML::script('https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js') !!}
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
attendees: []
|
||||
},
|
||||
created: function () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData: function() {
|
||||
/* Ajax req for attendees*/
|
||||
self.attendees = Attendize.attendees;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log(Attendize);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{!! HTML::script('vendor/qrcode-scan/llqrcode.js') !!}
|
||||
{!! HTML::script('assets/javascript/backend.js') !!}
|
||||
{!! HTML::script('assets/javascript/check_in.js') !!}
|
||||
{!! HTML::script('https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js') !!}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -55,12 +55,8 @@
|
|||
|
||||
<fieldset id="question-options" {!! empty($question->has_options) ? ' class="hide"' : '' !!}>
|
||||
<h4>Question Options</h4>
|
||||
<table class="table table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Option name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="table table-condensed">
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input class="form-control" name="option[]" type="text" value=""></td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue