refactor: move tab logic and implement Quill editor and GitHub commit integration in scratch_test.js
This commit is contained in:
Ümit Tunç
@@ -799,42 +799,7 @@
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
// Tab Switch Logic
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
||||||
const tabPanels = document.querySelectorAll('.tab-panel');
|
|
||||||
|
|
||||||
tabButtons.forEach(button => {
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
// Deactivate active tab
|
|
||||||
tabButtons.forEach(btn => {
|
|
||||||
btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
|
||||||
btn.classList.add('bg-transparent', 'border-transparent', 'text-slate-600');
|
|
||||||
btn.querySelector('.tab-icon').classList.remove('bg-blue-600', 'text-white');
|
|
||||||
btn.querySelector('.tab-icon').classList.add('bg-slate-50', 'text-slate-500');
|
|
||||||
btn.setAttribute('aria-selected', 'false');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hide active panels
|
|
||||||
tabPanels.forEach(panel => {
|
|
||||||
panel.classList.add('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Activate clicked tab
|
|
||||||
button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
|
||||||
button.classList.remove('bg-transparent', 'border-transparent', 'text-slate-600');
|
|
||||||
button.querySelector('.tab-icon').classList.add('bg-blue-600', 'text-white');
|
|
||||||
button.querySelector('.tab-icon').classList.remove('bg-slate-50', 'text-slate-500');
|
|
||||||
button.setAttribute('aria-selected', 'true');
|
|
||||||
|
|
||||||
// Show targets panel
|
|
||||||
const targetId = button.getAttribute('data-tab-target');
|
|
||||||
const targetPanel = document.getElementById(targetId + '-panel');
|
|
||||||
if (targetPanel) {
|
|
||||||
targetPanel.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let quill;
|
let quill;
|
||||||
|
|
||||||
|
|||||||
+383
@@ -0,0 +1,383 @@
|
|||||||
|
|
||||||
|
// Tab Switch Logic
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||||
|
const tabPanels = document.querySelectorAll('.tab-panel');
|
||||||
|
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
// Deactivate active tab
|
||||||
|
tabButtons.forEach(btn => {
|
||||||
|
btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||||
|
btn.classList.add('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||||
|
btn.querySelector('.tab-icon').classList.remove('bg-blue-600', 'text-white');
|
||||||
|
btn.querySelector('.tab-icon').classList.add('bg-slate-50', 'text-slate-500');
|
||||||
|
btn.setAttribute('aria-selected', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide active panels
|
||||||
|
tabPanels.forEach(panel => {
|
||||||
|
panel.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate clicked tab
|
||||||
|
button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||||
|
button.classList.remove('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||||
|
button.querySelector('.tab-icon').classList.add('bg-blue-600', 'text-white');
|
||||||
|
button.querySelector('.tab-icon').classList.remove('bg-slate-50', 'text-slate-500');
|
||||||
|
button.setAttribute('aria-selected', 'true');
|
||||||
|
|
||||||
|
// Show targets panel
|
||||||
|
const targetId = button.getAttribute('data-tab-target');
|
||||||
|
const targetPanel = document.getElementById(targetId + '-panel');
|
||||||
|
if (targetPanel) {
|
||||||
|
targetPanel.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let quill;
|
||||||
|
|
||||||
|
// Tab Switch Logic
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Initialize Quill editor
|
||||||
|
quill = new Quill('#editor-content-quill', {
|
||||||
|
theme: 'snow',
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
||||||
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||||
|
['clean'] // remove formatting button
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||||
|
const tabPanels = document.querySelectorAll('.tab-panel');
|
||||||
|
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
// Deactivate active tab
|
||||||
|
tabButtons.forEach(btn => {
|
||||||
|
btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||||
|
btn.classList.add('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||||
|
btn.querySelector('.tab-icon').classList.remove('bg-blue-600', 'text-white');
|
||||||
|
btn.querySelector('.tab-icon').classList.add('bg-slate-50', 'text-slate-500');
|
||||||
|
btn.setAttribute('aria-selected', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide active panels
|
||||||
|
tabPanels.forEach(panel => {
|
||||||
|
panel.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate clicked tab
|
||||||
|
button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||||
|
button.classList.remove('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||||
|
button.querySelector('.tab-icon').classList.add('bg-blue-600', 'text-white');
|
||||||
|
button.querySelector('.tab-icon').classList.remove('bg-slate-50', 'text-slate-500');
|
||||||
|
button.setAttribute('aria-selected', 'true');
|
||||||
|
|
||||||
|
// Show targets panel
|
||||||
|
const targetId = button.getAttribute('data-tab-target');
|
||||||
|
const targetPanel = document.getElementById(targetId + '-panel');
|
||||||
|
if (targetPanel) {
|
||||||
|
targetPanel.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle initial state of date logic
|
||||||
|
calculateEndDateFrontend();
|
||||||
|
|
||||||
|
// Fetch Github commits in memory if repo is set
|
||||||
|
fetchAllCommitsInMemory();
|
||||||
|
|
||||||
|
// Select first day of the notebook workspace on load
|
||||||
|
selectNotebookDay(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
const githubRepoUrl = "dummy";
|
||||||
|
let allGithubCommits = {};
|
||||||
|
let activeDayIdx = 0;
|
||||||
|
|
||||||
|
function fetchAllCommitsInMemory() {
|
||||||
|
if (!githubRepoUrl) return;
|
||||||
|
|
||||||
|
let repoClean = githubRepoUrl.replace(/https?:\/\/(www\.)?github\.com\//i, '');
|
||||||
|
repoClean = repoClean.replace(/\/$/, '');
|
||||||
|
const parts = repoClean.split('/');
|
||||||
|
if (parts.length < 2) return;
|
||||||
|
|
||||||
|
const owner = parts[0];
|
||||||
|
const repo = parts[1].replace(/\.git$/i, '');
|
||||||
|
|
||||||
|
fetch(`https://api.github.com/repos/${owner}/${repo}/commits?per_page=100`)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error('API Error');
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(commits => {
|
||||||
|
if (!Array.isArray(commits)) return;
|
||||||
|
commits.forEach(item => {
|
||||||
|
const dateStr = item.commit.author.date;
|
||||||
|
if (dateStr) {
|
||||||
|
const dateOnly = dateStr.substring(0, 10);
|
||||||
|
if (!allGithubCommits[dateOnly]) {
|
||||||
|
allGithubCommits[dateOnly] = [];
|
||||||
|
}
|
||||||
|
allGithubCommits[dateOnly].push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.warn('Commits could not be pre-loaded in memory.', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectNotebookDay(idx) {
|
||||||
|
const oldBtn = document.getElementById(`btn-day-${activeDayIdx}`);
|
||||||
|
if (oldBtn) {
|
||||||
|
oldBtn.classList.remove('border-blue-200', 'bg-blue-50/50');
|
||||||
|
oldBtn.classList.add('border-slate-100', 'bg-white');
|
||||||
|
const oldTitle = oldBtn.querySelector('span.text-xs');
|
||||||
|
if (oldTitle) {
|
||||||
|
oldTitle.classList.remove('text-blue-700');
|
||||||
|
oldTitle.classList.add('text-slate-800');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
activeDayIdx = idx;
|
||||||
|
const newBtn = document.getElementById(`btn-day-${idx}`);
|
||||||
|
if (newBtn) {
|
||||||
|
newBtn.classList.add('border-blue-200', 'bg-blue-50/50');
|
||||||
|
newBtn.classList.remove('border-slate-100', 'bg-white');
|
||||||
|
const newTitle = newBtn.querySelector('span.text-xs');
|
||||||
|
if (newTitle) {
|
||||||
|
newTitle.classList.add('text-blue-700');
|
||||||
|
newTitle.classList.remove('text-slate-800');
|
||||||
|
}
|
||||||
|
|
||||||
|
const dayNum = newBtn.getAttribute('data-day-num');
|
||||||
|
const dateVal = newBtn.getAttribute('data-date');
|
||||||
|
const dateFormatted = newBtn.getAttribute('data-formatted-date');
|
||||||
|
const savedContent = newBtn.getAttribute('data-saved-content');
|
||||||
|
|
||||||
|
document.getElementById('editor-day-title').textContent = `${dayNum}. Gün`;
|
||||||
|
document.getElementById('editor-day-date').textContent = dateFormatted;
|
||||||
|
|
||||||
|
quill.root.innerHTML = savedContent || '';
|
||||||
|
document.getElementById('save-status').textContent = '';
|
||||||
|
|
||||||
|
// Future validation
|
||||||
|
const dateParts = dateVal.split('-');
|
||||||
|
const selectedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0,0,0,0);
|
||||||
|
|
||||||
|
const isFuture = selectedDate > today;
|
||||||
|
const warningBlock = document.getElementById('future-warning');
|
||||||
|
const saveBtn = document.getElementById('save-btn');
|
||||||
|
const gitBtn = document.querySelector('button[onclick="fillFromGithub()"]');
|
||||||
|
|
||||||
|
if (isFuture) {
|
||||||
|
warningBlock.classList.remove('hidden');
|
||||||
|
quill.enable(false);
|
||||||
|
saveBtn.disabled = true;
|
||||||
|
saveBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||||
|
if (gitBtn) {
|
||||||
|
gitBtn.disabled = true;
|
||||||
|
gitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
warningBlock.classList.add('hidden');
|
||||||
|
quill.enable(true);
|
||||||
|
saveBtn.disabled = false;
|
||||||
|
saveBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||||
|
if (gitBtn) {
|
||||||
|
gitBtn.disabled = false;
|
||||||
|
gitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fillFromGithub() {
|
||||||
|
const btn = document.getElementById(`btn-day-${activeDayIdx}`);
|
||||||
|
if (!btn) return;
|
||||||
|
|
||||||
|
const dateVal = btn.getAttribute('data-date');
|
||||||
|
const dayCommits = allGithubCommits[dateVal] || [];
|
||||||
|
|
||||||
|
if (dayCommits.length === 0) {
|
||||||
|
alert("Bu staj gününe ait GitHub commit'i bulunamadı. Lütfen commit attığınızdan ve tarihin doğru olduğundan emin olun.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let commitHtml = "<ul>";
|
||||||
|
const sorted = [...dayCommits].reverse();
|
||||||
|
sorted.forEach(c => {
|
||||||
|
const msg = c.commit.message;
|
||||||
|
const sha = c.sha.substring(0, 7);
|
||||||
|
const authorDate = new Date(c.commit.author.date);
|
||||||
|
const time = authorDate.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
|
||||||
|
commitHtml += `<li><strong>[${time}]</strong> (<em>${sha}</em>) ${msg}</li>`;
|
||||||
|
});
|
||||||
|
commitHtml += "</ul>";
|
||||||
|
|
||||||
|
const currentHtml = quill.root.innerHTML.trim();
|
||||||
|
if (currentHtml !== "" && currentHtml !== "<p><br></p>") {
|
||||||
|
if (confirm("Mevcut rapor içeriğinizin sonuna bu günün commitlerini eklemek ister misiniz? (Hayır derseniz mevcut içerik silinip commitler yazılır.)")) {
|
||||||
|
quill.root.innerHTML = currentHtml + "<br><br>" + commitHtml;
|
||||||
|
} else {
|
||||||
|
quill.root.innerHTML = commitHtml;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
quill.root.innerHTML = commitHtml;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveActiveDay() {
|
||||||
|
const btn = document.getElementById(`btn-day-${activeDayIdx}`);
|
||||||
|
if (!btn) return;
|
||||||
|
|
||||||
|
const dayNum = btn.getAttribute('data-day-num');
|
||||||
|
const dateVal = btn.getAttribute('data-date');
|
||||||
|
let contentVal = quill.root.innerHTML;
|
||||||
|
if (contentVal === '<p><br></p>') {
|
||||||
|
contentVal = '';
|
||||||
|
}
|
||||||
|
const statusText = document.getElementById('save-status');
|
||||||
|
|
||||||
|
statusText.textContent = "Kaydediliyor...";
|
||||||
|
statusText.className = "text-xs font-semibold text-slate-400 animate-pulse";
|
||||||
|
|
||||||
|
fetch(""dummy"", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"X-CSRF-TOKEN": ""dummy""
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
day_number: dayNum,
|
||||||
|
date: dateVal,
|
||||||
|
content: contentVal
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
statusText.textContent = "Başarıyla kaydedildi.";
|
||||||
|
statusText.className = "text-xs font-semibold text-green-600";
|
||||||
|
|
||||||
|
btn.setAttribute('data-saved-content', contentVal);
|
||||||
|
|
||||||
|
const badge = document.getElementById(`badge-day-${activeDayIdx}`);
|
||||||
|
if (badge) {
|
||||||
|
if (contentVal.trim() !== '') {
|
||||||
|
badge.textContent = 'DOLU';
|
||||||
|
badge.className = "inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase bg-green-50 text-green-700 border border-green-200";
|
||||||
|
} else {
|
||||||
|
badge.textContent = 'BOŞ';
|
||||||
|
badge.className = "inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase bg-slate-50 text-slate-400 border border-slate-200";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
statusText.textContent = data.message || "Kaydedilemedi.";
|
||||||
|
statusText.className = "text-xs font-semibold text-red-600";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
statusText.textContent = "Bağlantı hatası oluştu.";
|
||||||
|
statusText.className = "text-xs font-semibold text-red-600";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openPrintModal() {
|
||||||
|
const modal = document.getElementById('print-modal');
|
||||||
|
const card = document.getElementById('print-modal-card');
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
setTimeout(() => {
|
||||||
|
card.classList.remove('scale-95', 'opacity-0');
|
||||||
|
card.classList.add('scale-100', 'opacity-100');
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closePrintModal() {
|
||||||
|
const modal = document.getElementById('print-modal');
|
||||||
|
const card = document.getElementById('print-modal-card');
|
||||||
|
card.classList.remove('scale-100', 'opacity-100');
|
||||||
|
card.classList.add('scale-95', 'opacity-0');
|
||||||
|
setTimeout(() => {
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileSelected(input) {
|
||||||
|
const fileNameElement = document.getElementById('selected-file-name');
|
||||||
|
const submitBtn = document.getElementById('submit-upload-btn');
|
||||||
|
if (input.files && input.files.length > 0) {
|
||||||
|
const file = input.files[0];
|
||||||
|
const fileSizeMB = file.size / (1024 * 1024);
|
||||||
|
if (fileSizeMB > 50) {
|
||||||
|
alert('Dosya boyutu 50MB\'ı aşamaz.');
|
||||||
|
input.value = '';
|
||||||
|
fileNameElement.textContent = '';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fileNameElement.textContent = 'Seçilen dosya: ' + file.name + ' (' + fileSizeMB.toFixed(2) + ' MB)';
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||||
|
} else {
|
||||||
|
fileNameElement.textContent = '';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateEndDateFrontend() {
|
||||||
|
const startDateVal = document.getElementById('internship_start_date').value;
|
||||||
|
const totalDaysVal = document.getElementById('internship_total_days').value;
|
||||||
|
const endDateInput = document.getElementById('internship_end_date');
|
||||||
|
|
||||||
|
if (!startDateVal || !totalDaysVal || totalDaysVal <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let date = new Date(startDateVal);
|
||||||
|
let daysToAdd = parseInt(totalDaysVal);
|
||||||
|
let count = 0;
|
||||||
|
let endDate = new Date(startDateVal);
|
||||||
|
|
||||||
|
while (count < daysToAdd) {
|
||||||
|
const dayOfWeek = date.getDay();
|
||||||
|
if (dayOfWeek === 6 || dayOfWeek === 0) { // 6 = Saturday, 0 = Sunday
|
||||||
|
date.setDate(date.getDate() + 1);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
endDate = new Date(date);
|
||||||
|
date.setDate(date.getDate() + 1);
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format to YYYY-MM-DD
|
||||||
|
const yyyy = endDate.getFullYear();
|
||||||
|
const mm = String(endDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const dd = String(endDate.getDate()).padStart(2, '0');
|
||||||
|
endDateInput.value = `${yyyy}-${mm}-${dd}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyToClipboard(elementId, btn) {
|
||||||
|
const text = document.getElementById(elementId).textContent;
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
const icon = btn.querySelector('i');
|
||||||
|
const originalClass = icon.className;
|
||||||
|
icon.className = 'uil uil-check text-green-500';
|
||||||
|
setTimeout(() => {
|
||||||
|
icon.className = originalClass;
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user