Files
bm/public_html/resources/views/admin/events/create.blade.php
2025-09-24 13:26:28 +02:00

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