524 lines
19 KiB
PHP
524 lines
19 KiB
PHP
@extends('layout')
|
|
|
|
@section('content')
|
|
<link href="{{ asset('css/jquery.seat-charts.css') }}" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css">
|
|
<link href="{{ asset('jcrop/css/jquery.Jcrop.css') }}" rel="stylesheet" type="text/css">
|
|
<style>
|
|
.loader {
|
|
font-size: 10px;
|
|
margin: 50px auto;
|
|
text-indent: -9999em;
|
|
width: 11em;
|
|
height: 11em;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
|
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
|
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
|
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
|
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
|
|
position: relative;
|
|
-webkit-animation: load3 1.4s infinite linear;
|
|
animation: load3 1.4s infinite linear;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
}
|
|
.loader:before {
|
|
width: 50%;
|
|
height: 50%;
|
|
background: #ffffff;
|
|
border-radius: 100% 0 0 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
content: '';
|
|
}
|
|
.loader:after {
|
|
background: #0dc5c1;
|
|
width: 75%;
|
|
height: 75%;
|
|
border-radius: 50%;
|
|
content: '';
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
@-webkit-keyframes load3 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes load3 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<div id="allEventCreate">
|
|
<h1>Veranstaltung hinzufügen</h1>
|
|
{!! Form::open(['url' => 'admin/events', 'files' => true, 'id' => 'form']) !!}
|
|
<br />
|
|
{!! Form::label('hide_externally', 'Veranstaltung verstecken') !!}
|
|
{!! Form::checkbox('hide_externally', null) !!}<br /><br />
|
|
|
|
{!! Form::label('title', 'Titel:') !!}
|
|
{!! Form::text('title',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>
|
|
|
|
{!! Form::label('image', 'Bild:') !!}
|
|
{!! Form::file('image', null) !!}<br/><br/>
|
|
<div id="views"></div>
|
|
|
|
{!! Form::label('start_date', 'Startdatum:') !!}
|
|
{!! Form::text('start_date',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>
|
|
|
|
{!! Form::label('end_date', 'Enddatum:') !!}
|
|
{!! Form::text('end_date',null,['class'=>'form-control']) !!}<br/><br/>
|
|
|
|
{!! Form::label('starttime', 'Zeit:') !!}
|
|
{!! Form::time('starttime',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>
|
|
|
|
{!! Form::label('room', 'Raum:') !!}
|
|
{!! Form::text('room',null,['class'=>'form-control', 'required' => 'required']) !!}<br/><br/>
|
|
|
|
{!! Form::checkbox('lions') !!}
|
|
{!! Form::label('lions', 'Lions-Event') !!}<br/><br/>
|
|
|
|
{!! Form::label('shorttext', 'Kurze Beschreibung:') !!}
|
|
{!! Form::text('shorttext',null,['class'=>'form-control', "maxlength" => "100", 'required' => 'required']) !!}<br/><br/>
|
|
|
|
|
|
{!! Form::label('reservation_id', 'Reservation Typ:') !!}
|
|
{!! Form::select('reservation_id',$reservations) !!}<br/><br/>
|
|
|
|
<select id="seattemplate" onchange="$(this).setTemplate(this.value);">
|
|
@foreach($seattemplates as $seattemplate)
|
|
<option value="{{$seattemplate->map}}">{{$seattemplate->name}}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<div id="amountSeatsDiv">
|
|
{!! Form::label('amountSeats', 'Anzahl der Sitzplätze') !!}
|
|
{!! Form::number('amountSeats', '0') !!}
|
|
</div>
|
|
|
|
<input type="hidden" name="seatMap" id="hiddenSeatMap" value="">
|
|
|
|
<div id="seat-map"></div>
|
|
|
|
<span id="set-row" onclick='$("#dialog_row").dialog();'>Reihe zuweisen</span>
|
|
|
|
<div class="row" id="prices">
|
|
<div class="small-12 medium-4 columns" id="price-yellow">
|
|
{!! Form::label('price_cat_a', 'Preis Kategorie A:') !!}
|
|
{!! Form::text('price_cat_a',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
|
|
</div>
|
|
<div class="small-12 medium-4 columns" id="price-blue">
|
|
{!! Form::label('price_cat_b', 'Preis Kategorie B:') !!}
|
|
{!! Form::text('price_cat_b',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
|
|
</div>
|
|
<div class="small-12 medium-4 columns" id="price-red">
|
|
{!! Form::label('price_cat_c', 'Preis Kategorie C:') !!}
|
|
{!! Form::text('price_cat_c',null,['class'=>'form-control', 'data-a-sign'=>"€ ", "data-a-dec"=>",", "data-a-sep"=>"."]) !!}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="payableCulturecard">
|
|
{!! Form::checkbox('payableWithCulturecard') !!}
|
|
{!! Form::label('payableWithCulturecard', 'Bezahlbar mit der Kulturkarte') !!}
|
|
</div>
|
|
|
|
<div id="concession_div">
|
|
<h2>Ermäßigungen</h2>
|
|
@foreach($concessions as $concession)
|
|
<div class="row" id="concession_{{$concession->id}}">
|
|
<div class="col-sm-3">
|
|
{{$concession->name}}
|
|
</div>
|
|
<div class="col-sm-1">
|
|
@if($concession->name != "Vollpreis")
|
|
<span onclick="$('#concession_{{$concession->id}}').remove();">(löschen)</span>
|
|
@endif
|
|
</div>
|
|
<div class="col-sm-2">
|
|
{{Form::hidden("concessionNames[]", $concession->name)}}
|
|
<div class="ui input">
|
|
@if($concession->fixed == 1)
|
|
{{ Form::number("concessionPercs[]", $concession->perc, ['readonly' => 'readonly']) }}
|
|
@else
|
|
{{ Form::number("concessionPercs[]", $concession->perc)}}
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{!! Form::label('text', 'Zusatzinfos:') !!}
|
|
{!! Form::textarea('text'," ",['class'=>'form-control', 'id'=>'article-ckeditor', 'required' => 'required']) !!}
|
|
|
|
{!! Form::label('cat', 'Kategorie:') !!}<br/>
|
|
@foreach($cats as $cat)
|
|
{{ Form::checkbox("cat[]", $cat->id, false) }}
|
|
{{$cat->name}}<br/>
|
|
@endforeach
|
|
|
|
|
|
|
|
{!! Form::submit('Speichern', ['class' => 'btn btn-primary form-control', 'onclick' => '$(#seattemplate).disable()']) !!}
|
|
|
|
{!! Form::close() !!}
|
|
|
|
{{ Html::script('ckeditor/ckeditor.js') }}
|
|
<script>
|
|
var ckeditor = CKEDITOR.replace('article-ckeditor');
|
|
</script>
|
|
<div id="dialog" title="Kategorie">
|
|
<p>
|
|
<button onclick="setSeat('a');">A</button>
|
|
<br/>
|
|
<button onclick="setSeat('b');">B</button>
|
|
<br/>
|
|
<button onclick="setSeat('c');">C</button>
|
|
<br/>
|
|
<button onclick="setSeat('nv');">Nicht verkäuflich</button>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div id="dialog_row" title="Reihe Kategorie zuweiesn" style="display:none;">
|
|
<p>
|
|
<input id="seatmap_row"/><br/>
|
|
<button onclick="$(this).setRow('a');">A</button>
|
|
<br/>
|
|
<button onclick="$(this).setRow('b');">B</button>
|
|
<br/>
|
|
<button onclick="$(this).setRow('c');">C</button>
|
|
<br/>
|
|
<button onclick="$(this).setRow('nv');">Nicht verkäuflich</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="loader" class="loader">Loading...</div>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script src="{{ URL::asset('jcrop/js/jquery.min.js') }}"></script>
|
|
<script src="{{ URL::asset('jcrop/js/jquery.Jcrop.min.js') }}"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<script src="{{ URL::asset('js/jquery.seat-charts.min.js') }}"></script>
|
|
<script src="{{ URL::asset('res/admin/events.js') }}"></script>
|
|
<script src="{{ URL::asset('js/autoNumeric.js') }}"></script>
|
|
<script>
|
|
var selectedSeats = new Array(27);
|
|
for (i = 0; i < selectedSeats.length; i++) {
|
|
selectedSeats[i] = new Array(27)
|
|
}
|
|
var seat;
|
|
$(document).ready(function () {
|
|
$("#start_date").datepicker({dateFormat: 'yy-mm-dd'});
|
|
$("#end_date").datepicker({dateFormat: 'yy-mm-dd'});
|
|
|
|
|
|
$("#dialog").dialog({autoOpen: false});
|
|
$('#price_cat_a').autoNumeric('init');
|
|
$('#price_cat_b').autoNumeric('init');
|
|
$('#price_cat_c').autoNumeric('init');
|
|
|
|
x = [
|
|
'____________________uuuuuuu',
|
|
'______________uuuu__uuuuuuu',
|
|
'__________uuuuuuuu__uuuuuuu',
|
|
'______uuuuuuuuuuuu__uuuuuuu',
|
|
'___uuuuuuuuuuuuuuu__uuuuuuu',
|
|
'____uuuuuuuuuuuuuu__uuuuuuu',
|
|
'_',
|
|
'_',
|
|
'_',
|
|
'______________uuuuuuuuuuuuu',
|
|
'________uuuuu_uuuuuuuuuuuuu',
|
|
'______uuuuuuu_uuuuuuuuuuuuu',
|
|
'____uuuuuuuuu_uuuuuuuuuuuuu',
|
|
'__uuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'__________________________',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu',
|
|
'uuuuuuuuuuuuu_uuuuuuuuuuuuu'
|
|
];
|
|
var sc = $('#seat-map').seatCharts({
|
|
map: x,
|
|
seats: {
|
|
x: {
|
|
price: 99.99,
|
|
classes: 'cat-a'
|
|
},
|
|
u: {
|
|
price: 99.99,
|
|
classes: 'choose'
|
|
}
|
|
|
|
},
|
|
naming: {
|
|
top: false,
|
|
getLabel: function (character, row, column) {
|
|
return "";
|
|
},
|
|
rows: ['23', '22', '21', '20', '19', '18', '17', '16', '15', '14', '13', '12', '11', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
|
|
},
|
|
click: function () {
|
|
if (this.status() == 'available') {
|
|
seat = this;
|
|
$("#dialog").dialog("open");
|
|
return 'available';
|
|
} else if (this.status() == 'selected') {
|
|
selectedSeats.splice(selectedSeats.indexOf(this.node()[0].id), 1);
|
|
return 'available';
|
|
} else {
|
|
setSeat
|
|
return this.style();
|
|
}
|
|
}
|
|
});
|
|
|
|
$.fn.setRow = function (category) {
|
|
|
|
var row = $("#seatmap_row").val();
|
|
row.split(",").forEach(function (item) {
|
|
var regex = new RegExp("^" + item + "_[0-9]+");
|
|
var seats = sc.find(regex).seats;
|
|
for (var i = 0; i < seats.length; i++) {
|
|
seat = seats[i];
|
|
setSeat(category);
|
|
}
|
|
});
|
|
$("#dialog_row").dialog("close");
|
|
};
|
|
|
|
$.fn.setTemplate = function (map) {
|
|
map = map.split("\\n");
|
|
for (var i = 1; i <= map.length; i++) {
|
|
var row = map[24 - i - 1];
|
|
console.log("");
|
|
for (var j = 1; j <= row.length; j++) {
|
|
var seats = sc.get([i + '_' + j]);
|
|
if (seats.seats.length > 0) {
|
|
var seat = seats.seats[0];
|
|
var cat = map[24 - i - 1][j - 1];
|
|
var old_cat = seat.settings.character;
|
|
seat.settings.character = cat;
|
|
selectedSeats[j - 1][i - 1] = cat;
|
|
if (cat === '_') {
|
|
$(seat.node()[0]).removeClass("cat-" + old_cat).addClass("choose");
|
|
} else {
|
|
$(seat.node()[0]).removeClass("cat-" + old_cat).removeClass("choose").addClass("cat-" + cat);
|
|
}
|
|
}
|
|
}
|
|
setSeatMap();
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
function setSeat(category) {
|
|
console.log(category === "nv");
|
|
x = seat.settings.column;
|
|
y = seat.settings.row;
|
|
y = 22 - y;
|
|
selectedSeats[x][y] = (category === "nv" ? "_" : category);
|
|
seat.settings.character = (category === "nv" ? "_" : category);
|
|
$(seat.node()[0]).removeClass("choose").removeClass("cat-a").removeClass("cat-b").removeClass("cat-c").addClass("cat-" + category);
|
|
$("#dialog").dialog("close");
|
|
setSeatMap();
|
|
}
|
|
|
|
|
|
function setSeatMap() {
|
|
var ret = "";
|
|
for (var i = 0; i <= selectedSeats.length - 4; i++) {
|
|
for (var j = 0; j < selectedSeats[i].length; j++) {
|
|
if (typeof selectedSeats[j][i] == 'string') {
|
|
ret += selectedSeats[j][i];
|
|
} else {
|
|
ret += "_"
|
|
}
|
|
}
|
|
ret += "\n";
|
|
}
|
|
$("#hiddenSeatMap").val(ret);
|
|
}
|
|
|
|
$("#image").change(function () {
|
|
loadImage(this);
|
|
});
|
|
|
|
|
|
var crop_max_width = 1000;
|
|
var crop_max_height = 1000;
|
|
var jcrop_api;
|
|
var canvas;
|
|
var context;
|
|
var image;
|
|
|
|
var prefsize;
|
|
|
|
function loadImage(input) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
canvas = null;
|
|
reader.onload = function (e) {
|
|
image = new Image();
|
|
image.onload = validateImage;
|
|
image.src = e.target.result;
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
function dataURLtoBlob(dataURL) {
|
|
var BASE64_MARKER = ';base64,';
|
|
if (dataURL.indexOf(BASE64_MARKER) == -1) {
|
|
var parts = dataURL.split(',');
|
|
var contentType = parts[0].split(':')[1];
|
|
var raw = decodeURIComponent(parts[1]);
|
|
|
|
return new Blob([raw], {
|
|
type: contentType
|
|
});
|
|
}
|
|
var parts = dataURL.split(BASE64_MARKER);
|
|
var contentType = parts[0].split(':')[1];
|
|
var raw = window.atob(parts[1]);
|
|
var rawLength = raw.length;
|
|
var uInt8Array = new Uint8Array(rawLength);
|
|
for (var i = 0; i < rawLength; ++i) {
|
|
uInt8Array[i] = raw.charCodeAt(i);
|
|
}
|
|
|
|
return new Blob([uInt8Array], {
|
|
type: contentType
|
|
});
|
|
}
|
|
|
|
function validateImage() {
|
|
if (canvas != null) {
|
|
image = new Image();
|
|
image.onload = restartJcrop;
|
|
image.src = canvas.toDataURL('image/png');
|
|
} else restartJcrop();
|
|
}
|
|
|
|
function restartJcrop() {
|
|
if (jcrop_api != null) {
|
|
jcrop_api.destroy();
|
|
}
|
|
$("#views").empty();
|
|
$("#views").append("<canvas id=\"canvas\">");
|
|
canvas = $("#canvas")[0];
|
|
context = canvas.getContext("2d");
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
context.drawImage(image, 0, 0);
|
|
$("#canvas").Jcrop({
|
|
onSelect: selectcanvas,
|
|
onRelease: clearcanvas,
|
|
boxWidth: crop_max_width,
|
|
boxHeight: crop_max_height,
|
|
aspectRatio: 1,
|
|
setSelect: [0, 0, 350, 350]
|
|
}, function () {
|
|
jcrop_api = this;
|
|
});
|
|
clearcanvas();
|
|
}
|
|
|
|
function clearcanvas() {
|
|
prefsize = {
|
|
x: 0,
|
|
y: 0,
|
|
w: canvas.width,
|
|
h: canvas.height,
|
|
};
|
|
}
|
|
|
|
function selectcanvas(coords) {
|
|
prefsize = {
|
|
x: Math.round(coords.x),
|
|
y: Math.round(coords.y),
|
|
w: Math.round(coords.w),
|
|
h: Math.round(coords.h)
|
|
};
|
|
}
|
|
|
|
function applyCrop() {
|
|
canvas.width = prefsize.w;
|
|
canvas.height = prefsize.h;
|
|
context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
|
|
validateImage();
|
|
}
|
|
|
|
$('#loader').hide();
|
|
|
|
$("#form").submit(function (e) {
|
|
applyCrop();
|
|
e.preventDefault();
|
|
var formData = new FormData($(this)[0]);
|
|
var blob = dataURLtoBlob(canvas.toDataURL('image/png'));
|
|
//---Add file blob to the form data
|
|
formData.append("cropped_image", blob);
|
|
formData.append("text", ckeditor.getData());
|
|
|
|
$('#loader').show();
|
|
$('#allEventCreate').hide();
|
|
$.ajax({
|
|
url: "/admin/events",
|
|
type: "POST",
|
|
data: formData,
|
|
contentType: false,
|
|
cache: false,
|
|
processData: false,
|
|
success: function (data) {
|
|
window.location.href = "/admin/events/";
|
|
},
|
|
error: function (data) {
|
|
console.log("Event konnte nicht erstellt werden. Bitte aus- und einloggen und nochmal probieren.")
|
|
},
|
|
complete: function (data) {
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
@endsection
|