feat: add frame name input and uniqueness validation via gitea api
This commit is contained in:
+21
@@ -184,6 +184,12 @@
|
||||
<input type="file" id="file-input" name="background_image" accept="image/png" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="text-align: left; display: none;" id="frame-info">
|
||||
<label for="frame-name">Name des Rahmens (nur Kleinbuchstaben & Zahlen)</label>
|
||||
<input type="text" id="frame-name" name="frame_name" pattern="[a-z0-9_]+" placeholder="z.B. summer1" required>
|
||||
<div class="upload-hint" style="margin-top: 5px;">Wird gespeichert als: <strong style="color: var(--primary-color);">frame_<span id="frame-preview-name">...</span>.png</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="text-align: left; display: none;" id="customer-info">
|
||||
<label for="customer-email">Deine E-Mail Adresse (für Rückfragen)</label>
|
||||
<input type="email" id="customer-email" name="email" placeholder="mail@example.com" required>
|
||||
@@ -245,8 +251,17 @@
|
||||
const previewBox = document.getElementById('preview-box');
|
||||
const imagePreview = document.getElementById('image-preview');
|
||||
const submitBtn = document.getElementById('submit-btn');
|
||||
const frameInfo = document.getElementById('frame-info');
|
||||
const frameNameInput = document.getElementById('frame-name');
|
||||
const framePreviewName = document.getElementById('frame-preview-name');
|
||||
const customerInfo = document.getElementById('customer-info');
|
||||
|
||||
frameNameInput.addEventListener('input', (e) => {
|
||||
const val = e.target.value.trim().toLowerCase().replace(/[^a-z0-9_]/g, '');
|
||||
e.target.value = val;
|
||||
framePreviewName.textContent = val || '...';
|
||||
});
|
||||
|
||||
// Drag and Drop Effects
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropZone.addEventListener(eventName, preventDefaults, false);
|
||||
@@ -295,6 +310,7 @@
|
||||
validationBox.style.display = 'block';
|
||||
previewBox.style.display = 'none';
|
||||
submitBtn.style.display = 'none';
|
||||
frameInfo.style.display = 'none';
|
||||
customerInfo.style.display = 'none';
|
||||
|
||||
valFormat.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> Überprüfe Dateiformat...`;
|
||||
@@ -327,6 +343,7 @@
|
||||
// Show Preview and Submit Button
|
||||
imagePreview.src = e.target.result;
|
||||
previewBox.style.display = 'block';
|
||||
frameInfo.style.display = 'block';
|
||||
customerInfo.style.display = 'block';
|
||||
submitBtn.style.display = 'block';
|
||||
} else {
|
||||
@@ -364,8 +381,10 @@
|
||||
console.error('Server antwortete nicht mit gültigem JSON:', responseText);
|
||||
alert('Ein Server-Fehler ist aufgetreten (siehe Konsole). Das Bild wurde eventuell trotzdem hochgeladen.');
|
||||
form.reset();
|
||||
framePreviewName.textContent = '...';
|
||||
previewBox.style.display = 'none';
|
||||
submitBtn.style.display = 'none';
|
||||
frameInfo.style.display = 'none';
|
||||
customerInfo.style.display = 'none';
|
||||
validationBox.style.display = 'none';
|
||||
return;
|
||||
@@ -374,8 +393,10 @@
|
||||
if (response.ok) {
|
||||
alert('Erfolgreich hochgeladen!');
|
||||
form.reset();
|
||||
framePreviewName.textContent = '...';
|
||||
previewBox.style.display = 'none';
|
||||
submitBtn.style.display = 'none';
|
||||
frameInfo.style.display = 'none';
|
||||
customerInfo.style.display = 'none';
|
||||
validationBox.style.display = 'none';
|
||||
} else {
|
||||
|
||||
+41
-3
@@ -36,10 +36,48 @@ if ($mimeType !== 'image/png') {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Generate unique filename
|
||||
$filename = uniqid('frame_') . '_' . time() . '.png';
|
||||
$rawFrameName = isset($_POST['frame_name']) ? trim($_POST['frame_name']) : '';
|
||||
$frameName = preg_replace('/[^a-z0-9_]/', '', strtolower($rawFrameName));
|
||||
|
||||
if (empty($frameName)) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Ungültiger oder fehlender Frame-Name.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$filename = 'frame_' . $frameName . '.png';
|
||||
$destination = $uploadDir . $filename;
|
||||
|
||||
// Check local uniqueness (already uploaded via web)
|
||||
if (file_exists($destination)) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Ein Rahmen mit diesem Namen existiert bereits auf dem Server. Bitte wähle einen anderen.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Check Gitea uniqueness
|
||||
$giteaUrl = 'https://git.orfel.de/api/v1/repos/Jannik/Schnappix/contents/assets/frames';
|
||||
$chGitea = curl_init($giteaUrl);
|
||||
curl_setopt($chGitea, CURLOPT_RETURNTRANSFER, true);
|
||||
curl_setopt($chGitea, CURLOPT_TIMEOUT, 5);
|
||||
curl_setopt($chGitea, CURLOPT_HTTPHEADER, ['User-Agent: Schnappix-Web Backend']);
|
||||
$giteaResponse = curl_exec($chGitea);
|
||||
$giteaCode = curl_getinfo($chGitea, CURLINFO_HTTP_CODE);
|
||||
curl_close($chGitea);
|
||||
|
||||
if ($giteaCode === 200 && $giteaResponse) {
|
||||
$framesData = json_decode($giteaResponse, true);
|
||||
if (is_array($framesData)) {
|
||||
foreach ($framesData as $frameFile) {
|
||||
if (isset($frameFile['name']) && strtolower($frameFile['name']) === strtolower($filename)) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Ein Rahmen mit diesem Namen existiert bereits in der App. Bitte wähle einen anderen.']);
|
||||
exit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Move uploaded file
|
||||
if (move_uploaded_file($file['tmp_name'], $destination)) {
|
||||
// Build public URL
|
||||
@@ -50,7 +88,7 @@ if (move_uploaded_file($file['tmp_name'], $destination)) {
|
||||
|
||||
// Send notification to Ntfy
|
||||
$ntfyUrl = 'https://ntfy.orfel.de/Schnappix-Frame-Upload';
|
||||
$message = "Ein neuer Rahmen wurde hochgeladen!\n\nVon: $email\nBild-URL: $publicUrl";
|
||||
$message = "Ein neuer Rahmen wurde hochgeladen!\n\nName: $filename\nVon: $email\nBild-URL: $publicUrl";
|
||||
|
||||
$ch = curl_init($ntfyUrl);
|
||||
curl_setopt($ch, CURLOPT_POST, 1);
|
||||
|
||||
Reference in New Issue
Block a user