Add modal for timeseries upload

Author: paulapreuss

app/templates/asset/timeseries_dashboard.html

@@ -150,7 +150,7 @@ <h1>Time Series</h1>
         </div>
 
         <div class="actions">
-            <a class="btn btn--medium" href="{% url 'not_implemented' %}">Upload time series</a>
+            <button class="btn btn--medium" data-bs-toggle="modal" data-bs-target="#uploadTimeseriesModal">Upload time series</button>
             <button class="btn btn--medium" data-bs-toggle="modal" data-bs-target="#createTimeseriesModal">Create manually</button>
         </div>
     </div>
@@ -293,6 +293,92 @@ <h2>No time series yet</h2>
     {% endif %}
 </div>
 
+<div class="modal fade" id="uploadTimeseriesModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Upload 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="upload-name">Name</label>
+                    <input type="text" id="upload-name" class="form-control" placeholder="e.g. Berlin electricity demand 2022">
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-asset-type">Asset type</label>
+                    <select id="upload-asset-type" class="form-select">
+                        <option value="">Choose...</option>
+                        <option value="demand">demand</option>
+                        <option value="gas_demand">gas_demand</option>
+                        <option value="h2_demand">h2_demand</option>
+                        <option value="heat_demand">heat_demand</option>
+                        <option value="pv_plant">pv_plant</option>
+                        <option value="wind_plant">wind_plant</option>
+                        <option value="biogas_plant">biogas_plant</option>
+                        <option value="geothermal_conversion">geothermal_conversion</option>
+                        <option value="solar_thermal_plant">solar_thermal_plant</option>
+                    </select>
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-category">Category</label>
+                    <select id="upload-category" class="form-select">
+                        <option value="other">Other</option>
+                        <option value="demand">Demand</option>
+                        <option value="supply">Supply</option>
+                    </select>
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-units">Units</label>
+                    <select id="upload-units" class="form-select">
+                        <option value="kWh" selected>kWh</option>
+                        <option value="Wh">Wh</option>
+                        <option value="MWh">MWh</option>
+                        <option value="GWh">GWh</option>
+                        <option value="TWh">TWh</option>
+                    </select>
+                </div>
+
+                <div class="row mb-3">
+                    <div class="col form-group">
+                        <label for="upload-start-date">Start date</label>
+                        <input type="datetime-local" id="upload-start-date" class="form-control">
+                    </div>
+                    <div class="col form-group">
+                        <label for="upload-end-date">End date</label>
+                        <input type="datetime-local" id="upload-end-date" class="form-control">
+                    </div>
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-time-step">Time step (minutes)</label>
+                    <input type="number" id="upload-time-step" class="form-control" min="1" placeholder="e.g. 60">
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-open-source">
+                        <input type="checkbox" id="upload-open-source" class="form-check-input me-1">
+                        Open source
+                    </label>
+                </div>
+
+                <div class="form-group mb-3">
+                    <label for="upload-file">Time series file</label>
+                    <input type="file" id="upload-file" class="form-control">
+                    <div class="muted small mt-1">Upload a CSV, XLS, or JSON file containing the time series values.</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">Upload</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="modal fade" id="createTimeseriesModal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">