teimur8
3/13/2018 - 4:21 AM
fullcalendar
import SelectAjax from '../components/SelectAjax.vue';
let app = new Vue({
components: {
SelectAjax
},
el: '#app',
data: {
events,
// events2:[],
userId,
newEvent: {},
modal: {
client: {},
comment: '',
create: true
},
setPostUrl,
},
methods: {
createEvent(start, end, jsEvent, view, resource){
// заперт на создание событий в будущем
if(!start.isAfter(moment())){
this.cal.fullCalendar('unselect');
this.reloadData();
alertify.error('Нельзя создать встречу задним числом');
return;
}
this.showModal();
this.cal.fullCalendar('unselect');
this.newEvent.constraint = 'businessHours';
this.newEvent.editable = true;
this.newEvent.start = start.format("YYYY-MM-DD HH:mm:ss");
this.newEvent.end = end.format("YYYY-MM-DD HH:mm:ss");
this.newEvent.userId = this.userId;
},
saveEvent(){
let client = this.modal.client;
if (client.code) {
this.newEvent.title = client.name;
this.newEvent.client = client;
this.newEvent.comment = this.modal.comment;
this.events.push(this.newEvent);
this.reloadEvents();
this.closeModal();
this.reloadData();
this.updateEventVariable();
}
},
removeEvent(){
if (!this.modal.create && this.newEvent._id) {
this.events = this.events.filter(item => item._id !== this.newEvent._id);
this.reloadEvents();
this.reloadData();
this.closeModal();
}
},
updateEventVariable(){
let events = $('#calendar').fullCalendar('clientEvents');
events = events.map(item => this.eventFormat(item));
this.events = events;
},
reloadEvents(){
this.cal.fullCalendar('removeEvents')
this.cal.fullCalendar('addEventSource', this.events)
},
showModal(){
$('#myModal').modal('show');
},
closeModal(){
$('#myModal').modal('hide');
},
reloadData(){
this.newEvent = {};
this.modal = {
client: {},
comment: '',
create: true
};
},
eventFormat(item){
item.start = item.start.format("YYYY-MM-DD HH:mm:ss");
item.end = item.end.format("YYYY-MM-DD HH:mm:ss");
delete item.source;
delete item.className;
return item;
},
saveToBd(){
this.updateEventVariable();
let _this = this;
axios.post(this.setPostUrl, {events:this.events})
.then(function (response) {
if (response.data.success) {
}
})
}
},
computed: {
cal(){
return $('#calendar');
},
}
});
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
timeFormat: 'H(:mm)',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
navLinks: true, // can click day/week names to navigate views
slotDuration: '00:30:00',
minTime: '08:00:00',
maxTime: '20:00:00',
slotLabelFormat: 'H(:mm)',
allDaySlot: false,
selectable: true,
selectHelper: true,
lang: 'ru',
select: function (start, end, jsEvent, view, resource) {
app.createEvent(start, end, jsEvent, view, resource);
},
eventClick(calEvent, jsEvent) {
if(calEvent.editable){
app.newEvent = app.eventFormat(calEvent);
app.modal.client = calEvent.client;
app.modal.comment = calEvent.comment;
app.modal.create = false;
app.showModal();
}
},
eventResize(event, delta, revertFunc){
app.updateEventVariable();
},
eventDrop(){
app.updateEventVariable();
},
businessHours: {
start: '09:00',
end: '18:00',
rendering: 'background',
className: 'fc-business',
dow: [1, 2, 3, 4, 5, 6],
},
editable: true,
timezone: "local",
weekends: true,
events: events
});
@section('css')
<link href="/vendor/fullcalendar.min.css" rel="stylesheet"/>
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
@endsection
@section('scripts')
<script src="/vendor/moment.min.js"></script>
<script src="/vendor/jquery-ui.min.js"></script>
<script src="/vendor/fullcalendar.min.js"></script>
<script src="/vendor/fullcalendar_ru.js"></script>
<script>
$('.select2ajaxClients').select2({ajax: {url: 'https://{{$_SERVER['HTTP_HOST']}}/ajax/clients',dataType: 'json'}});
$('.datepicker').flatpickr({"locale": {"firstDayOfWeek": 1}});
</script>
<script id="jsData">
// var events = JSON.parse('[{"client":{"name":"EURO AUTO SERVICE ТОО (Алматы)","code":"3f571d70-b275-11e4-b34a-00155d648080"},"comment":"asdasdf","_id":"_fc5","allDay":false,"title":"EURO AUTO SERVICE ТОО (Алматы)","constraint":"businessHours","editable":true,"start":"2018-02-22 14:00:00","end":"2018-02-22 16:00:00"},{"client":{"name":"EMEX.KZ ТОО (Алматы)","code":"c0dd0aa5-f54f-11e4-ab38-00155d648080"},"comment":"sadfa","_id":"_fc8","allDay":false,"title":"EMEX.KZ ТОО (Алматы)","constraint":"businessHours","editable":true,"start":"2018-02-22 16:30:00","end":"2018-02-22 18:00:00"}]');
var events = JSON.parse('<?= toJson($events) ?>');
var userId = JSON.parse('<?= toJson($user->user_code1c) ?>');
var setPostUrl = JSON.parse('<?= toJson(route('crmPlans.setPlan')) ?>');
$('#jsData').remove();
</script>
<script src="<?= s_ver('/js/crmPlans.js') ?>"></script>
@endsection
@extends('layouts.app')
@section('content')
{{--<section class="content-header">--}}
{{--<h1 class="pull-left">Crm Plans</h1>--}}
{{--</section>--}}
<div class="content">
<div class="clearfix"></div>
@include('flash::message')
<div class="clearfix"></div>
<div class="box box-primary">
<div class="box-body">
<h2 class="text-center"><a href="{{route('crmPlans.index')}}">{{$user->user_name}}</a> ({{$user->user_email}})</h2>
<hr>
<div id='calendar'></div>
</div>
<div class="box-footer" id="app">
<div class="row">
<div class="col-md-12">
<button class="btn btn-default" v-on:click="saveToBd()">Записать в БД</button>
</div>
</div>
{{--<div class="row">--}}
{{--<div class="col-md-12">--}}
{{--<pre>@{{ events }}</pre>--}}
{{--</div>--}}
{{--</div>--}}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Визит</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group col-md-12">
{!! Form::label('clients', 'Клиент:') !!}
<select-ajax
url="{{ route('ajax.clients') }}"
:options="{userId:userId}"
v-model="modal.client"
v-if="modal.create"
></select-ajax>
<h2 v-if="!modal.create">@{{ modal.client.name }}</h2>
</div>
<div class="form-group col-md-12">
{!! Form::label('', 'Комментарий к визиту:') !!}
{!! Form::textarea('vizitData[startComment]', null, ['class' => 'form-control', 'v-model'=>'modal.comment', "v-if"=>"modal.create"]) !!}
<h3 v-if="!modal.create">@{{ modal.comment }}</h3>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" v-on:click="saveEvent()" v-if="modal.create">Сохранить</button>
<button type="button" class="btn btn-danger" v-on:click="removeEvent()" v-if="!modal.create">Удалить</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@extends('crm_plans.cssjs')