Styling and index adjustment

cypress/e2e/training-machines.cy.js

@@ -20,8 +20,8 @@ describe('Training Machine Management', () => {
 
         const testName = generateUniqueName('tm');
         cy.get('input[name="name"]').type(testName);
-        cy.get('button').click();
-        cy.get('button').click();
+        cy.get('button[type="submit"]').click();
+        cy.get('#done-button').click();
 
         let tmObject = cy.contains('tr', testName) 
         tmObject.should('exist')
@@ -62,7 +62,7 @@ describe('Training Machine Management', () => {
         cy.get('@alreadyExisting').then(alreadyExisting => {
             cy.get('input[name="name"]').type(alreadyExisting);
         })
-        cy.get('button').click();
+        cy.get('button[type="submit"]').click();
 
         cy.get('#errors').invoke('text').should('eq', 'Name must be unique\n')
     });

cypress/e2e/training-tasks.cy.js

@@ -21,7 +21,7 @@ describe('Training Tasks Management', () => {
         const testName = generateUniqueName('tm');
         cy.get('input[name="name"]').type(testName);
         cy.get('select[name="trainingDatasetId"]').select('1');
-        cy.get('button').click();
+        cy.get('button[type="submit"]').click();
 
         let tmObject = cy.contains('tr', testName)
         tmObject.should('exist')
@@ -61,7 +61,7 @@ describe('Training Tasks Management', () => {
             cy.get('input[name="name"]').type(alreadyExisting);
         })
         cy.get('select[name="trainingDatasetId"]').select('1');
-        cy.get('button').click();
+        cy.get('button[type="submit"]').click();
 
         cy.get('#errors').invoke('text').should('eq', 'Name must be unique\n')
     });

internal/db/models/training_task.go

@@ -84,11 +84,11 @@ func (s TrainingTaskStatus) Color() string {
 
 type TrainingTask struct {
 	gorm.Model
-	Name                string             `gorm:"type:varchar(255);not null;uniqueIndex"`
+	Name                string             `gorm:"type:varchar(255);not null;uniqueIndex:idx_unique_name_for_dataset;index"`
 	Status              TrainingTaskStatus `gorm:"type:smallint"`
 	UserId              uint
 	User                User
-	TrainingDatasetId   uint
+	TrainingDatasetId   uint `gorm:"uniqueIndex:idx_unique_name_for_dataset;not null"`
 	TrainingDataset     TrainingDataset
 	TrainingTaskResults []TrainingTaskResult
 	TrainingMachineId   *uint

web/templates/static/header.html

@@ -4,6 +4,7 @@
     <div class="font-sans font-bold flex flex-col min-h-screen">
         <header class="bg-sky-900 p-6">
             <div class="flex justify-between items-center">
+                <!-- Logo -->
                 <div class="flex text-sky-50 gap-0 justify-start text-3xl font-extrabold">
                     <a href="/">
                         <div class="flex">
@@ -13,20 +14,41 @@
                         </div>
                     </a>
                 </div>
-                <div class="flex text-sky-50 gap-3 justify-start text-md md:text-lg">
-                    <a href="/training-tasks">
-                        Training Tasks
-                    </a>
-                    <a href="/training-datasets">
-                        Training Datasets
-                    </a>
-                    <a href="/training-machines">
-                        Training Machines
-                    </a>
+
+                <!-- Hamburger Menu (Hidden on larger screens) -->
+                <div class="md:hidden flex flex-col justify-center">
+                    <button id="menu-button" aria-label="Toggle Menu" class="text-sky-50 focus:outline-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
                 </div>
+
+                <!-- Desktop Navigation Links -->
+                <nav class="hidden md:flex text-sky-50 gap-3 text-md md:text-lg">
+                    <a href="/training-tasks">Training Tasks</a>
+                    <a href="/training-datasets">Training Datasets</a>
+                    <a href="/training-machines">Training Machines</a>
+                </nav>
             </div>
+
+            <!-- Mobile Navigation Links -->
+            <nav id="mobile-menu" class="hidden flex-col mt-4 space-y-2 bg-sky-800 text-sky-50 rounded-lg p-4 md:hidden">
+                <a href="/training-tasks" class="block">Training Tasks</a>
+                <a href="/training-datasets" class="block">Training Datasets</a>
+                <a href="/training-machines" class="block">Training Machines</a>
+            </nav>
+
+            <script>
+                // JavaScript to toggle the mobile menu
+                document.getElementById('menu-button').addEventListener('click', function () {
+                    const menu = document.getElementById('mobile-menu');
+                    menu.classList.toggle('hidden');
+                });
+            </script>
         </header>
 
         <main class="flex-grow bg-sky-100 text-sm lg:text-md dark:bg-sky-950 dark:text-gray-50">
-            <div class="container mx-auto" id="main-content-container">
+            <div class="container mx-auto p-2" id="main-content-container">
+
 {{end}}

web/templates/training-datasets/index.html

@@ -1,9 +1,9 @@
 {{ define "training-datasets_index" }}
 {{ template "header" . }}
 <div class="flex flex-col gap-4 my-4">
-    <div class="flex justify-between justify-self-stretch items-center">
-        <h1 class="text-lg md:text-xl">{{ .Title }}</h1>
-        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4"
+    <div class="flex flex-col-reverse justify-start gap-4 md:flex-row md:justify-between justify-self-stretch items-center">
+        <h1 class="text-xl">{{ .Title }}</h1>
+        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4 self-end md:self-auto"
             href="/training-datasets/new">Create Training Dataset</a>
     </div>
     <form method="get" class="flex items-center gap-2">

web/templates/training-machines/index.html

@@ -1,9 +1,9 @@
 {{ define "training-machines_index" }}
 {{ template "header" . }}
 <div class="max-h-screen flex flex-col gap-4 my-4">
-    <div class="flex justify-between justify-self-stretch items-center">
-        <h1 class="text-lg md:text-xl">{{ .Title }}</h1>
-        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4"
+    <div class="flex flex-col-reverse justify-start gap-4 md:flex-row md:justify-between justify-self-stretch items-center">
+        <h1 class="text-xl">{{ .Title }}</h1>
+        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4 self-end md:self-auto"
             href="/training-machines/new">Register Training Machine</a>
     </div>
     <form method="get" class="flex items-center gap-2">

web/templates/training-machines/show-secret.html

@@ -12,6 +12,6 @@
         <input type="text" value="{{ .SecretKey }}" class="rounded-lg text-gray-800 w-full" name="secretKey" disabled>
     </div>
     <a class="self-end" href="/training-machines"><button
-            class="bg-sky-900 hover:bg-sky-800 text-white rounded-lg text-xl font-bold py-2 px-4 mb-5">Done</button></a>
+            class="bg-sky-900 hover:bg-sky-800 text-white rounded-lg text-xl font-bold py-2 px-4 mb-5" id="done-button">Done</button></a>
 </div>
 {{ end }}

web/templates/training-tasks/image-slider.html

@@ -1,14 +1,4 @@
 {{ define "training-tasks_image-slider" }}
-<style>
-    /* Smooth transitions for image changes */
-    .carousel-image {
-        transition: opacity 0.5s ease-in-out;
-    }
-
-    .hidden {
-        display: none;
-    }
-</style>
 <div class="flex flex-col justify-center gap-2">
     <div class="w-full max-h-96 overflow-y-auto rounded shadow-md">
         <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 auto-cols-auto gap-3 flex-wrap">

web/templates/training-tasks/index.html

@@ -1,9 +1,9 @@
 {{ define "training-tasks_index" }}
 {{ template "header" . }}
 <div class="max-h-screen flex flex-col gap-4 my-4">
-    <div class="flex justify-between justify-self-stretch items-center">
-        <h1 class="text-lg md:text-xl">{{ .Title }}</h1>
-        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4"
+    <div class="flex flex-col-reverse justify-start gap-4 md:flex-row md:justify-between justify-self-stretch items-center">
+        <h1 class="text-xl">{{ .Title }}</h1>
+        <a class="bg-sky-900 hover:bg-sky-800 text-gray-50 rounded-lg text-lg font-bold py-2 px-4 self-end md:self-auto"
             href="/training-tasks/new">Create Training Task</a>
     </div>
     <form method="get" class="flex items-center gap-2">

web/templates/training-tasks/show.html

@@ -77,12 +77,16 @@ <h2 class="text-xl text-right">Training dataset - {{ .TrainingTask.TrainingDatas
             {{ end }}
         </div>
     </div>
-    <div class="grid grid-cols-2 justify-stretch items-center gap-4 text-lg">
+    <div class="grid grid-cols-2 justify-stretch items-start gap-4 text-lg">
         <h2 class="text-right">Created by:</h2>
         <h3>{{ .TrainingTask.User.FirstName }} {{ .TrainingTask.User.FamilyName }} ({{ .TrainingTask.User.Username }})
         </h3>
-
-
+        <h2 class="text-right">Configuration:</h2>
+        <div>
+        {{ range $key, $value := .TrainingTask.Configuration }}
+            <h3>{{ $key }}: {{ $value }}</h3>
+        {{ end }}
+        </div>
         <h2 class="text-right">Created at:</h2>
         <h3>{{ .TrainingTask.CreatedAt.Format "02 Jan 06 15:04 MST" }}</h3>
         <h2 class="text-right">Last update at:</h2>