Files
team-tryouts/app/templates/pages/objective_form.html
T
cedrick2711 f468217745
CI - Security, Lint & Tests / validate (push) Failing after 1m13s
progression 50% pour evolution des joueurs
2026-09-05 11:30:13 -04:00

349 lines
22 KiB
HTML

{% extends "layouts/base.html" %}
{% block title %}{% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('New Objective') }}{% endif %} - UdeS team manager{% endblock %}
{% block page_title %}{% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('New Objective') }}{% endif %}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">{{ _('Home') }} / <a href="{{ url_for('objectives.list_objectives') }}">{{ _('Objectives') }}</a> / {% if edit_mode %}{{ _('Edit') }}{% else %}{{ _('New') }}{% endif %}</span>{% endblock %}
{% block content %}
<div class="objective-editor">
<div class="objective-editor-form">
<div class="card">
<div class="card-header"><h3><i class="fas fa-edit"></i> {% if edit_mode %}{{ _('Edit Objective') }}{% else %}{{ _('Create Objective') }}{% endif %}</h3></div>
<div class="card-body">
<form method="POST" action="{% if edit_mode %}{{ url_for('objectives.update_objective', objective_id=objective.id) }}{% else %}{{ url_for('objectives.create_objective') }}{% endif %}" class="form" id="objForm">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-section">
<h4><i class="fas fa-info-circle"></i> {{ _('1. General Information') }}</h4>
<div class="form-row">
<div class="form-group col-6">
<label for="obj_type">{{ _('Type') }}</label>
<select name="type" id="obj_type" class="form-select" onchange="updatePreview();toggleAssignment()">
{% for val, label in objective_types %}<option value="{{ val }}"{% if objective and objective.type == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
</select>
</div>
<div class="form-group col-6">
<label for="obj_status">{{ _('Status') }}</label>
<select name="status" id="obj_status" class="form-select" onchange="updatePreview()">
{% for val, label in objective_statuses %}<option value="{{ val }}"{% if objective and objective.status == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label for="obj_title">{{ _('Title') }} <span class="required">*</span></label>
<input type="text" name="title" id="obj_title" class="form-input" required value="{{ objective.title if objective else '' }}" placeholder="{{ _('e.g. Improve headshot accuracy') }}" oninput="updatePreview()">
</div>
<div class="form-group">
<label for="obj_description">{{ _('Description') }}</label>
<textarea name="description" id="obj_description" rows="3" class="form-textarea" placeholder="{{ _('Describe the objective...') }}" oninput="updatePreview()">{{ objective.description if objective else '' }}</textarea>
</div>
<div class="form-row">
<div class="form-group col-6" id="playerField">
<label for="obj_player_id">{{ _('Assigned to (Player)') }}</label>
<select name="player_id" id="obj_player_id" class="form-select" onchange="updatePreview()">
<option value="">{{ _('-- Select a player --') }}</option>
{% for p in players %}<option value="{{ p.id }}"{% if objective and objective.player_id == p.id %} selected{% endif %}>{{ p.username }}</option>{% endfor %}
</select>
</div>
<div class="form-group col-6" id="teamField">
<label for="obj_team_id">{{ _('Team') }}</label>
<select name="team_id" id="obj_team_id" class="form-select" onchange="updatePreview()">
<option value="">{{ _('-- Select a team --') }}</option>
{% for t in teams %}<option value="{{ t.id }}"{% if objective and objective.team_id == t.id %} selected{% endif %}>{{ t.name }}</option>{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="checkbox-label"><input type="checkbox" name="is_template" id="obj_is_template" value="1"{% if objective and objective.is_template %} checked{% endif %} onchange="updatePreview();toggleAssignment()"> {{ _('This is a template (reusable pattern)') }}</label>
</div>
</div>
<div class="form-section">
<h4><i class="fas fa-chart-line"></i> {{ _('2. KPI & Target') }}</h4>
<div class="form-row">
<div class="form-group col-4">
<label for="obj_kpi_metric">{{ _('KPI metric') }}</label>
<input type="text" name="kpi_metric" id="obj_kpi_metric" class="form-input" value="{{ objective.kpi_metric if objective else '' }}" placeholder="{{ _('e.g. HS rate, KDA, CS/min') }}" oninput="updatePreview()">
</div>
<div class="form-group col-4">
<label for="obj_kpi_target">{{ _('Target value') }}</label>
<input type="number" step="0.01" name="kpi_target" id="obj_kpi_target" class="form-input" value="{{ objective.kpi_target if objective else '' }}" placeholder="{{ _('e.g. 40') }}" oninput="updatePreview()">
</div>
<div class="form-group col-4">
<label for="obj_kpi_unit">{{ _('Unit') }}</label>
<input type="text" name="kpi_unit" id="obj_kpi_unit" class="form-input" value="{{ objective.kpi_unit if objective else '' }}" placeholder="{{ _('e.g. points, percentage') }}" oninput="updatePreview()">
</div>
</div>
</div>
<div class="form-section">
<h4><i class="fas fa-calendar-alt"></i> {{ _('3. Deadline & Priority') }}</h4>
<div class="form-row">
<div class="form-group col-4">
<label for="obj_start_date">{{ _('Start date') }}</label>
<input type="date" name="start_date" id="obj_start_date" class="form-input" value="{{ objective.start_date.strftime('%Y-%m-%d') if objective and objective.start_date else '' }}" onchange="updatePreview()">
</div>
<div class="form-group col-4">
<label for="obj_due_date">{{ _('Deadline') }} <span class="required">*</span></label>
<input type="date" name="due_date" id="obj_due_date" class="form-input" required value="{{ objective.due_date.strftime('%Y-%m-%d') if objective else '' }}" onchange="updatePreview()">
</div>
<div class="form-group col-4">
<label for="obj_priority">{{ _('Priority') }}</label>
<select name="priority" id="obj_priority" class="form-select" onchange="updatePreview()">
{% for val, label in objective_priorities %}<option value="{{ val }}"{% if objective and objective.priority == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
</select>
</div>
</div>
</div>
<div class="form-section">
<h4><i class="fas fa-bell"></i> {{ _('4. Tracking & Alerts') }}</h4>
<div class="form-row">
<div class="form-group col-6">
<label for="obj_check_frequency">{{ _('Check frequency') }}</label>
<select name="check_frequency" id="obj_check_frequency" class="form-select">
<option value="">{{ _('-- None --') }}</option>
{% for val, label in objective_frequencies %}<option value="{{ val }}"{% if objective and objective.check_frequency == val %} selected{% endif %}>{{ label }}</option>{% endfor %}
</select>
</div>
<div class="form-group col-6">
<label for="obj_progress">{{ _('Progress') }} (<span id="progressVal">{{ objective.progress if objective else 0 }}</span>%)</label>
<input type="range" id="obj_progress" name="progress" min="0" max="100" value="{{ objective.progress if objective else 0 }}" class="form-range" oninput="document.getElementById('progressVal').textContent=this.value;updatePreview()">
</div>
</div>
</div>
<div class="form-section">
<h4><i class="fas fa-cog"></i> {{ _('5. Advanced Settings') }}</h4>
<div class="form-group">
<label for="obj_category">{{ _('Category') }}</label>
<input type="text" name="category" id="obj_category" class="form-input" value="{{ objective.category if objective else '' }}" placeholder="{{ _('e.g. Mechanics, Teamplay, Communication') }}">
</div>
<div class="form-group">
<label for="obj_tags">{{ _('Tags') }}</label>
<input type="text" name="tags" id="obj_tags" class="form-input" value="{{ objective.tags if objective else '' }}" placeholder="{{ _('Separate with commas') }}">
</div>
</div>
<div class="form-actions">
<a href="{{ url_for('objectives.list_objectives') }}" class="btn btn-secondary">{{ _('Cancel') }}</a>
<button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {% if edit_mode %}{{ _('Update') }}{% else %}{{ _('Create') }}{% endif %}</button>
</div>
</form>
</div>
</div>
</div>
<div class="objective-editor-preview">
<div class="card mb-4" id="previewCard">
<div class="card-header"><h3><i class="fas fa-eye"></i> {{ _('Player Preview') }}</h3></div>
<div class="card-body">
<div id="previewContent">
<h4 id="previewTitle">{{ objective.title if objective else _('Objective title') }}</h4>
<p id="previewDesc" class="text-muted small">{{ objective.description if objective else '' }}</p>
<div class="objective-tags" id="previewTags">{% if objective and objective.tags %}{% for tag in objective.tags.split(',') %}<span class="badge badge-light">{{ tag.strip() }}</span>{% endfor %}{% endif %}</div>
<div class="preview-stats">
<div class="preview-stat"><span class="preview-label">{{ _('Assigned to') }}</span><span id="previewAssignee" class="preview-value">{% if objective and objective.player %}{{ objective.player.username }}{% else %}-{% endif %}</span></div>
<div class="preview-stat"><span class="preview-label">{{ _('KPI') }}</span><span id="previewKpi" class="preview-value">{% if objective and objective.kpi_metric %}{{ objective.kpi_metric }}: {{ objective.kpi_target }}{{ objective.kpi_unit }}{% else %}-{% endif %}</span></div>
<div class="preview-stat"><span class="preview-label">{{ _('Deadline') }}</span><span id="previewDeadline" class="preview-value">{% if objective and objective.due_date %}{{ objective.due_date.strftime('%Y-%m-%d') }}{% endif %}</span></div>
</div>
<div class="progress-section">
<span class="preview-label">{{ _('Progress') }}</span>
<div class="progress-bar-container" style="width:100%"><div class="progress-bar" id="previewBar" style="width:{{ objective.progress if objective else 0 }}%"></div></div>
<strong><span id="previewProgress">{{ objective.progress if objective else 0 }}</span>%</strong>
</div>
</div>
<div class="mt-3">
<span id="previewStatusBadge" class="badge">{% if objective %}{% for val, label in objective_statuses %}{% if val == objective.status %}{{ label }}{% endif %}{% endfor %}{% else %}{{ _('Active') }}{% endif %}</span>
<span id="previewPriorityBadge" class="badge">{% if objective %}{{ {'high':_('High'),'medium':_('Medium'),'low':_('Low')}.get(objective.priority,objective.priority) }}{% else %}{{ _('Medium') }}{% endif %}</span>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header"><h3><i class="fas fa-chart-line"></i> {{ _('KPI Progression') }}</h3></div>
<div class="card-body">
<svg id="progressChart" viewBox="0 0 400 200" style="width:100%;height:auto;" xmlns="http://www.w3.org/2000/svg"></svg>
{% if edit_mode and objective.kpi_target %}
<div class="mt-2 text-center" id="predictionInfo"></div>
{% endif %}
</div>
</div>
{% if edit_mode %}
<div class="card mb-4">
<div class="card-header"><h3><i class="fas fa-database"></i> {{ _('KPI Measurements') }}</h3></div>
<div class="card-body">
<form method="POST" action="{{ url_for('objectives.add_entry', objective_id=objective.id) }}" class="form-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group" style="flex:1;">
<input type="number" step="0.01" name="value" class="form-input" placeholder="{{ _('Value') }}" required>
</div>
<div class="form-group" style="flex:2;">
<input type="text" name="note" class="form-input" placeholder="{{ _('Note (optional)') }}">
</div>
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i> {{ _('Record') }}</button>
</form>
{% if entries %}
<table class="table mt-2">
<thead><tr><th>{{ _('Date') }}</th><th>{{ _('Value') }}</th><th>{{ _('Note') }}</th></tr></thead>
<tbody>
{% for e in entries %}
<tr><td>{{ e.recorded_at.strftime('%Y-%m-%d %H:%M') }}</td><td><strong>{{ e.value }}</strong></td><td class="text-muted small">{{ e.note or '' }}</td></tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
<div class="card mb-4">
<div class="card-header"><h3><i class="fas fa-comments"></i> {{ _('Comments') }}</h3></div>
<div class="card-body">
<form method="POST" action="{{ url_for('objectives.add_comment', objective_id=objective.id) }}" class="form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group">
<textarea name="content" rows="2" class="form-textarea" placeholder="{{ _('Add a comment...') }}" required></textarea>
</div>
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-paper-plane"></i> {{ _('Comment') }}</button>
</form>
{% if comments %}
<div class="comments-list mt-2">
{% for c in comments %}
<div class="comment-item">
<strong>{{ c.coach.username }}</strong> <span class="text-muted small">{{ c.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
<p>{{ c.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if personal_notes or team_notes %}
<div class="card mb-4">
<div class="card-header"><h3><i class="fas fa-sticky-note"></i> {{ _('Related Notes') }}</h3></div>
<div class="card-body">
{% if personal_notes %}
<h5>{{ _('Player Notes') }}</h5>
{% for n in personal_notes %}
<div class="comment-item">
<strong>{{ n.coach.username }}</strong> <span class="text-muted small">{{ n.created_at.strftime('%Y-%m-%d') }}</span>
<p>{{ n.content[:200] }}</p>
</div>
{% endfor %}
{% endif %}
{% if team_notes %}
<h5 class="mt-2">{{ _('Team Notes') }}</h5>
{% for n in team_notes %}
<div class="comment-item">
<strong>{{ n.coach.username }}</strong> <span class="text-muted small">{{ n.created_at.strftime('%Y-%m-%d') }}</span>
<p>{{ n.content[:200] }}</p>
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
{% if templates %}
<div class="card">
<div class="card-header"><h3><i class="fas fa-copy"></i> {{ _('Templates') }}</h3></div>
<div class="card-body" id="templatesList">
{% for t in templates %}
<div class="template-item">
<h5>{{ t.title }}</h5>
<p class="text-muted small">{{ t.description[:120] if t.description else '' }}</p>
<button type="button" class="btn btn-sm btn-outline-primary use-template-btn" onclick="applyTemplate({{ t.id }})"><i class="fas fa-arrow-right"></i> {{ _('Use this template') }}</button>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
var templateDataUrl = '{{ url_for("objectives.objective_data", objective_id=0) }}';
var templates = {};
{% for t in templates %}
(function(id) {
fetch(templateDataUrl.replace('/0/', '/' + id + '/')).then(function(r) { return r.json(); }).then(function(d) { templates[id] = d; });
})({{ t.id }});
{% endfor %}
function toggleAssignment() {
var t = document.getElementById('obj_type').value;
var isTmpl = document.getElementById('obj_is_template').checked;
var pf = document.getElementById('playerField');
var tf = document.getElementById('teamField');
if (isTmpl) { pf.style.display = 'none'; tf.style.display = 'none'; return; }
pf.style.display = t === 'team' ? 'none' : '';
tf.style.display = t === 'individual' ? 'none' : '';
}
function applyTemplate(id) {
var t = templates[id]; if (!t) return;
document.getElementById('obj_title').value = t.title || '';
document.getElementById('obj_description').value = t.description || '';
document.getElementById('obj_type').value = t.type || 'individual';
document.getElementById('obj_status').value = t.status || 'active';
document.getElementById('obj_priority').value = t.priority || 'medium';
document.getElementById('obj_kpi_metric').value = t.kpi_metric || '';
document.getElementById('obj_kpi_target').value = t.kpi_target || '';
document.getElementById('obj_kpi_unit').value = t.kpi_unit || '';
document.getElementById('obj_start_date').value = t.start_date || '';
document.getElementById('obj_due_date').value = '';
document.getElementById('obj_check_frequency').value = t.check_frequency || '';
document.getElementById('obj_category').value = t.category || '';
document.getElementById('obj_tags').value = t.tags || '';
document.getElementById('obj_progress').value = 0;
document.getElementById('progressVal').textContent = '0';
toggleAssignment(); updatePreview();
}
function updatePreview() {
var title = document.getElementById('obj_title').value || '';
var desc = document.getElementById('obj_description').value || '';
var status = document.getElementById('obj_status').value;
var priority = document.getElementById('obj_priority').value;
var kpiMetric = document.getElementById('obj_kpi_metric').value;
var kpiTarget = document.getElementById('obj_kpi_target').value;
var kpiUnit = document.getElementById('obj_kpi_unit').value;
var deadline = document.getElementById('obj_due_date').value;
var progress = document.getElementById('obj_progress').value;
var sel = document.getElementById('obj_player_id');
var playerName = sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : '-';
document.getElementById('previewTitle').textContent = title || '{{ _('Objective title') | e }}';
document.getElementById('previewDesc').textContent = desc;
document.getElementById('previewAssignee').textContent = playerName;
document.getElementById('previewKpi').textContent = kpiMetric ? kpiMetric + ': ' + kpiTarget + (kpiUnit || '') : '-';
document.getElementById('previewDeadline').textContent = deadline;
document.getElementById('previewBar').style.width = progress + '%';
document.getElementById('previewProgress').textContent = progress;
var sl = {}, sc = {'active':'badge-success','pending':'badge-warning','completed':'badge-info','overdue':'badge-danger'};
var pl = {}, pc = {'high':'badge-danger','medium':'badge-warning','low':'badge-secondary'};
{% for val, label in objective_statuses %}sl['{{ val }}'] = '{{ label | e }}';{% endfor %}
{% for val, label in objective_priorities %}pl['{{ val }}'] = '{{ label | e }}';{% endfor %}
document.getElementById('previewStatusBadge').textContent = sl[status] || status;
document.getElementById('previewStatusBadge').className = 'badge ' + (sc[status] || 'badge-secondary');
document.getElementById('previewPriorityBadge').textContent = pl[priority] || priority;
document.getElementById('previewPriorityBadge').className = 'badge ' + (pc[priority] || 'badge-secondary');
drawChart(progress, kpiTarget);
}
function drawChart(progress, target) {
var svg = document.getElementById('progressChart');
var w = 400, h = 200, pt = 20, pr = 20, pb = 30, pl = 40;
var cw = w - pl - pr, ch = h - pt - pb;
var prog = Math.min(parseInt(progress) || 0, 100);
var py = pt + ch * (1 - prog / 100);
var tgt = parseFloat(target) || 100;
var tgtScale = Math.max(tgt, prog);
var tgtNorm = tgt / (tgtScale);
var ty = pt + ch * (1 - tgtNorm);
var html = '<rect x="0" y="0" width="' + w + '" height="' + h + '" fill="transparent"/>';
html += '<line x1="' + pl + '" y1="' + (pt + ch) + '" x2="' + (pl + cw) + '" y2="' + (pt + ch) + '" stroke="#ddd" stroke-width="1"/>';
html += '<line x1="' + pl + '" y1="' + pt + '" x2="' + pl + '" y2="' + (pt + ch) + '" stroke="#ddd" stroke-width="1"/>';
html += '<text x="' + (pl - 30) + '" y="' + (pt + 5) + '" fill="#999" font-size="10">' + tgtScale + '</text>';
html += '<text x="' + (pl - 30) + '" y="' + (pt + ch / 2 + 4) + '" fill="#999" font-size="10">' + (tgtScale / 2).toFixed(1) + '</text>';
html += '<text x="' + (pl - 30) + '" y="' + (pt + ch + 4) + '" fill="#999" font-size="10">0</text>';
html += '<text x="' + pl + '" y="' + (pt + ch + 18) + '" fill="#999" font-size="10">{{ _('Now') | e }}</text>';
html += '<text x="' + (pl + cw - 50) + '" y="' + (pt + ch + 18) + '" fill="#999" font-size="10">{{ _('Deadline') | e }}</text>';
html += '<line x1="' + pl + '" y1="' + ty + '" x2="' + (pl + cw) + '" y2="' + ty + '" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="4,3"/>';
html += '<text x="' + (pl + cw + 4) + '" y="' + (ty + 4) + '" fill="#4CAF50" font-size="9">{{ _('Target') | e }}</text>';
html += '<polygon points="' + pl + ',' + (pt + ch) + ' ' + pl + ',' + py + ' ' + (pl + (prog / 100) * cw) + ',' + py + ' ' + (pl + (prog / 100) * cw) + ',' + (pt + ch) + '" fill="rgba(59,130,246,0.15)"/>';
html += '<line x1="' + pl + '" y1="' + py + '" x2="' + (pl + (prog / 100) * cw) + '" y2="' + py + '" stroke="#3B82F6" stroke-width="2"/>';
html += '<circle cx="' + (pl + (prog / 100) * cw) + '" cy="' + py + '" r="4" fill="#3B82F6"/>';
html += '<text x="' + (pl + (prog / 100) * cw - 12) + '" y="' + (py - 8) + '" fill="#3B82F6" font-size="10" font-weight="bold">' + prog + '%</text>';
svg.innerHTML = html;
}
document.addEventListener('DOMContentLoaded', function() { toggleAssignment(); updatePreview(); });
</script>
{% endblock %}