admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adicionado CRUD Minha Turma e Observações Especiais

Browse Source
This commit is contained in:
admtracksteel
2026-06-06 15:27:54 +00:00
parent 3781c848da
commit a516989016
2 changed files with 427 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+125 -1
View File
@@ -82,6 +82,26 @@
</svg>
<span>Minhas Observações</span>
</button>
<!-- Botão: Obs. Especiais -->
<button class="btn-observacoes" id="btnObsEspeciais" style="border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.05);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
</svg>
<span>Obs. Educação Especial</span>
</button>
</div>
<!-- Divisor -->
<div class="sidebar-divider"></div>
<!-- Seção: Minha Turma -->
<div class="sidebar-actions-turma" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
<button class="btn-observacoes" id="btnMinhaTurma" style="border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.05);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
<span>Minha Turma</span>
</button>
</div>
<!-- Divisor -->
@@ -461,7 +481,7 @@
<div id="obsModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content obs-modal-content">
<div class="settings-modal-header">
<h3>📒 Minhas Observações</h3>
<h3 id="obsModalTitle">📒 Minhas Observações</h3>
<button id="btnCloseObsModal" class="btn-close-modal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
@@ -494,6 +514,110 @@
</div>
</div>
<!-- Modal: Minha Turma -->
<div id="minhaTurmaModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
<div class="settings-modal-header">
<h3>🧑‍🤝‍🧑 Minha Turma</h3>
<button id="btnCloseMinhaTurmaModal" class="btn-close-modal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</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>
<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;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
<h4 id="childFormTitle" style="margin: 0; color: var(--text-primary);">Cadastrar Criança</h4>
<button id="btnVoiceRecordChild" style="background: rgba(16, 163, 127, 0.1); border: 1px solid var(--brand-green); color: var(--brand-green); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px;">
🎤 Preencher com Voz
</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>
<input type="text" id="childFormNome" placeholder="Ex: João da Silva" class="obs-input" style="width: 100%;">
</div>
<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;">Apelido (Opcional)</label>
<input type="text" id="childFormApelido" placeholder="Ex: Joãozinho" 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;">Data de Nascimento</label>
<input type="date" id="childFormDataNasc" 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;">Educação Especial?</label>
<div style="display: flex; gap: 10px; align-items: center; margin-top: 4px;">
<label style="display: flex; align-items: center; gap: 4px; color: var(--text-primary); cursor: pointer;"><input type="checkbox" id="childFormEspecial" style="cursor: pointer;"> Sim (Marcar se for Educação Especial)</label>
</div>
</div>
<div class="settings-group" style="gap: 4px;" id="divEspecialDetalhes" style="display:none;">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Diagnóstico / Observações da Educação Especial</label>
<input type="text" id="childFormEspecialDetalhes" placeholder="Ex: TEA, TDAH..." 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;">Nome dos Pais (Opcional)</label>
<input type="text" id="childFormPais" placeholder="Ex: Pedro e Ana" 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;">Autorizados a buscar (Máx 3: Nome e Parentesco)</label>
<textarea id="childFormAutorizados" placeholder="1. Carlos (Avô)&#10;2. Maria (Tia)&#10;3. ..." class="obs-input" style="width: 100%; min-height: 70px; resize: vertical;"></textarea>
</div>
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: auto;">
<button id="btnCancelChild" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;">Cancelar</button>
<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>
</div>
</div>
<!-- Modal: Modelos de Relatório (CRUD Templates) -->
<div id="modelosRelatorioModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">