191 lines
10 KiB
HTML
191 lines
10 KiB
HTML
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<h4>{{ if .IsEdit }}Ürünü Düzenle{{ else }}Yeni Ürün{{ end }}</h4>
|
||
<form
|
||
action="{{ if .IsEdit }}/admin/products/{{ .Product.ID }}/update{{ else }}/admin/products/create{{ end }}"
|
||
method="POST" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label class="form-label">Başlık</label>
|
||
<input type="text" name="title" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Title }}{{ end }}" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Slug</label>
|
||
<input type="text" name="slug" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Slug }}{{ end }}"
|
||
placeholder="Boş bırakılırsa başlıktan otomatik oluşturulur">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">İçerik</label>
|
||
<textarea id="contentInput" name="content" rows="8"
|
||
class="form-control d-none">{{ if .IsEdit }}{{ .Product.Content }}{{ end }}</textarea>
|
||
<div id="quillEditor" style="min-height:300px;border:1px solid #ddd;border-radius:4px;">
|
||
<!-- initial content will be loaded from the hidden textarea by JS -->
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Kategoriler (Ctrl/Tık birden çok seçim)</label>
|
||
<select name="categories" class="form-select" multiple>
|
||
{{ range .Categories }}
|
||
<option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Product.Categories }}{{ if eq .ID
|
||
$.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Title }}</option>
|
||
{{ end }}
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Etiketler (Ctrl/Tık birden çok seçim)</label>
|
||
<select name="tags" class="form-select" multiple>
|
||
{{ range .Tags }}
|
||
<option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Product.Tags }}{{ if eq .ID $.ID
|
||
}}selected{{ end }}{{ end }}{{ end }}>{{ .Name }}</option>
|
||
{{ end }}
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Ana Görsel (Tek dosya)</label>
|
||
<input type="file" name="image" class="form-control" accept="image/*">
|
||
<div class="mt-2">
|
||
<img id="imagePreview" src="" alt="preview" class="rounded"
|
||
style="display:none;width:150px;height:150px;object-fit:cover;border:1px solid #ddd;">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Fiyat</label>
|
||
<input type="number" step="0.01" name="price" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Price }}{{ else }}0.00{{ end }}" required>
|
||
</div>
|
||
<div class="row g-2 mb-3">
|
||
<div class="col-3">
|
||
<label class="form-label">Genişlik</label>
|
||
<input type="number" name="width" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Width }}{{ end }}" placeholder="Örn: 800">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Yükseklik</label>
|
||
<input type="number" name="height" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Height }}{{ end }}" placeholder="Örn: 600">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Kalite</label>
|
||
<input type="number" name="quality" class="form-control"
|
||
value="{{ if .IsEdit }}{{ .Product.Quality }}{{ else }}80{{ end }}">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Format</label>
|
||
<select name="format" class="form-select">
|
||
<option value="avif" {{ if .IsEdit }}{{ if eq .Product.Format "avif" }}selected{{
|
||
end }}{{ end }}>AVIF</option>
|
||
<option value="webp" {{ if .IsEdit }}{{ if eq .Product.Format "webp" }}selected{{
|
||
end }}{{ end }}>WebP</option>
|
||
<option value="jpg" {{ if .IsEdit }}{{ if eq .Product.Format "jpg" }}selected{{ end
|
||
}}{{ end }}>JPG</option>
|
||
<option value="png" {{ if .IsEdit }}{{ if eq .Product.Format "png" }}selected{{ end
|
||
}}{{ end }}>PNG</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex gap-2">
|
||
<button type="submit" class="btn btn-primary">{{ if .IsEdit }}Güncelle{{ else }}Oluştur{{
|
||
end }}</button>
|
||
<a href="/admin/content/products" class="btn btn-outline-secondary"
|
||
hx-get="/admin/content/products" hx-target="#main-content" hx-push-url="true">İptal</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card shadow-sm mb-3">
|
||
<div class="card-body">
|
||
<h6>Mevcut Ana Görsel</h6>
|
||
{{ if .IsEdit }}
|
||
{{ if .FirstImage }}
|
||
<div class="mb-2">
|
||
<img src="{{ .FirstImage }}" class="img-fluid rounded" alt="Mevcut Görsel">
|
||
</div>
|
||
{{ else }}
|
||
<div class="text-muted small">Henüz görsel yüklenmedi.</div>
|
||
{{ end }}
|
||
{{ else }}
|
||
<div class="text-muted small">Yeni ürün için henüz görsel yok.</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<h6>Bilgi</h6>
|
||
<p class="small text-muted mb-0">Ürün eklerken Kategori ve Etiket seçimi yapabilirsiniz.
|
||
Seçeneklerin dolu olması için ilgili menülerden kategori ve etiket verisi girmeyi unutmayın.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const fileInput = document.querySelector('input[name="image"]');
|
||
const preview = document.getElementById('imagePreview');
|
||
// show existing image if provided by controller but not rendered inline above
|
||
const firstImage = '{{ .FirstImage }}';
|
||
if (firstImage && firstImage !== '') {
|
||
preview.src = firstImage;
|
||
preview.style.display = 'block';
|
||
}
|
||
if (fileInput) {
|
||
fileInput.addEventListener('change', function (e) {
|
||
const f = this.files && this.files[0];
|
||
if (!f) return;
|
||
const reader = new FileReader();
|
||
reader.onload = function (ev) {
|
||
preview.src = ev.target.result;
|
||
preview.style.display = 'block';
|
||
}
|
||
reader.readAsDataURL(f);
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Quill: load local CSS and JS; initialize editor and sync to textarea on submit -->
|
||
<link href="/assets/quill/dist/quill.snow.css" rel="stylesheet">
|
||
<script src="/assets/quill/dist/quill.js"></script>
|
||
<script>
|
||
(function initQuill() {
|
||
try {
|
||
var textarea = document.getElementById('contentInput');
|
||
var editorContainer = document.getElementById('quillEditor');
|
||
if (!editorContainer) return;
|
||
if (editorContainer.__quillInitialized) return;
|
||
var quill = new Quill(editorContainer, {
|
||
theme: 'snow',
|
||
modules: {
|
||
toolbar: {
|
||
container: [['bold', 'italic', 'underline'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['link', 'image'], ['code-block'], ['clean']],
|
||
handlers: {
|
||
image: function () {
|
||
try { window.showImageModal(quill); } catch (e) { console.error('open image modal failed', e); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
editorContainer.__quillInitialized = true;
|
||
if (textarea && textarea.value && textarea.value.trim() !== '') {
|
||
quill.clipboard.dangerouslyPasteHTML(textarea.value);
|
||
}
|
||
var form = textarea && textarea.form;
|
||
if (form) {
|
||
form.addEventListener('submit', function (e) {
|
||
textarea.value = quill.root.innerHTML;
|
||
});
|
||
}
|
||
} catch (err) {
|
||
console.error('Quill init error:', err);
|
||
}
|
||
})();
|
||
</script> |