Changes made by HC

Dockerfile

@@ -1,7 +1,8 @@
 FROM continuumio/miniconda3
 WORKDIR /src
 RUN apt-get update -y --allow-releaseinfo-change \
-    && apt-get install --no-install-recommends -qy g++ gcc inetutils-ping coinor-cbc \
+    && apt-get install --no-install-recommends -qy g++ gcc inetutils-ping coinor-cbc texlive-latex-base texlive-fonts-recommended  \
+    texlive-fonts-extra texlive-latex-extra\
     && rm -rf /var/lib/apt/lists/*
 RUN conda update -n base -c defaults conda
 RUN conda create -n py38 python=3.8 pip
@@ -14,3 +15,4 @@ COPY no_deps_requirements.txt .
 RUN pip install --no-deps --no-cache-dir -r no_deps_requirements.txt
 RUN conda config --set channel_priority false
 COPY . .
+

fastapi_app/css/main.css

@@ -446,6 +446,7 @@ textarea {
     /* 2 */
 }
 
+
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
@@ -1284,6 +1285,12 @@ a.dropdown-item:active {
     padding: 10px;
 }
 
+.step-footer__left a {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+}
+
 .form-control:disabled,
 .form-control:disabled::file-selector-button {
     color: #ccc;
@@ -1741,6 +1748,19 @@ nav.navbar .dropdown-menu li {
     }
 }
 
