initial commit
This commit is contained in:
@@ -0,0 +1,362 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li><a href="{{ url('category/subject/' . $categoryView->id) }}"
|
||||
class="text-white">{{ $categoryView->name_en }}</a></li>
|
||||
<li class="text-white">{{ $itemView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name_en }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name_en }}</h2>
|
||||
|
||||
{{-- <p>
|
||||
{!! $itemView->description_en !!}</p>
|
||||
|
||||
<br /> --}}
|
||||
|
||||
<div class="card-body pt-0">
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Categories</label>
|
||||
<div class="d-flex align-items-center mt-3">
|
||||
@foreach ($categoriesView as $item)
|
||||
<label
|
||||
class="form-check form-check-custom form-check-inline form-check-solid me-5 is-invalid">
|
||||
<input class="form-check-input" name="categories[]" type="checkbox"
|
||||
value="{{ $item->id }}" @if (in_array($item->id, explode(',', $itemView->category_ids))) checked @endif>
|
||||
<span class="fw-semibold ps-2 fs-6">
|
||||
{{ $item->name . '(' . $item->name_en . ')' }}
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<div class="position-relative d-flex align-items-center">
|
||||
<span class="svg-icon svg-icon-2 position-absolute mx-4">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.3"
|
||||
d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
<input class="form-control form-control-solid ps-12" type="text" id="due_date"
|
||||
name="due_date"
|
||||
value="{{ $itemView->due_date ? date('d-m-Y', strtotime($itemView->due_date)) : '' }}">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Subject</label>
|
||||
<input disabled type="text" name="name" class="form-control mb-2 col-6"
|
||||
value="{{ $itemView->name }}" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10 fv-row">
|
||||
<label class="required form-label">Subject (EN)</label>
|
||||
<input disabled type="text" name="name_en" class="form-control mb-2 col-6"
|
||||
value="{{ $itemView->name_en }}" />
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.placeholder = "Enter video URL";
|
||||
input.value = this.data.url || "";
|
||||
input.style.width = "100%";
|
||||
input.style.display = "none";
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true;
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: ['link', 'bold', 'italic'], // Enable toolbar options
|
||||
config: {
|
||||
placeholder: 'Enter a header',
|
||||
levels: [2, 3, 4], // Set header levels
|
||||
defaultLevel: 3,
|
||||
},
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
services: {
|
||||
youtube: true,
|
||||
vimeo: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
linkTool: {
|
||||
class: LinkTool,
|
||||
config: {
|
||||
endpoint: '',
|
||||
},
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
image: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
embed: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const isReadOnly = true;
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData)
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,295 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<!-- start page title section -->
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li><a href="{{ url('category/subject/' . $categoryView->id) }}"
|
||||
class="text-white">{{ $categoryView->name }}</a></li>
|
||||
<li class="text-white">{{ $itemView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start tab style 01 section -->
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container tab-style2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
||||
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $itemView->name }}</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
|
||||
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
||||
style="font-size: 26px">{{ $itemView->name }}</h2>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
<!-- Include Editor.js core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<!-- Include the plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>>
|
||||
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
|
||||
|
||||
<script>
|
||||
// Custom video tool for embedding videos
|
||||
class VideoTool {
|
||||
constructor({
|
||||
data
|
||||
}) {
|
||||
this.data = data || {};
|
||||
}
|
||||
|
||||
// Render input for video URL
|
||||
render() {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.controls = true; // Enable controls for playback
|
||||
video.style.width = "100%";
|
||||
video.style.marginTop = "10px";
|
||||
video.src = this.data.url || "";
|
||||
|
||||
wrapper.appendChild(video);
|
||||
return wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
class YoutubeEmbed {
|
||||
/**
|
||||
* Define the toolbox settings for the Editor.js toolbar.
|
||||
*/
|
||||
static get toolbox() {
|
||||
return {
|
||||
title: "YouTube",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
||||
};
|
||||
}
|
||||
|
||||
constructor({
|
||||
data,
|
||||
config,
|
||||
api,
|
||||
readOnly
|
||||
}) {
|
||||
this.data = data || {};
|
||||
this.readOnly = readOnly;
|
||||
this.wrapper = null;
|
||||
this.url = this.data.url || '';
|
||||
this.isEdited = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the input field and YouTube preview.
|
||||
*/
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('block-wrapper');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.value = this.url;
|
||||
input.placeholder = "Paste YouTube URL here...";
|
||||
input.style.width = '100%';
|
||||
|
||||
this.wrapper.appendChild(input);
|
||||
this._createIframe(this.url);
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
this.isEdited = true;
|
||||
this.url = event.target.value;
|
||||
this._createIframe(this.url);
|
||||
});
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the iframe for the YouTube video.
|
||||
*/
|
||||
_createIframe(url) {
|
||||
const videoId = this._extractVideoID(url);
|
||||
if (!videoId) {
|
||||
if (this.isEdited) {
|
||||
this.wrapper.querySelector('input').classList.add('invalid');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.wrapper.innerHTML = ''; // Clear the wrapper
|
||||
|
||||
const plyrContainer = document.createElement('div');
|
||||
plyrContainer.classList.add('video-wrapper');
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
||||
iframe.allowFullscreen = true;
|
||||
|
||||
plyrContainer.appendChild(iframe);
|
||||
this.wrapper.appendChild(plyrContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the YouTube video ID from the URL.
|
||||
*/
|
||||
_extractVideoID(url) {
|
||||
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
||||
const match = url.match(regex);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the saved data for this block.
|
||||
*/
|
||||
save(blockContent) {
|
||||
return {
|
||||
url: this.url,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify the core that this tool supports read-only mode.
|
||||
*/
|
||||
static get isReadOnlySupported() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const tools = {
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
linkTool: {
|
||||
class: LinkTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
data: JSON.parse(descriptionData),
|
||||
minHeight: 0,
|
||||
onReady: () => {
|
||||
const editorContainer = document.querySelector('#description');
|
||||
|
||||
// Disable editing for all tools
|
||||
if (editorContainer) {
|
||||
const allElements = editorContainer.querySelectorAll('*');
|
||||
allElements.forEach(element => {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hide toolbar actions
|
||||
const toolbarActions = document.querySelectorAll(
|
||||
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
||||
toolbarActions.forEach(action => {
|
||||
action.style.display = 'none'; // Hide the action toolbars
|
||||
});
|
||||
|
||||
// Optionally hide any popups
|
||||
const popoverContainer = document.querySelector('.ce-popover__container');
|
||||
if (popoverContainer) {
|
||||
popoverContainer.style.display = 'none';
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,213 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $categoryView->name_en }}</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{ $categoryView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
CULTURE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ..." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="From date..." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="To date..." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a
|
||||
href="{{ url('category/subject/detail/' . $categoryView->id . '/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/subject/detail') }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
{{-- <div class=" text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp">
|
||||
<div class="pagination text-small text-uppercase text-extra-dark-gray">
|
||||
<ul class="mx-auto">
|
||||
<li><a href="#"><i
|
||||
class="fas fa-long-arrow-alt-left margin-5px-right d-none d-md-inline-block"></i>
|
||||
Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">Next <i
|
||||
class="fas fa-long-arrow-alt-right margin-5px-left d-none d-md-inline-block"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> --}}
|
||||
<!-- end pagination -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
const baseUrl = "{{ url('category/subject') }}";
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const id = "{{ $categoryView->id }}"; // Category ID
|
||||
const baseUrl = `/category/subject/${id}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,213 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
||||
<!-- start page title -->
|
||||
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
||||
{{ $categoryView->name }}
|
||||
</h1>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
||||
<!-- breadcrumb -->
|
||||
<ul class="text-center text-md-end">
|
||||
<li><a href="{{ url('') }}" class="text-white">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">ประเพณี</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANG MAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
หัวข้อ</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $categoryView->name }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ..." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="ตั้งแต่วันที่..." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="ถึงวันที่..." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">ค้นหา</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a
|
||||
href="{{ url('category/subject/detail/' . $categoryView->id . '/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/subject/detail') }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
{{-- <div class=" text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp">
|
||||
<div class="pagination text-small text-uppercase text-extra-dark-gray">
|
||||
<ul class="mx-auto">
|
||||
<li><a href="#"><i
|
||||
class="fas fa-long-arrow-alt-left margin-5px-right d-none d-md-inline-block"></i>
|
||||
ก่อนหน้า</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">ถัดไป <i
|
||||
class="fas fa-long-arrow-alt-right margin-5px-left d-none d-md-inline-block"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> --}}
|
||||
<!-- end pagination -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
const baseUrl = "{{ url('category/subject') }}";
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const id = "{{ $categoryView->id }}"; // Category ID
|
||||
const baseUrl = `/category/subject/${id}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user