kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Adding config bool for userhall image upload

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-11 05:59:37 +02:00
parent 1f4cbfcec7
commit 9d4d3fbdcb
7 changed files with 101 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
views/user-halls-partial.html
View File

@@ -16,7 +16,7 @@
</style>
<div class="container" style="padding-top: 20px;">
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;">
<h3 style="margin:0;">{{ t('hall.user_halls_title', { user: ownerUser.user }) }}</h3>
<h3 style="margin:0;">{{ t('hall.user_halls_title').replace('{user}', ownerUser.user) }}</h3>
@if(isOwner || (session && session.admin))
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
<input type="text" id="uh-new-name" placeholder="{{ t('hall.new_hall_placeholder') }}" style="flex:1;min-width:180px;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:0 10px;height:28px;border-radius:3px;font-family:var(--font);font-size:0.9em;">
@@ -25,6 +25,13 @@
</div>
@endif
</div>
<div id="uh-config" style="display:none;"
data-is-admin="{{ (session && session.admin) ? 'true' : 'false' }}"
data-owner-id="{{ ownerUser.id }}"
data-owner-user="{{ ownerUser.user }}"
data-is-owner="{{ isOwner ? 'true' : 'false' }}"
data-enable-upload="{{ enable_userhall_image_upload ? 'true' : 'false' }}"
data-i18n-hall-posts="{{ t('hall.posts') }}"></div>
<div id="hall-manager-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px;">
@include(user-hall-cards)
@@ -50,7 +57,7 @@
@if(isOwner || (session && session.admin))
<script>
(function() {
var csrf = (window.f0ckSession && window.f0ckSession.csrf_token) || '';
function getCsrf() { return (window.f0ckSession && window.f0ckSession.csrf_token) || ''; }
var i18n = window.f0ckI18n || {};
var grid = document.getElementById('hall-manager-grid');
@@ -59,25 +66,30 @@
}
// ── Create Hall ─────────────────────────────────────────────────────────────
var newNameInput = document.getElementById('uh-new-name');
var createStatus = document.getElementById('uh-create-status');
var isAdmin = @if(session && session.admin) true @else false @endif;
var ownerUserId = '{{ ownerUser.id }}';
var isOwner = @if(isOwner) true @else false @endif;
// ── Config from data attributes ────────────────────────────────────────────
var cfgEl = document.getElementById('uh-config');
var isAdmin = cfgEl.dataset.isAdmin === 'true';
var ownerUserId = cfgEl.dataset.ownerId;
var ownerUser = cfgEl.dataset.ownerUser;
var isOwner = cfgEl.dataset.isOwner === 'true';
var enableUpload = cfgEl.dataset.enableUpload === 'true';
var i18n_posts = cfgEl.dataset.i18nHallPosts;
// If admin is managing another user, append user_id query param
var qs = (isAdmin && !isOwner) ? '?user_id=' + ownerUserId : '';
var newNameInput = document.getElementById('uh-new-name');
var createStatus = document.getElementById('uh-create-status');
async function createHall() {
var name = newNameInput.value.trim();
if (!name) { createStatus.textContent = "{{ t('hall.enter_name_error') }}"; createStatus.style.color = '#f55'; return; }
if (!name) { createStatus.textContent = i18n.hall_enter_name_error || "Name is required"; createStatus.style.color = '#f55'; return; }
var slug = toSlug(name);
createStatus.textContent = i18n.hall_creating || "{{ t('hall.creating') }}"; createStatus.style.color = '#888';
createStatus.textContent = i18n.hall_creating || "Creating…"; createStatus.style.color = '#888';
try {
var r = await fetch('/api/v2/me/halls' + qs, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf },
headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrf() },
body: JSON.stringify({ name: name, slug: slug })
});
var d = await r.json();
@@ -104,30 +116,33 @@
div.className = 'hall-manager-card';
div.id = 'uh-card-' + slug;
div.dataset.slug = slug;
var ownerUser = '{{ ownerUser.user }}';
var ownerUserId = '{{ ownerUser.id }}';
div.dataset.ownerId = ownerUserId;
div.innerHTML =
'<div class="hall-manager-image" style="position:relative;height:140px;overflow:hidden;background:#111;cursor:pointer;" title="{{ t('hall.click_upload_hint') }}">' +
var imgHtml =
'<div class="hall-manager-image" style="position:relative;height:140px;overflow:hidden;background:#111;cursor:pointer;" title="' + (enableUpload ? (i18n.hall_click_upload_hint || 'Click to upload custom image') : (i18n.hall_view || 'View hall')) + '">' +
'<img src="/user_hall_image/' + ownerUserId + '/' + slug + '" alt="' + name + '" style="width:100%;height:100%;object-fit:cover;opacity:0.8;">' +
'<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.05em;text-shadow:0 0 10px rgba(0,0,0,0.9),0 1px 3px rgba(0,0,0,0.8);pointer-events:none;">' + name + '</span>' +
'<input type="file" class="uh-img-upload" accept="image/*" style="display:none;">' +
'</div>' +
'<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.05em;text-shadow:0 0 10px rgba(0,0,0,0.9),0 1px 3px rgba(0,0,0,0.8);pointer-events:none;">' + name + '</span>';
if (enableUpload) {
imgHtml += '<input type="file" class="uh-img-upload" accept="image/*" style="display:none;">';
}
imgHtml += '</div>';
div.innerHTML = imgHtml +
'<div style="padding:12px;">' +
'<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">{{ t('common.name') }}</label>' +
'<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.common_name || 'Name') + '</label>' +
'<input type="text" class="uh-name-input" value="' + name + '" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);"></div>' +
'<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">{{ t('common.description') }}</label>' +
'<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.common_description || 'Description') + '</label>' +
'<textarea class="uh-desc-input" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);resize:vertical;min-height:50px;"></textarea></div>' +
'<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:4px;">' +
'<label style="display:flex;align-items:center;gap:5px;cursor:pointer;color:#aaa;font-size:0.85em;"><input type="checkbox" class="uh-private-toggle"> {{ t('common.private') }}</label>' +
'<label style="display:flex;align-items:center;gap:5px;cursor:pointer;color:#aaa;font-size:0.85em;"><input type="checkbox" class="uh-private-toggle"> ' + (i18n.common_private || 'Private') + '</label>' +
'</div>' +
'<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">' +
'<button class="uh-btn-save hm-btn" style="background:var(--accent);color:#000;border:none;font-weight:bold;">{{ t('common.save') }}</button>' +
'<a href="/user/' + ownerUser + '/hall/' + slug + '" class="hm-btn" style="background:rgba(255,255,255,0.05);color:#aaa;border:1px solid rgba(255,255,255,0.1);">{{ t('common.view') }} →</a>' +
'<button class="uh-btn-save hm-btn" style="background:var(--accent);color:#000;border:none;font-weight:bold;">' + (i18n.common_save || 'Save') + '</button>' +
'<a href="/user/' + ownerUser + '/hall/' + slug + '" class="hm-btn" style="background:rgba(255,255,255,0.05);color:#aaa;border:1px solid rgba(255,255,255,0.1);">' + (i18n.common_view || 'View') + ' →</a>' +
'<span style="margin-left:4px;font-size:0.8em;color:#666;">' +
"{{ t('hall.posts') }}".replace('{count}', (hall && hall.total_items || 0)) +
i18n_posts.replace('{count}', (hall && hall.total_items || 0)) +
'</span>' +
'<button class="uh-btn-delete hm-btn" style="margin-left:auto;background:rgba(200,0,0,0.25);color:#f55;border:1px solid rgba(200,0,0,0.4);">🗑 {{ t('common.delete') }}</button>' +
'<button class="uh-btn-delete hm-btn" style="margin-left:auto;background:rgba(200,0,0,0.25);color:#f55;border:1px solid rgba(200,0,0,0.4);">🗑 ' + (i18n.common_delete || 'Delete') + '</button>' +
'</div>' +
'<div class="uh-card-status" style="margin-top:6px;font-size:0.8em;color:#888;min-height:1.2em;"></div>' +
'</div>';
@@ -157,12 +172,20 @@
nameInput.addEventListener('input', function() { nameOverlay.textContent = nameInput.value; });
}
// Click image → open file picker
if (imgContainer && fileInput) {
imgContainer.addEventListener('click', function(e) {
if (e.target.classList.contains('uh-btn-del-img')) return;
fileInput.click();
});
// Click image → open file picker or go to hall
if (imgContainer) {
if (enableUpload) {
imgContainer.title = i18n.hall_click_upload_hint || 'Click to upload custom image';
imgContainer.addEventListener('click', function(e) {
if (e.target.classList.contains('uh-btn-del-img')) return;
if (fileInput) fileInput.click();
});
} else {
imgContainer.title = i18n.hall_view || 'View hall';
imgContainer.addEventListener('click', function() {
window.location.href = '/user/' + ownerUser.toLowerCase() + '/hall/' + slug;
});
}
}
// Upload image
@@ -176,7 +199,7 @@
try {
var r = await fetch('/api/v2/me/halls/' + encodeURIComponent(slug) + '/image' + qs, {
method: 'POST',
headers: { 'x-csrf-token': csrf },
headers: { 'x-csrf-token': getCsrf() },
body: fd
});
var d = await r.json();
@@ -209,7 +232,7 @@
try {
var r = await fetch('/api/v2/me/halls/' + encodeURIComponent(slug) + '/image' + qs, {
method: 'DELETE',
headers: { 'x-csrf-token': csrf }
headers: { 'x-csrf-token': getCsrf() }
});
var d = await r.json();
if (d.success) {
@@ -228,7 +251,7 @@
privToggle.addEventListener('change', function() {
fetch('/api/v2/me/halls/' + encodeURIComponent(slug) + qs, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf },
headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrf() },
body: JSON.stringify({ is_private: privToggle.checked })
}).then(function(r) { return r.json(); }).then(function(d) {
if (d.success) setStatus(privToggle.checked ? '🔒 Private' : '🌐 Public', 'var(--accent)');
@@ -249,7 +272,7 @@
try {
var r = await fetch('/api/v2/me/halls/' + encodeURIComponent(slug) + qs, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf },
headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrf() },
body: JSON.stringify({ name: newName, description: newDesc || null, is_private: isPrivate })
});
var d = await r.json();
@@ -265,12 +288,12 @@
var delBtn = card.querySelector('.uh-btn-delete');
if (delBtn) {
delBtn.addEventListener('click', async function() {
if (!confirm("{{ t('hall.delete_confirm') }}")) return;
setStatus("{{ t('hall.deleting') }}");
if (!confirm(i18n.hall_delete_confirm || 'Are you sure you want to delete this hall?')) return;
setStatus(i18n.hall_deleting || 'Deleting…');
try {
var r = await fetch('/api/v2/me/halls/' + encodeURIComponent(slug) + qs, {
method: 'DELETE',
headers: { 'x-csrf-token': csrf }
headers: { 'x-csrf-token': getCsrf() }
});
var d = await r.json();
if (d.success) {