style(gym): line path form has color indicators in list (#642)

Closes #641

build: compose setup uses hmr and updates package.json

Author: BlobbyBob

client/src/app/modules/line-path-editor/line-path-editor.module.ts

@@ -9,6 +9,7 @@ import { SharedModule } from '../shared/shared.module';
 import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
 import { DropdownModule } from 'primeng/dropdown';
 import { TopoImagesModule } from '../topo-images/topo-images.module';
+import { GymModeDirective } from '../shared/directives/gym-mode.directive';
 
 @NgModule({
   declarations: [LinePathEditorComponent, LinePathFormComponent],
@@ -23,6 +24,7 @@ import { TopoImagesModule } from '../topo-images/topo-images.module';
     ReactiveFormsModule,
     DropdownModule,
     TopoImagesModule,
+    GymModeDirective,
   ],
   providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'linePath' }],
 })

client/src/app/modules/line-path-editor/line-path-form/line-path-form.component.html

@@ -23,6 +23,11 @@
                 data-cy="line-dropdown-item"
               >
                 <div>
+                  <span
+                    *isGymMode="true"
+                    class="color-indicator mr-3"
+                    [style]="{ '--arrow-color': line.color }"
+                  ></span>
                   {{ line.name }}
                   {{ line | lineGrade }}
                 </div>

client/src/app/modules/line-path-editor/line-path-form/line-path-form.component.scss

@@ -0,0 +1,6 @@
+.color-indicator {
+  outline: 0.5px solid black;
+  border-radius: 1em;
+  background-color: var(--arrow-color);
+  padding: 0 0.55em;
+}

docker-compose.yml

@@ -79,20 +79,20 @@ services:
     command:
       - sh
       - "-c"
-#      - "while true; do sleep 60; done"
       - "pipenv run flask db upgrade && pipenv run python util/scripts/database_setup.py && pipenv run flask run --host=0.0.0.0"
 
   client:
     build:
       target: localcragapp-client
     volumes:
       - ./client/src:/localcragapp/src
+      - ./client/package.json:/localcragapp/package.json
     ports:
       - "127.0.0.1:4200:4200"  # Web Frontend
     command:
       - sh
       - "-c"
-      - "npx ng serve --host 0.0.0.0"
+      - "npx ng serve --host 0.0.0.0 --hmr"
 
 volumes:
   database: