Merge pull request #64 from robocup-logistics/tviehmann/machine-poses

new round of features for frontend
robocup-logistics · Jul 16, 2024 · 173ccd7 · 173ccd7
2 parents 31b039a + a2ad09a
commit 173ccd7
Show file tree

Hide file tree

Showing 65 changed files with 1,372 additions and 447 deletions.
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -2,7 +2,7 @@ name: Docker Image CI
 
 on:
   push:
-    branches: ["*"]
+    branches: ['*']
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -0,0 +1,14 @@
+repos:
+  # - repo: https://github.com/pre-commit/mirrors-eslint
+  #   rev: v9.5.0  # Use the version of ESLint you need
+  #   hooks:
+  #     - id: eslint
+  #       additional_dependencies:
+  #         - "@typescript-eslint/eslint-plugin@latest"
+  #         - "@typescript-eslint/parser@latest"
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8 # Use the version of Prettier you need
+    hooks:
+      - id: prettier
+        additional_dependencies: []
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,58 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import globals from 'globals'
+import parser from 'vue-eslint-parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends(
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'eslint:recommended',
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+
+      parser: parser,
+      ecmaVersion: 'latest',
+      sourceType: 'commonjs',
+
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        project: './tsconfig.json', // Ensure this points to your tsconfig.json file
+      },
+    },
+
+    rules: {
+      'no-unused-vars': 'off',
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+]
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/package.json b/package.json
@@ -21,14 +21,14 @@
     "vue3-shortkey": "^4.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-vue": "^5.0.0",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.20.1",
     "eslint-scope": "^8.0.0",
     "sass": "^1.69.7",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.2",
     "vite": "^5.0.13",
     "vue-eslint-parser": "^9.4.0"
   },

diff --git a/src/components/referee/LogoAndActions.vue b/src/components/referee/LogoAndActions.vue
@@ -6,8 +6,10 @@
       <div class="horizontal-flex">
         <PopupWrapper popup-position="bottom">
           <template #reference>
-            <PillButton description="Reset"
-                title="Restart the refbox, requires re-connect of frontend">
+            <PillButton
+              description="Reset"
+              title="Restart the refbox, requires re-connect of frontend"
+            >
               <font-awesome-icon icon="fa-arrow-rotate-left" />
             </PillButton>
           </template>
@@ -68,6 +70,14 @@
           </template>
           <ConfirmFieldRandomizationPopup />
         </PopupWrapper>
+        <PopupWrapper popup-position="bottom">
+          <template #reference>
+            <PillButton description="Instruct" title="Instruct Machines">
+              <font-awesome-icon icon="fa-walkie-talkie" />
+            </PillButton>
+          </template>
+          <InstructMachinePopup />
+        </PopupWrapper>
         <PopupWrapper popup-position="bottom">
           <template #reference>
             <PillButton description="help" title="Help">
@@ -92,6 +102,7 @@ import HelpPopup from '@/components/referee/popups/HelpPopup.vue'
 import PillButton from '@/components/shared/ui/PillButton.vue'
 import ConfirmResetPopup from '@/components/referee/popups/ConfirmResetPopup.vue'
 import GameConfigPopup from '@/components/referee/popups/GameConfigPopup.vue'
+import InstructMachinePopup from '@/components/referee/popups/InstructMachinePopup.vue'
 import ConfigPresetsPopup from '@/components/referee/popups/ConfigPresetsPopup.vue'
 import { useSocketStore } from '@/store/socketStore'
 import { storeToRefs } from 'pinia'

diff --git a/src/components/referee/RefereeApp.vue b/src/components/referee/RefereeApp.vue
@@ -14,8 +14,8 @@
     </div>
     <!-- TEAMS -->
     <div class="teams">
-      <Team color="CYAN" :teamName="nameTeamCyan" />
       <Team color="MAGENTA" :teamName="nameTeamMagenta" />
+      <Team color="CYAN" :teamName="nameTeamCyan" />
     </div>
     <!-- FOOTER -->
     <div class="footer horizontal-flex">

diff --git a/src/components/referee/Team.vue b/src/components/referee/Team.vue
@@ -18,7 +18,7 @@
     <!-- MACHINES/ROBOTS/SCORE -->
     <div
       v-if="phase != 'PRE_GAME'"
-      :class="['team-assets', color == 'MAGENTA' ? 'rtl' : '']"
+      :class="['team-assets', color == 'CYAN' ? 'rtl' : '']"
     >
       <TeamMachines :color="color" />
       <div class="vertical-flex">

diff --git a/src/components/referee/TeamMachines.vue b/src/components/referee/TeamMachines.vue
@@ -5,42 +5,23 @@
       'flex-item',
       'machines-container',
       'darker',
