System updated with many bug revised
This commit is contained in:
+69
-11
@@ -183,7 +183,9 @@
|
||||
min-height: 76px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
@@ -211,15 +213,37 @@
|
||||
box-shadow: 0 20px 44px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.project-card.empty-project-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
cursor: default;
|
||||
color: var(--text-muted);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.project-card.empty-project-card:hover {
|
||||
transform: none;
|
||||
border-color: var(--border);
|
||||
box-shadow: 0 16px 34px var(--shadow);
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
font-family: 'IBM Plex Mono', Consolas, monospace;
|
||||
font-size: 0.76rem;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.project-details {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
min-width: 0;
|
||||
@@ -229,7 +253,6 @@
|
||||
}
|
||||
|
||||
.delete-project-btn {
|
||||
margin-left: 14px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.45);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #fecaca;
|
||||
@@ -345,6 +368,21 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.modal-field label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.modal-panel input,
|
||||
.modal-panel select {
|
||||
width: 100%;
|
||||
background: var(--panel-soft);
|
||||
@@ -354,8 +392,10 @@
|
||||
padding: 11px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-panel input:focus,
|
||||
.modal-panel select:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.12);
|
||||
@@ -418,13 +458,19 @@
|
||||
|
||||
.project-card {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: 30px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
margin-left: 45px;
|
||||
width: calc(100% - 45px);
|
||||
grid-column: 2 / 4;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete-project-btn {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -462,8 +508,15 @@
|
||||
|
||||
<div class="modal-backdrop" id="technology-modal">
|
||||
<div class="modal-panel">
|
||||
<h3>Select Technology</h3>
|
||||
<select id="technology-select"></select>
|
||||
<h3>Create Project</h3>
|
||||
<div class="modal-field">
|
||||
<label for="project-name-input">Project Name</label>
|
||||
<input id="project-name-input" type="text" value="mxpic_project_1" autocomplete="off" />
|
||||
</div>
|
||||
<div class="modal-field">
|
||||
<label for="technology-select">Technology</label>
|
||||
<select id="technology-select"></select>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="secondary-btn" type="button" id="cancel-project">Cancel</button>
|
||||
<button class="new-project-btn" type="button" id="create-project">Create Project</button>
|
||||
@@ -476,6 +529,7 @@
|
||||
const newProjectForm = document.getElementById('new-project-form');
|
||||
const technologyModal = document.getElementById('technology-modal');
|
||||
const technologySelect = document.getElementById('technology-select');
|
||||
const projectNameInput = document.getElementById('project-name-input');
|
||||
const createProjectButton = document.getElementById('create-project');
|
||||
const cancelProjectButton = document.getElementById('cancel-project');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
@@ -512,7 +566,7 @@
|
||||
|
||||
if (!data.projects || data.projects.length === 0) {
|
||||
const empty = document.createElement('li');
|
||||
empty.className = 'project-card';
|
||||
empty.className = 'project-card empty-project-card';
|
||||
empty.textContent = 'No projects yet. Create a new PIC layout to begin.';
|
||||
projectList.appendChild(empty);
|
||||
return;
|
||||
@@ -555,13 +609,16 @@
|
||||
projectList.appendChild(item);
|
||||
});
|
||||
} catch (error) {
|
||||
projectList.innerHTML = '<li class="project-card">Failed to load projects.</li>';
|
||||
projectList.innerHTML = '<li class="project-card empty-project-card">Failed to load projects.</li>';
|
||||
}
|
||||
}
|
||||
|
||||
newProjectForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
projectNameInput.value = 'mxpic_project_1';
|
||||
technologyModal.classList.add('open');
|
||||
projectNameInput.focus();
|
||||
projectNameInput.select();
|
||||
});
|
||||
|
||||
cancelProjectButton.addEventListener('click', () => {
|
||||
@@ -570,10 +627,11 @@
|
||||
|
||||
createProjectButton.addEventListener('click', async () => {
|
||||
const selectedTechnology = technologySelect.value;
|
||||
const requestedName = projectNameInput.value.trim() || 'mxpic_project_1';
|
||||
const response = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: 'mxpic_project_1', technology: selectedTechnology })
|
||||
body: JSON.stringify({ name: requestedName, technology: selectedTechnology })
|
||||
});
|
||||
const project = await response.json();
|
||||
addLog(`Created project "${project.name}" with technology "${selectedTechnology}".`);
|
||||
|
||||
Reference in New Issue
Block a user