269 lines
11 KiB
PHP
269 lines
11 KiB
PHP
@extends('back.layout.pages-layout')
|
||
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Page Title here')
|
||
@section('content')
|
||
<div class="page-header">
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-12">
|
||
<div class="title">
|
||
<h4>Post bearbeiten</h4>
|
||
</div>
|
||
<nav aria-label="breadcrumb" role="navigation">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item">
|
||
<a href="{{ route('admin.dashboard') }}">Home</a>
|
||
</li>
|
||
<li class="breadcrumb-item active" aria-current="page">
|
||
Post bearbeiten
|
||
</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
<div class="col-md-6 col-sm-12 text-right">
|
||
<a href="{{ route('admin.posts') }}" class="btn btn-primary">View all posts</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form action="{{ route('admin.update_post', ['post_id' => $post->id]) }}" method="POST" autocomplete="off"
|
||
enctype="multipart/form-data" id="updatePostForm">
|
||
@csrf
|
||
<div class="row">
|
||
<div class="col-md-9">
|
||
<div class="card card-box mb-2">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for=""><b>Title:</b></label>
|
||
<input type="text" class="form-control" name="title" placeholder="Titel angeben"
|
||
value="{{ $post->title }}" />
|
||
<span class="text-danger error-text title_error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for=""><b>Content:</b></label>
|
||
<textarea name="content" id="content" cols="30" rows="10" class="ckeditor form-control"
|
||
placeholder="Content eingeben">{!! $post->content !!}</textarea>
|
||
<span class="text-danger error-text content_error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for=""><b>JSON FAQ:</b></label>
|
||
<textarea name="structured_data" id="structured_data" cols="30" rows="10" class="form-control"
|
||
placeholder="JSON FAQ eingeben">{!! $post->structured_data !!}</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card card-box mb-2">
|
||
<div class="card-header weight-500">SEO</div>
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for=""><b>Post Meta Keywords:</b>: <small>(Separated by Komma)</small></label>
|
||
<input type="text" class="form-control" name="meta_keywords"
|
||
value="{{ $post->meta_keywords }}" placeholder="Meta Keywords angeben" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for=""><b>Post Meta Beschreibung:</b></label>
|
||
<textarea name="meta_description" id="" cols="30" rows="10" class="form-control"
|
||
placeholder="Meta Beschreibung eingeben">{{ $post->meta_description }}</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card card-box mb-2">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for=""><b>Post Kategorie:</b></label>
|
||
<select name="category" id="" class="custom-select form-control">
|
||
{!! $categories_html !!}
|
||
</select>
|
||
<span class="text-danger error-text category_error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for=""><b>Post Featured Foto:</b></label>
|
||
<input type="file" class="form-control-file form-control" name="featured_image"
|
||
id="featured_image_input" height="auto" accept="image/png,image/jpeg, image/jpg" />
|
||
<span class="text-danger error-text featured_image_error"></span>
|
||
</div>
|
||
<div class="d-block mb-3" style="max-width:250px;">
|
||
<img src="/images/posts/resized/resized_{{ $post->featured_image }}" alt="featured_image"
|
||
class="img-thumbnail" id="featured_image_preview" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for=""><b>Tags:</b></label>
|
||
<input type="text" class="form-control" name="tags" data-role="tagsinput"
|
||
value="{{ $post->tags }}" />
|
||
</div>
|
||
<hr>
|
||
<div class="form-group">
|
||
<label for=""><b>Sichtbar:</b></label>
|
||
<div class="custom-control custom-radio mb-5">
|
||
<input type="radio" name="visibility" id="customRadio1" class="custom-control-input"
|
||
value="1" {{ $post->visibility == 1 ? 'checked' : '' }} />
|
||
<label for="customRadio1" class="custom-control-label">Öffentlich</label>
|
||
</div>
|
||
<div class="custom-control custom-radio mb-5">
|
||
<input type="radio" name="visibility" id="customRadio2" class="custom-control-input"
|
||
value="0" {{ $post->visibility == 0 ? 'checked' : '' }} />
|
||
<label for="customRadio2" class="custom-control-label">Privat</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<button type="submit" class="btn btn-primary">Post bearbeiten</button>
|
||
</div>
|
||
</form>
|
||
|
||
@endsection
|
||
@push('stylesheets')
|
||
<style>
|
||
/* Schlichter Container */
|
||
.bootstrap-tagsinput {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 4px;
|
||
/* Abstand zwischen Tags/Eingabe */
|
||
width: 100%;
|
||
min-height: 40px;
|
||
padding: 6px 8px;
|
||
background-color: #ffffff;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 6px;
|
||
/* keine Ei-Form mehr */
|
||
box-shadow: none;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
cursor: text;
|
||
}
|
||
|
||
/* Eingabefeld */
|
||
.bootstrap-tagsinput input {
|
||
border: none;
|
||
box-shadow: none;
|
||
outline: none;
|
||
background: transparent;
|
||
padding: 2px 0;
|
||
margin: 0;
|
||
min-width: 80px;
|
||
max-width: 100%;
|
||
font-size: 14px;
|
||
color: #111827;
|
||
}
|
||
|
||
/* Placeholder */
|
||
.bootstrap-tagsinput.form-control input::-moz-placeholder {
|
||
color: #9ca3af;
|
||
opacity: 1;
|
||
}
|
||
|
||
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
/* Tags */
|
||
.bootstrap-tagsinput .tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 10px;
|
||
border-radius: 999px;
|
||
background: #2563eb;
|
||
color: #ffffff;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
margin: 0;
|
||
/* Abstand kommt über gap */
|
||
}
|
||
|
||
/* Remove-Icon */
|
||
.bootstrap-tagsinput .tag [data-role="remove"] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
background-color: rgba(15, 23, 42, 0.25);
|
||
margin-left: 0;
|
||
}
|
||
|
||
.bootstrap-tagsinput .tag [data-role="remove"]:after {
|
||
content: "×";
|
||
}
|
||
|
||
/* leichtes Hover nur auf dem Icon */
|
||
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
|
||
background-color: rgba(15, 23, 42, 0.4);
|
||
}
|
||
</style>
|
||
@endpush
|
||
@push('scripts')
|
||
<script src="/back/src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
|
||
<script src="/ckeditor/ckeditor.js"></script>
|
||
// Image Preview
|
||
<script>
|
||
document.getElementById("featured_image_input").addEventListener("change", function(e) {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = function(event) {
|
||
document.getElementById("featured_image_preview").src = event.target.result;
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
</script>
|
||
// Create Post
|
||
<script>
|
||
$('#updatePostForm').on('submit', function(e) {
|
||
e.preventDefault();
|
||
var form = this;
|
||
var content = CKEDITOR.instances.content.getData();
|
||
var formdata = new FormData(form);
|
||
formdata.append('content', content);
|
||
|
||
$.ajax({
|
||
url: $(form).attr('action'),
|
||
method: $(form).attr('method'),
|
||
data: formdata,
|
||
processData: false,
|
||
dataType: 'json',
|
||
contentType: false,
|
||
beforeSend: function() {
|
||
$(form).find('span.error-text').text('');
|
||
},
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
$(form)[0].reset();
|
||
toastr.success(data.message);
|
||
} else {
|
||
toastr.error(data.message);
|
||
}
|
||
},
|
||
error: function(jqXHR, textStatus, errorThrown) {
|
||
console.log('AJAX error', textStatus, errorThrown);
|
||
console.log('Response:', jqXHR);
|
||
|
||
if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
|
||
$.each(jqXHR.responseJSON.errors, function(prefix, val) {
|
||
$(form).find('span.' + prefix + '_error').text(val[0]);
|
||
});
|
||
} else {
|
||
toastr.error('Es ist ein unerwarteter Fehler aufgetreten.');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|