Merge pull request #4 from Utorque/claude/focus-forecast-app-011CUbtpDFnKADjmLxqw1whh (b043066f) · Commits · Barthelet Thibault / horloml

forecast_app/templates/historical.html

+1 −1

Original line number	Diff line number	Diff line
		@@ -162,7 +162,7 @@ watches.forEach(watch => {

		const labels = historicalData.map(month => month.date);

		const ctx = document.getElementById(`chart_CHF {watch.id}`);
		const ctx = document.getElementById(`chart_${watch.id}`);
		new Chart(ctx, {
		type: 'line',
		data: {

forecast_app/templates/predict.html

+29 −62

Original line number	Diff line number	Diff line
		@@ -56,11 +56,11 @@
		<p class="subtitle is-6">Enter predicted demand for each month (January - December)</p>

		<div class="notification is-info is-light">
		<strong>Tips:</strong>
		<strong>How to use:</strong>
		<ul>
		<li>Look for seasonal patterns in the historical data</li>
		<li>Consider the long-term growth trend</li>
		<li>Each watch has different characteristics - Luxury peaks in holidays, Sport peaks in summer</li>
		<li><strong>Paste from Excel:</strong> Click on a watch name header below and paste (Ctrl+V / Cmd+V) a column of 12 values from your Excel spreadsheet</li>
		<li><strong>Fill Constant:</strong> Fill all months with the same value</li>
		<li><strong>Fill with Last Year:</strong> Copy Year 10 data to your predictions</li>
		</ul>
		</div>

		@@ -70,9 +70,12 @@
		<tr>
		<th>Month</th>
		{% for watch in watches %}
		<th class="has-text-centered">
		<th class="has-text-centered watch-column-{{ watch.id }}"
		tabindex="0"
		style="cursor: pointer; background-color: #f5f5f5;"
		title="Click here and paste (Ctrl+V) 12 values from Excel">
		{{ watch.name }}<br>
		<span class="has-text-grey is-size-7">(units)</span>
		<span class="has-text-grey is-size-7">(units) - Click & Paste</span>
		</th>
		{% endfor %}
		</tr>
		@@ -104,33 +107,15 @@
		<!-- Quick Fill Helpers -->
		<div class="field is-grouped is-grouped-multiline">
		<div class="control">
		<button type="button" class="button is-small" onclick="fillConstant()">
		<button type="button" class="button is-info" onclick="fillConstant()">
		<span class="icon"><i class="fas fa-equals"></i></span>
		<span>Fill Constant</span>
		</button>
		</div>
		<div class="control">
		<button type="button" class="button is-small" onclick="fillIncreasing()">
		<span class="icon"><i class="fas fa-arrow-up"></i></span>
		<span>Fill Increasing</span>
		</button>
		</div>
		<div class="control">
		<button type="button" class="button is-small" onclick="fillDecreasing()">
		<span class="icon"><i class="fas fa-arrow-down"></i></span>
		<span>Fill Decreasing</span>
		</button>
		</div>
		<div class="control">
		<button type="button" class="button is-small" onclick="fillFromYear10()">
		<button type="button" class="button is-info" onclick="fillFromYear10()">
		<span class="icon"><i class="fas fa-copy"></i></span>
		<span>Copy Year 10</span>
		</button>
		</div>
		<div class="control">
		<button type="button" class="button is-small" onclick="clearAll()">
		<span class="icon"><i class="fas fa-eraser"></i></span>
		<span>Clear All</span>
		<span>Fill with Last Year</span>
		</button>
		</div>
		</div>
		@@ -157,7 +142,7 @@ const lastYear = {{ last_year \| tojson }};
		function getInputs(watchId) {
		const inputs = [];
		for (let month = 1; month <= 12; month++) {
		const input = document.querySelector(`input[name="prediction_CHF {watchId}_CHF {month}"]`);
		const input = document.querySelector(`input[name="prediction_${watchId}_${month}"]`);
		inputs.push(input);
		}
		return inputs;
		@@ -165,7 +150,7 @@ function getInputs(watchId) {

		function fillConstant() {
		watches.forEach(watch => {
		const value = prompt(`Enter constant value for CHF {watch.name}:`, '100');
		const value = prompt(`Enter constant value for ${watch.name}:`, '100');
		if (value !== null) {
		const inputs = getInputs(watch.id);
		inputs.forEach(input => input.value = value);
		@@ -173,34 +158,6 @@ function fillConstant() {
		});
		}

		function fillIncreasing() {
		watches.forEach(watch => {
		const start = prompt(`Enter starting value for CHF {watch.name}:`, '80');
		const end = prompt(`Enter ending value for CHF {watch.name}:`, '120');
		if (start !== null && end !== null) {
		const inputs = getInputs(watch.id);
		const increment = (parseFloat(end) - parseFloat(start)) / 11;
		inputs.forEach((input, idx) => {
		input.value = Math.round(parseFloat(start) + (increment * idx));
		});
		}
		});
		}

		function fillDecreasing() {
		watches.forEach(watch => {
		const start = prompt(`Enter starting value for CHF {watch.name}:`, '120');
		const end = prompt(`Enter ending value for CHF {watch.name}:`, '80');
		if (start !== null && end !== null) {
		const inputs = getInputs(watch.id);
		const decrement = (parseFloat(start) - parseFloat(end)) / 11;
		inputs.forEach((input, idx) => {
		input.value = Math.round(parseFloat(start) - (decrement * idx));
		});
		}
		});
		}

		function fillFromYear10() {
		watches.forEach(watch => {
		const inputs = getInputs(watch.id);
		@@ -213,14 +170,24 @@ function fillFromYear10() {
		});
		}

		function clearAll() {
		if (confirm('Clear all predictions?')) {
		watches.forEach(watch => {
		// Add paste functionality for each watch column
		watches.forEach((watch, watchIdx) => {
		const columnHeader = document.querySelector(`.watch-column-${watch.id}`);
		if (columnHeader) {
		columnHeader.addEventListener('paste', function(e) {
		e.preventDefault();
		const pastedData = (e.clipboardData \|\| window.clipboardData).getData('text');
		const values = pastedData.split(/[\r\n]+/).map(v => v.trim()).filter(v => v !== '');

		const inputs = getInputs(watch.id);
		inputs.forEach(input => input.value = '');
		});
		values.forEach((value, idx) => {
		if (inputs[idx] && !isNaN(value)) {
		inputs[idx].value = Math.round(parseFloat(value));
		}
		});
		});
		}
		});

		// Form validation
		document.getElementById('predictionForm').addEventListener('submit', function(e) {