Divide a interface Minha Turma em abas separando a configuração da sala e equipe dos alunos
This commit is contained in:
+66
-32
@@ -528,18 +528,74 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: row; gap: 16px; flex: 1; min-height: 500px;">
|
||||
<!-- Lado Esquerdo: Lista de Crianças -->
|
||||
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||||
<h4 style="margin: 0; color: var(--text-primary);">Lista de Crianças</h4>
|
||||
<button id="btnCreateChild" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Nova Criança</button>
|
||||
<div style="display: flex; border-bottom: 1px solid var(--border-light); padding: 0 16px;">
|
||||
<button id="tabTurmaConfig" class="btn-music-option active" style="border-radius: 0; border: none; border-bottom: 2px solid var(--brand-green); padding: 12px 16px; font-weight: 600; color: var(--brand-green); background: transparent;">🏫 Dados da Turma</button>
|
||||
<button id="tabTurmaAlunos" class="btn-music-option" style="border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: 12px 16px; font-weight: 500; color: var(--text-secondary); background: transparent;">👧👦 Crianças da Turma</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 500px;">
|
||||
|
||||
<!-- SECÃO 1: CONFIGURAÇÕES DA TURMA -->
|
||||
<div id="turmaConfigSection" style="display: flex; flex-direction: column; gap: 16px; flex: 1; width: 100%; overflow-y: auto; padding-right: 8px;">
|
||||
<h4 style="margin: 0; color: var(--text-primary);">Configurações e Equipe da Turma</h4>
|
||||
<p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);">Defina as informações gerais da turma. Estas informações valem para todos os alunos e serão usadas nos relatórios.</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||||
<div class="settings-group">
|
||||
<label>Nome da Turma</label>
|
||||
<input type="text" id="configTurmaNome" placeholder="Ex: Berçário 2" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label>Sala</label>
|
||||
<input type="text" id="configTurmaSala" placeholder="Ex: Sala 4" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label>Período</label>
|
||||
<select id="configTurmaPeriodo" class="obs-select" style="width: 100%;">
|
||||
<option value="Integral">Integral</option>
|
||||
<option value="Matutino">Matutino</option>
|
||||
<option value="Vespertino">Vespertino</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="childrenList" style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<!-- Carregado via JS -->
|
||||
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando turma...</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--border-light); padding-top: 16px;">
|
||||
<div class="settings-group">
|
||||
<label>Professora Titular</label>
|
||||
<input type="text" id="configTurmaProfTitular" placeholder="Sua Titulação e Nome" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label>Professora Auxiliar 1</label>
|
||||
<input type="text" id="configTurmaProfAux1" placeholder="Nome da Prof. Auxiliar" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label>Professora Auxiliar 2</label>
|
||||
<input type="text" id="configTurmaProfAux2" placeholder="Nome da Prof. Auxiliar (Opcional)" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label>Cuidadora</label>
|
||||
<input type="text" id="configTurmaCuidadora" placeholder="Nome da Cuidadora (Opcional)" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: auto;">
|
||||
<button id="btnSaveTurmaConfig" style="background: var(--brand-green); border: none; color: white; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.95rem;">Salvar Dados da Turma</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECÃO 2: ALUNOS DA TURMA -->
|
||||
<div id="turmaAlunosSection" style="display: none; flex-direction: row; gap: 16px; flex: 1; height: 100%; overflow: hidden;">
|
||||
<!-- Lado Esquerdo: Lista de Crianças -->
|
||||
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; height: 100%;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||||
<h4 style="margin: 0; color: var(--text-primary);">Lista de Crianças</h4>
|
||||
<button id="btnCreateChild" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Nova Criança</button>
|
||||
</div>
|
||||
<div id="childrenList" style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<!-- Carregado via JS -->
|
||||
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando turma...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lado Direito: Formulário de Cadastro/Edição -->
|
||||
<div id="childFormContainer" style="flex: 1.5; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
|
||||
@@ -550,29 +606,6 @@
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" id="childFormId">
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
||||
<div class="settings-group" style="gap: 4px;">
|
||||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Turma</label>
|
||||
<input type="text" id="childFormTurma" placeholder="Ex: Berçário 2" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group" style="gap: 4px;">
|
||||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Sala</label>
|
||||
<input type="text" id="childFormSala" placeholder="Ex: Sala 4" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
<div class="settings-group" style="gap: 4px;">
|
||||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Período</label>
|
||||
<select id="childFormPeriodo" class="obs-select" style="width: 100%;">
|
||||
<option value="Integral">Integral</option>
|
||||
<option value="Matutino">Matutino</option>
|
||||
<option value="Vespertino">Vespertino</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group" style="gap: 4px;">
|
||||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Prof. Auxiliares / Funções</label>
|
||||
<input type="text" id="childFormAuxiliares" placeholder="Ex: Maria (Apoio)" class="obs-input" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-group" style="gap: 4px;">
|
||||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome Completo da Criança</label>
|
||||
@@ -617,6 +650,7 @@
|
||||
<button id="btnSaveChild" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem;">Salvar Criança</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- Fim de turmaAlunosSection -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user