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.tailwindcss.com"></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;
|
||||
|
||||
|
||||
+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