Merge branch 'run-selection' of https://github.com/cschlaffner/PROTzi…

…lla2 into run-selection
cschlaffner · Dec 12, 2024 · e6db66d · e6db66d
2 parents 2cd55b8 + 1aab2bd
commit e6db66d
Show file tree

Hide file tree

Showing 3 changed files with 216 additions and 75 deletions.
diff --git a/ui/runs/static/runs/index.css b/ui/runs/static/runs/index.css
@@ -2,3 +2,71 @@
     height:-100vh;
 
 }
+
+/* === RUN SELECTION === */
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul li div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center; 
+  height: 40px; 
+  padding: 0 10px;
+}
+
+.header-list li{
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center; 
+  height: 40px; 
+  padding: 0 10px;
+}
+
+
+
+/* Continue btn postioning */
+
+input[value="Continue"] {
+  margin-top: 20px;
+  float: right;
+}
+
+/* Arkordeon */
+
+/* Details-Container */
+.details {
+  display: none;
+  background-color: #f9f9f9;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  height: 200px;
+  margin: 10px;
+  position: relative;
+}
+
+.list-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+}
+
+/* Hauptzeile in der Liste */
+.list-item > .main-content {
+  display: inline;
+  justify-content: space-between;
+  align-items: stretch;
+  width: 100%;
+}
+
+.list-item.expanded {
+  background-color: #f5f5f5;
+  border-left: 4px solid #bc3838;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+}
diff --git a/ui/runs/static/runs/index.js b/ui/runs/static/runs/index.js
@@ -1,9 +1,40 @@
+// === EVENT LISTENER ===
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Delete Btns
+  const delete_btns = document.querySelectorAll('.delete-btn');
+
+  delete_btns.forEach(button => {
+    const svg = button.querySelector('svg');
+
+    button.addEventListener('mouseover', () => {
+        button.classList.add('btn-red');
+        button.classList.remove('btn-grey');
+        if (svg) svg.setAttribute('fill', 'white');
+    });
+
+    button.addEventListener('mouseout', () => {
+        button.classList.add('btn-grey');
+        button.classList.remove('btn-red');
+        if (svg) svg.setAttribute('fill', 'grey');
+    });
+  });
+
+  // mark first run as selected
+  let first_run = document.getElementById('run-1');
+  first_run.style.backgroundColor = '#e8edf3';
+  first_run.style.borderRadius = '10px';
+
+});
+
+
+// === FUNCTIONS ===
 function selectRun(runName, runId, numberOfRuns){
   for (let i = 1; i <= numberOfRuns; i++) {
       let run = document.getElementById('run-' + i);
       if (i == runId) {
-          run.style.backgroundColor = '#e8edf3';
-          run.style.borderRadius = '10px';
+        run.style.backgroundColor = 'rgb(232, 237, 243)';
+        run.style.borderRadius = '10px';
       }
       else {
           run.style.backgroundColor = 'white';
@@ -26,3 +57,22 @@ function toggleFavouriteRun(runName, favouriteStatus){
   document.getElementById('change_favourite').submit();
 };
 
+function toggleDetails(element) {
+  document.querySelectorAll('.list-item.expanded').forEach(item => {
+    if (item !== element) {
+      item.classList.remove('expanded');
+      item.querySelector('.details').style.display = 'none';
+    }
+  });
+
+  const details = element.querySelector('.details');
+  if (element.classList.contains('expanded')) {
+    element.classList.remove('expanded');
+    details.style.display = 'none';
+    element.style.height = "40px";
+  } else {
+    element.classList.add('expanded');
+    details.style.display = 'block';
+    element.style.height = "250px";
+  }
+}
diff --git a/ui/runs/templates/runs/index.html b/ui/runs/templates/runs/index.html
@@ -9,7 +9,6 @@
 
 {% block js %}
     <script type="text/javascript" src="{% static 'runs/index.js' %}"></script>
-
 {% endblock %}
 
 {% block content %}
@@ -43,52 +42,76 @@
         {% csrf_token %}
         <div class="mb-2">
           <h3>Continue an existing run:
-            <span id="selectedRun">{{ all_available_runs.0.run_name }}</span>
+            <span id="selectedRun" style="display: none;">{{ all_available_runs.0.run_name }}</span>
           </h3>
 
-          <!-- Header Section -->
+        <!-- Header Section -->
         <ul class="w-100 header-list" style="list-style-type: none; margin: 0; padding: 0;">
-          <li class="d-flex justify-content-between" style="font-weight: bold; border-bottom: 1px solid #ccc; padding: 5px 0;">
-              <span style="width: 8%"></span>
-              <span style="width: 32%">Name</span>
-              <span style="width: 18%">Created</span>
-              <span style="width: 18%">Last modified</span>
-              <span style="width: 24%">Memory mode</span>
+          <li class="d-flex justify-content-between" style="font-weight: bold;">
+              <span>
+                <button type="button" class="btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ded704" class="bi bi-star-fill" viewBox="0 0 16 16">
+                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.197-4.482c.197-.4.73-.4.927 0l2.197 4.482 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.444-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+                  </svg>
+                </button>
+              </span>
+              <span style="width: 30%" class="center">Name</span>
+              <span style="width: 15%">Created</span>
+              <span style="width: 15%">Last modified</span>
+              <span style="width: 15%">Memory mode</span>
+              <button type="button" class="btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+                  <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
+                </svg>
+              </button>
+
             </li>
         </ul>
 
         <!-- Run selection -->
           <ul class="w-100" aria-labelledby="dropdownMenuButton" style="max-height: 60vh; overflow-y: scroll !important; padding:0;">
             {% for run in all_available_runs %}
-            <li class="d-flex justify-content-between" id="run-{{ forloop.counter }}" onclick="selectRun('{{run.run_name}}', '{{ forloop.counter }}', '{{ all_available_runs|length }}')">
-              <button type="button" class="btn" onclick="toggleFavouriteRun('{{run.run_name}}', '{{run.favourite_status}}')">
-                {% if run.favourite_status == False %}
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
-                  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
-                </svg>
-                {% else %}
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ded704" class="bi bi-star-fill" viewBox="0 0 16 16">
-                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.197-4.482c.197-.4.73-.4.927 0l2.197 4.482 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.444-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                </svg>
-                {% endif %}
-              </button>
-              <span style="width: 30%"><b>{{ run.run_name }}</b></span>
-              <span style="width: 15%">{{ run.creation_date }}</span>
-              <span style="width: 15%">{{ run.modification_date }}</span>
-              <span style="width: 15%">{{ run.memory_mode }}</span>
-              <button type="button" class="btn btn-red" onclick="deleteRun('{{run.run_name}}')">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-trash3-fill" viewBox="0 0 16 16">
-                  <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
-                </svg>
-              </button>
+            {% if forloop.counter == 1 %}
+              <hr style="margin: 5px 0px; border: none; height: 2px; background-color: grey; border-radius: 1px">
+            {% else %}
+              <hr style="margin: 5px 0px;">
+            {% endif %}
+            <li class="d-flex justify-content-between list-item" id="run-{{ forloop.counter }}" onclick="selectRun('{{run.run_name}}', '{{ forloop.counter }}', '{{ all_available_runs|length }}'); toggleDetails(this)">
+              <div id="main-content" class="justify-content-between d-flex">
+                <button type="button" class="btn" onclick="toggleFavouriteRun('{{run.run_name}}', '{{run.favourite_status}}')">
+                  {% if run.favourite_status == False %}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
+                    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
+                  </svg>
+                  {% else %}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ded704" class="bi bi-star-fill" viewBox="0 0 16 16">
+                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.197-4.482c.197-.4.73-.4.927 0l2.197 4.482 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.444-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+                  </svg>
+                  {% endif %}
+                </button>
+                <span style="width: 30%"><b>{{ run.run_name }}</b></span>
+                <span style="width: 15%">{{ run.creation_date }}</span>
+                <span style="width: 15%">{{ run.modification_date }}</span>
+                <span style="width: 15%">{{ run.memory_mode }}</span>
+                <button type="button" class="delete-btn btn btn-grey" onclick="deleteRun('{{run.run_name}}')">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
+                  </svg>
+                </button>
+              </div>
+              <div class="details">
+                <!-- Zusätzliche Informationen -->
+                <span>Tags: {{run.tags}}</span>
+                <p style="margin: 5px 0;">Description: </p>
+                <input type="submit" value="Continue" class="btn btn-red">
+              </div>
+
             </li>
-            <hr style="margin: 5px 0px;">
             {% endfor %}
           </ul>
 
         </div>
         <input type="hidden" name="run_name" id="run_name_id" value="{{available_runs.0.run_name}}">
-        <input type="submit" value="Continue" class="btn btn-red">
       </form>
       <form id="delete_run" class="mb-5" action="{% url 'runs:delete' %}" method="post">
         {% csrf_token %}
@@ -138,7 +161,7 @@ <h3>Select filters:</h3>
 
         </div>
         <input type="hidden" name="filter" value='{"name": "i", "steps": "", "memory_mode": "disk_memory"}'>
-        <input type="submit" value="Apply filters" class="btn btn-red">
+        <input type="submit" value="Apply filters" class="btn btn-grey">
       </form>
     </div>
   </div>
@@ -147,7 +170,7 @@ <h3>Select filters:</h3>
 </div>
 
 </div>
-<form>
+<!-- <form>
 <label for="fruits">Fruits</label>
 <select id="fruits" name="fruits" data-placeholder="Select fruits" multiple data-multi-select>
     <option value="Apple">Apple</option>
@@ -167,48 +190,48 @@ <h3>Select filters:</h3>
     <option value="Strawberry">Strawberry</option>
     <option value="Watermelon">Watermelon</option>
 </select>
-</form>
+</form> -->
 <script type="text/javascript" src="{% static 'runs/MultiSelect.js' %}"></script>
 <script>
   // Initialize the Multi Selects
   new MultiSelect('#dynamic', {
-      data: [
-          {
-              value: 'opt1',
-              text: 'Option 1'
-          },
-          {
-              value: 'opt2',
-              html: '<strong>Option 2 with HTML!</strong>'
-          },
-          {
-              value: 'opt3',
-              text: 'Option 3',
-              selected: true
-          },
-          {
-              value: 'opt4',
-              text: 'Option 4'
-          },
-          {
-              value: 'opt5',
-              text: 'Option 5'
-          }
-      ],
-      placeholder: 'Select an option',
-      search: true,
-      selectAll: true,
-      listAll: false,
-      max: 2,
-      onChange: function(value, text, element) {
-          console.log('Change:', value, text, element);
-      },
-      onSelect: function(value, text, element) {
-          console.log('Selected:', value, text, element);
-      },
-      onUnselect: function(value, text, element) {
-          console.log('Unselected:', value, text, element);
-      }
+    data: [
+        {
+            value: 'opt1',
+            text: 'Option 1'
+        },
+        {
+            value: 'opt2',
+            html: '<strong>Option 2 with HTML!</strong>'
+        },
+        {
+            value: 'opt3',
+            text: 'Option 3',
+            selected: true
+        },
+        {
+            value: 'opt4',
+            text: 'Option 4'
+        },
+        {
+            value: 'opt5',
+            text: 'Option 5'
+        }
+    ],
+    placeholder: 'Select an option',
+    search: true,
+    selectAll: true,
+    listAll: false,
+    max: 2,
+    onChange: function(value, text, element) {
+        console.log('Change:', value, text, element);
+    },
+    onSelect: function(value, text, element) {
+        console.log('Selected:', value, text, element);
+    },
+    onUnselect: function(value, text, element) {
+        console.log('Unselected:', value, text, element);
+    }
   });
-  </script>
+</script>
 {% endblock %}