-      color == 'MAGENTA' ? 'rtl' : '',
+      color == 'CYAN' ? 'rtl' : '',
     ]"
   >
-    <div style="display: grid; grid-template-columns: 55px 1fr; gap: 20px">
+    <div class="machines-grid">
       <template v-for="machine in machinesByColor(color)">
         <div class="machine-left">
           <div
             :class="[
               machine.mtype === 'RS' && machine.current_ring_color
                 ? machine.current_ring_color
                 : machine.mtype === 'BS' && machine.current_base_color
-                ? machine.current_base_color
-                : '',
+                  ? machine.current_base_color
+                  : '',
             ]"
           >
-            <span>{{ machine.name }}</span>
+            <span class="machine-name">{{ machine.name }}</span>
           </div>
-          <div :class="['machine-pos', `${color}-text`]">
-            <span>{{ machine.zone }}</span>
-          </div>
-        </div>
-
-        <div class="machine-right">
-          <span
-            :class="[
-              'machine-state',
-              machine.state === 'READY-AT-OUTPUT' ||
-              machine.state === 'PROCESSING'
-                ? 'text-warning'
-                : machine.state === 'BROKEN' || machine.state === 'DOWN'
-                ? 'text-danger'
-                : '',
-            ]"
-          >
-            {{ machine.state }}
-          </span>
           <!-- If RS show additional Info -->
           <div v-if="machine.mtype === 'RS'" class="horizontal-flex">
             <div
@@ -63,10 +44,32 @@
               machine.bases_added - machine.bases_used
             }}</span>
           </div>
+        </div>
+
+        <div class="machine-middle">
+          <div :class="['machine-pos', `${color}-text`]">
+            <span>{{ machine.zone }}</span>
+          </div>
           <div :class="`${color}-text`">
-            <span v-if="phase === 'SETUP'"> {{ machine.rotation }}° </span>
+            <span> {{ machine.rotation }}° </span>
           </div>
         </div>
+
+        <div class="machine-right">
+          <span
+            :class="[
+              'machine-state',
+              machine.state === 'READY-AT-OUTPUT' ||
+              machine.state === 'PROCESSING'
+                ? 'text-warning'
+                : machine.state === 'BROKEN' || machine.state === 'DOWN'
+                  ? 'text-danger'
+                  : '',
+            ]"
+          >
+            {{ machine.state }}
+          </span>
+        </div>
       </template>
     </div>
   </div>
@@ -100,15 +103,15 @@ const ringColorCost: ComputedRef<(ringColor: string) => number> = computed(
   () => {
     return (ringColor: string) => {
       const ringSpec = ringSpecs.value.find(
-        (ringspec) => ringspec.color === ringColor
+        (ringspec) => ringspec.color === ringColor,
       )
       if (ringSpec) {
         return ringSpec.req_bases
       } else {
         return 0
       }
     }
-  }
+  },
 )
 </script>
 
@@ -127,10 +130,26 @@ const ringColorCost: ComputedRef<(ringColor: string) => number> = computed(
     direction: rtl !important;
   }
 
+  .machines-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+
   .machine-left {
     .machine-pos {
       font-size: 0.8rem;
     }
+    .machine-name {
+      white-space: nowrap; /* Prevent line break */
+      overflow: hidden; /* Hide overflow text */
+      text-overflow: ellipsis; /* Add ellipsis for overflow text */
+    }
+  }
+  .machine-middle {
+    .machine-pos {
+      font-size: 0.8rem;
+    }
   }
 
   .machine-right {

diff --git a/src/components/referee/TeamRobots.vue b/src/components/referee/TeamRobots.vue
@@ -35,21 +35,18 @@
       <span class="robot-maintenance-cycles">
         {{ robot.maintenance_cycles }}
       </span>
-      <template v-if="!robot.warning_sent">
-        <Button
-          v-if="robot.state === 'ACTIVE'"
-          icon="fa-robot"
-          title="Start maintenance"
-          @click="setRobotMaintenanceStatus(robot, true)"
-        ></Button>
-
-        <Button
-          v-else-if="robot.state === 'MAINTENANCE'"
-          icon="fa-robot"
-          title="End maintenance"
-          @click="setRobotMaintenanceStatus(robot, false)"
-        ></Button>
-      </template>
+      <Button
+        v-if="robot.state === 'ACTIVE'"
+        icon="fa-robot"
+        title="Start maintenance"
+        @click="setRobotMaintenanceStatus(robot, true)"
+      ></Button>
+      <Button
+        v-else-if="robot.state === 'MAINTENANCE'"
+        icon="fa-robot"
+        title="End maintenance"
+        @click="setRobotMaintenanceStatus(robot, false)"
+      ></Button>
     </div>
     <span v-else>No robots conneted</span>
   </div>