Add modal for timeseries creation

Author: paulapreuss

app/templates/asset/timeseries_dashboard.html

@@ -151,7 +151,7 @@ <h1>Time Series</h1>
 
         <div class="actions">
             <a class="btn btn--medium" href="{% url 'not_implemented' %}">Upload time series</a>
-            <a class="btn btn--medium" href="{% url 'not_implemented' %}">Create manually</a>
+            <button class="btn btn--medium" data-bs-toggle="modal" data-bs-target="#createTimeseriesModal">Create manually</button>
         </div>
     </div>
 
@@ -292,5 +292,67 @@ <h2>No time series yet</h2>
         </div>
     {% endif %}
 </div>
+
+<div class="modal fade" id="createTimeseriesModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Create time series</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group mb-3">
+                    <label for="ts-type-select">Type</label>
+                    <select id="ts-type-select" class="form-select" onchange="toggleTsFields()">
+                        <option value="pv" selected>PV output</option>
+                        <option value="electricity_demand">Electricity demand</option>
+                        <option value="heat_demand">Heat demand</option>
+                    </select>
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="ts-name">Name</label>
+                    <input type="text" id="ts-name" class="form-control" placeholder="e.g. My PV series">
+                </div>
+
+                <div id="pv-fields">
+                    <div class="form-group mb-3">
+                        <label for="ts-azimuth">Azimuth (°)</label>
+                        <input type="number" id="ts-azimuth" class="form-control" placeholder="180 = south">
+                    </div>
+                    <div class="form-group mb-3">
+                        <label for="ts-tilt">Tilt (°)</label>
+                        <input type="number" id="ts-tilt" class="form-control" placeholder="0 = horizontal, 90 = vertical">
+                    </div>
+                    <div class="form-group mb-3">
+                        <label for="ts-efficiency">System efficiency (%)</label>
+                        <input type="number" id="ts-efficiency" class="form-control" min="0" max="100" placeholder="e.g. 80">
+                    </div>
+
+                    <div class="form-group mb-2">
+                        <label for="ts-weather-file">Weather data</label>
+                        <input type="file" id="ts-weather-file" class="form-control">
+                        <div class="muted small mt-1">Data may be in TRY or ERA5 format.</div>
+                    </div>
+                    <div class="mb-3">
+                        <button type="button" class="btn btn--medium">Use default weather data based on location</button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn--medium">Create</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function toggleTsFields() {
+    const val = document.getElementById('ts-type-select').value;
+    document.getElementById('pv-fields').style.display = val === 'pv' ? '' : 'none';
+}
+</script>
+
 </body>
 {% endblock content %}