+.wizard {
+    visibility: hidden; /* Keeps the space in the layout */
+    opacity: 0;         /* Makes it invisible */
+    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
+    /* This transition ensures visibility changes after opacity, avoiding flickering */
+}
+
+.wizard.show {
+    visibility: visible; /* Makes it visible */
+    opacity: 1;          /* Fully visible */
+    transition-delay: 0s; /* No delay on visibility change */
+}
+
 .wizard {
     position: relative;
     background-color: var(--bcc);
@@ -1884,30 +1904,34 @@ nav.navbar .dropdown-menu li {
     border-radius: 100px;
 }
 
-.wizard__steps li:nth-child(1)::before {
+.wizard__steps li.step-1::before {
     content: "1";
 }
 
-.wizard__steps li:nth-child(2)::before {
+.wizard__steps li.step-2::before {
     content: "2";
 }
 
-.wizard__steps li:nth-child(3)::before {
+.wizard__steps li.step-3::before {
     content: "3";
 }
 
-.wizard__steps li:nth-child(4)::before {
+.wizard__steps li.step-4::before {
     content: "4";
 }
 
-.wizard__steps li:nth-child(5)::before {
+.wizard__steps li.step-5::before {
     content: "5";
 }
 
-.wizard__steps li:nth-child(6)::before {
+.wizard__steps li.step-6::before {
     content: "6";
 }
 
+.wizard__steps li::before {
+    content: attr(data-step-number);
+}
+
 .wizard__steps li.active {
     color: #1F567D;
 }
@@ -3083,4 +3107,10 @@ input:checked + .slider:before {
 
 .slider.round:before {
     border-radius: 50%;
-}
+}
+
+.currency-sub {
+        font-size: 0.8em;
+        vertical-align: sub;
+        color: #555;
+    }

fastapi_app/css/pages/consumer_selection.css

@@ -34,7 +34,7 @@
 }
 
 /* Adjustments for form elements */
-.input-item select, .input-group input, .input-group-text, .btn--medium {
+.input-item select, .input-group input, .input-group-text {
     height: 32px; /* Ensures consistent height across elements */
     line-height: 20px; /* Vertical alignment for text inside inputs */
     padding: 0 24px 0 8px; /* Padding to avoid text overlapping the dropdown arrow */

fastapi_app/css/pages/demand_estimation.css

@@ -1,4 +1,4 @@
-.input-item select, .input-group input, .input-group-text, .btn btn--medium {
+.input-item select, .input-group input, .input-group-text {
     height: 32px; /* Adjust this value to your preference */
 }
 
@@ -18,3 +18,12 @@
 .btn-custom input[type='radio'] {
     margin-right: 5px;
 }
+
+.chart__plot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%; /* Take full height of the parent container */
+    width: 100%;  /* Take full width of the parent container */
+    min-height: 500px; /* Set a minimum height to reserve space and prevent layout shifts */
+}

fastapi_app/html/_footer.html

@@ -5,51 +5,51 @@
         </div>
         <div class="step-footer__center">
             {% if title == 'Project Setup' %}
-                <a class="btn btn--medium btn--hollow btn--previous"
+                <a class="btn btn--medium btn--hollow btn--previous" id="prevButton"
                    href="/">Previous</a>
-                <a class="btn btn--medium" style="color: #fff"
+                <a class="btn btn--medium" style="color: #fff" id="nextButton"
                    href="javascript:void(0);"
-                   onclick="save_project_setup({{ project_id }}, 'consumer_selection?project_id={{ project_id }}');">
+                   onclick="save_project_setup('consumer_selection?project_id={{ project_id }}');">
                     Next
                 </a>
             {% elif title == 'Consumer Selection' %}
-                <a class="btn btn--medium btn--hollow btn--previous"
+                <a class="btn btn--medium btn--hollow btn--previous" id="prevButton"
                    href="javascript:void(0);"
-                   onclick="consumer_to_db({{ project_id }}, 'project_setup?project_id={{ project_id }}')">
+                   onclick="consumer_to_db('project_setup?project_id={{ project_id }}')">
                     Previous
                 </a>
-                <a class="btn btn--medium" style="color: #fff"
+                <a class="btn btn--medium" style="color: #fff" id="nextButton"
                    href="javascript:void(0);"
-                   onclick="consumer_to_db({{ project_id }});">
+                   onclick="consumer_to_db();">
                     Next
                 </a>
             {% elif title == 'Demand Estimation' %}
-                <a class="btn btn--medium btn--hollow btn--previous"
+                <a class="btn btn--medium btn--hollow btn--previous" id="prevButton"
                    href="javascript:void(0);"
                    onclick="save_demand_estimation('consumer_selection?project_id={{ project_id }}')">
                     Previous
                 </a>
-                <a class="btn btn--medium" style="color: #fff"
+                <a class="btn btn--medium" style="color: #fff" id="nextButton"
                    href="javascript:void(0);"
                    onclick="save_demand_estimation('grid_design?project_id={{ project_id }}')">
                     Next
                 </a>
             {% elif title == 'Grid Design' %}
-                <a class="btn btn--medium btn--hollow btn--previous"
+                <a class="btn btn--medium btn--hollow btn--previous" id="prevButton"
                    href="javascript:void(0);"
                    onclick="save_grid_design('demand_estimation?project_id={{ project_id }}');">
                     Previous</a>
-                <a class="btn btn--medium" style="color: #fff"
+                <a class="btn btn--medium" style="color: #fff" id="nextButton"
                    href="javascript:void(0);"
                    onclick="save_grid_design('energy_system_design?project_id={{ project_id }}');">
                     Next
                 </a>
             {% elif title == 'Energy System Design' %}
-                <a class="btn btn--medium btn--hollow btn--previous"
+                <a class="btn btn--medium btn--hollow btn--previous" id="prevButton"
                    href="javascript:void(0);"
                    onclick="save_energy_system_design('grid_design?project_id={{ project_id }}');">
                     Previous</a>
-                <a class="btn btn--medium" style="color: #fff"
+                <a class="btn btn--medium" style="color: #fff" id="nextButton"
                    href="javascript:void(0);"
                    onclick="save_energy_system_design(''); forward_if_no_task_is_pending({{ project_id }});">
                     Optimize</a>

fastapi_app/html/_login_and_register_modal.html

@@ -0,0 +1,172 @@
+<div id="login" class="modal" style="background-color: rgba(0,0,0,0.5); z-index: 999; text-align: left">
+        <form class="modal-content" style="max-width: 24rem">
+            <div class="container">
+                <h1 style="text-align:left;">Login</h1>
+
+                <div style="display:inline">
+                    <p style="text-align: left">Email</p>
+                    <div class="input-item">
+                        <input type="text" class="form-control" id="userEmail" name="email"
+                               placeholder="Enter your mail address"/>
+                    </div>
+                    <p style="text-align: left">Password</p>
+                    <div class="input-item">
+                        <input type="password" class="form-control" id="userPassword" name="password"
+                               placeholder="Enter your password"/>
+                    </div>
+                </div>
+                <div style="text-align: left;">
+                    <input type="checkbox" class="form-check-input" id="isEnabled"/>
+                    <label for="isEnabled" style="margin-left: 5px;"><span>Remember me</span></label>
+                </div>
+                <p style="text-align:left;">&nbsp;Don't have an account yet?
+                    <a href="#"
+                       onclick="document.getElementById('registration').style.display='block'; document.getElementById('login').style.display='none';">Register
+                        here</a>
+                <p style="text-align: left"><a href="#"
+                                               onclick="document.getElementById('forgotPassword').style.display='block'">&nbsp;Forgot
+                    your password?</a></p>
+
+                </p>
+                <button onclick="login();" type="button" class="deletebtn">Log in</button>
+                <button onclick="document.getElementById('login').style.display='none'" type="button" class="cancelbtn">
+                    Close
+                </button>
+                <p id="responseMsg"></p>
+
+            </div>
+        </form>
+    </div>
+<div id="registration" class="modal" style="background-color: rgba(0,0,0,0.5); z-index: 999;">
+        <form class="modal-content" style="max-width: 20rem">
+            <div class="container">
+                <h1 style="text-align:left;">Registration</h1>
+                <div class="clearfix">
+                    <div class="input-item" style="text-align: left">
+                        <div style="display: flex; align-items: center;">
+                            <img id="captcha_img2" style="margin-right: 1rem;">
+                            <a style="font-family: Lucida Sans Unicode; font-weight: 900; font-size: 2rem"
+                               type="button"
+                               onclick="get_captcha();"
+                            >&#x21bb;
+                            </a>
+                        </div>
+                        <p style="display:inline; text-align: left">
+                            Captcha <i>(Hint: capital letters only)</i>
+                        </p>
+                        <input
+                                type="text"
+                                class="form-control"
+                                id="captcha_input2"
+                                placeholder="Please enter the capital letters shown above"
+                                value=""
+                                required
+                        />
+                        <p style="display:inline">
+                            Email
+                        </p>
+                        <input
+                                type="text"
+                                class="form-control"
+                                id="userEmail2"
+                                placeholder="Enter your mail address"
+                                value=""
+                                required
+                        />
+                    </div>
+                    <div class="input-item" style="text-align: left">
+                        <p style="display:inline">
+                            Password
+                        </p>
+                        <input
+                                type="password"
+                                class="form-control"
+                                id="userPassword2"
+                                placeholder="Enter your password"
+                                value=""
+                                required
+                        />
+                    </div>
+                    <div class="input-item" style="text-align: left">
+                        <p style="display:inline">
+                            Repeat Password
+                        </p>
+                        <input
+                                type="password"
+                                class="form-control"
+                                id="userPassword3"
+                                placeholder="Enter your password"
+                                value=""
+                                required
+                        />
+                    </div>
+                    <p id="responseMsg2"></p>
+                    <button onclick="add_user_to_db();"
+                            type="button"
+                            class="deletebtn"
+                    >Register
+                    </button>
+                    <button onclick="document.getElementById('registration').style.display='none'"
+                            type="button" class="cancelbtn">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+<div id="forgotPassword" class="modal" style="background-color: rgba(0,0,0,0.5); z-index: 999;">
+        <form class="modal-content" style="max-width: 20rem">
+            <div class="container">
+                <h1 style="text-align:left;">Reset Password</h1>
+                <p style="text-align: left">If you have forgotten your password, a link can be sent to your registered
+                    email address that
+                    will allow you to reset your password.</p>
+                <div class="clearfix">
+                    <div class="input-item" style="text-align: left">
+                        <p style="display:inline">
+                        </p>
+                        <div style="display: flex; align-items: center;">
+                            <img id="captcha_img" style="margin-right: 1rem;">
+                            <a style="font-family: Lucida Sans Unicode; font-weight: 900; font-size: 2rem"
+                               type="button"
+                               onclick="get_captcha();"
+                            >&#x21bb;
+                            </a>
+                        </div>
+                        <p style="display:inline; text-align: left">
+                            Captcha <i>(Hint: capital letters only)</i>
+                        </p>
+                        <input
+                                type="text"
+                                class="form-control"
+                                id="captcha_input"
+                                placeholder="Please enter the capital letters shown above"
+                                value=""
+                                required
+                        />
+                        <p style="display:inline">
+                            Email
+                        </p>
+                        <input
+                                type="text"
+                                class="form-control"
+                                id="userEmail4"
+                                placeholder="Enter your mail address"
+                                value=""
+                                required
+                        />
+                    </div>
+                    <p id="responseMsg4"></p>
+                    <button onclick="send_reset_password_email();"
+                            type="button"
+                            class="deletebtn"
+                    >Send Mail
+                    </button>
+                    <button onclick="document.getElementById('forgotPassword').style.display='none'"
+                            type="button" class="cancelbtn">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>

fastapi_app/html/_navbar.html

@@ -46,9 +46,16 @@
                         <li>
                             <a class="dropdown-item" href="{{ url_for('account_overview') }}">Account</a>
                         </li>
+                        <li>
+                            <a class="dropdown-item" href="{{ url_for('training_tasks') }}">Traning Tasks</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="{{ url_for('model_description') }}">Model Description</a>
+                        </li>
                         <li>
                             <a class="dropdown-item" href="{{ url_for('contact') }}">Contact</a>
                         </li>
+
                         <li>
                             <hr class="dropdown-divider"/>
                         </li>