feat: implement encoding to fit (#50)

* update manufacturers.json
* add building block for fit encoding
* add unimplemented building block for gpx and tcx, clean up gpx and tcx codes
* implement service layer encoding, wire to fit, gpx and tcx services
* implement FE presentation layer for encoding
* fix minor bug in graphs

package.json

@@ -27,7 +27,8 @@
     "ol": "^8.1.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -37,6 +38,7 @@
     "@types/kdbush": "^3.0.5",
     "@types/luxon": "^3.3.2",
     "@types/node": "^20.6.3",
+    "@types/vue-select": "^3.16.8",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",

src/assets/main.scss

@@ -21,6 +21,7 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-dark-3: rgba(130, 130, 130, 0.7);
 
   --open-activity-color-vivid: #f15a22;
 }
@@ -36,6 +37,8 @@
 
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
+  --color-text-soft: var(--vt-c-black-soft);
+  --color-text-disabled: var(--vt-c-divider-dark-1);
   --color-title: var(--vt-c-text-light-1);
 
   --green-text: var(--palm-springs-splash);
@@ -50,10 +53,12 @@
     --color-background-mute: var(--vt-c-black-mute);
 
     --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
+    --color-border-hover: var(--grey);
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+    --color-text-soft: var(--vt-c-white);
+    --color-text-disabled: var(--vt-c-text-dark-3);
     --color-title: var(--open-activity-color-vivid);
 
     --green-text: var(--medium-sea-green);
@@ -66,6 +71,14 @@
 /* scrollbar */
 @import './scrollbar.scss';
 
+@import './v-select.scss';
+
+// DO NOT REMOVE
+// For finding overflow element
+// * {
+//     outline: 1px solid #f00 !important;
+// }
+
 /* Global overrides */
 body {
   color: var(--color-text);

src/assets/tools.scss

@@ -0,0 +1,43 @@
+label {
+  font-weight: 500;
+  color: var(--bs-heading-color);
+}
+
+.sub-label {
+  color: var(--color-text);
+  font-weight: 700;
+  font-size: 0.8em;
+}
+
+.emoji {
+  font-size: 1.2em;
+  color: white;
+}
+
+p {
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+
+.fs-legend {
+  font-size: 0.8em;
+}
+
+.color-mandatory {
+    color: rgba(255,0,0,0.8)
+}
+
+.openivity-form-range::-webkit-slider-thumb {
+  background-color: var(--color-title) !important;
+  border: 2px solid var(--color-title) !important;
+}
+
+.openivity-form-range::-moz-range-thumb {
+  background-color: var(--color-title) !important;
+  border: 2px solid var(--color-title) !important;
+}
+
+.openivity-form-range::-ms-thumb {
+  background-color: var(--color-title) !important;
+  border: 2px solid var(--color-title) !important;
+}