правка рассчета виртуальной мощности

src/pages/workouts/components/WorkoutItem.vue

@@ -157,53 +157,6 @@
           {{ Math.floor(workoutItem.virtual_power) }} Вт
         </div>
       </div>
-      <div class="workout-item-params" v-if="isPrivate">
-        <div class="workout-item-params-name">Сделать публичной:&nbsp;</div>
-        <input
-          type="checkbox"
-          v-model="workoutItem.is_public"
-          v-on:change="changePublic(workoutItem.is_public)"
-        />
-      </div>
-      <div class="workout-item-params" v-if="isPrivate">
-        <div class="workout-item-params-name">
-          {{ t("workout.hide_start_end") }}:&nbsp;
-        </div>
-        <input
-          type="checkbox"
-          v-model="workoutItem.hide_start_end"
-          v-on:change="changeHideStartEnd(workoutItem.hide_start_end)"
-        />
-      </div>
-      <div class="workout-item-params" v-if="isPrivate">
-        <div class="workout-item-params-name">
-          {{ t("workout.virtualPowerBtn") }}:&nbsp;
-        </div>
-        <VaButton
-          preset="secondary"
-          size="small"
-          :color="
-            workoutItem!.virtual_power_bike_type ? 'primary' : 'textPrimary'
-          "
-          @click="showVPModal = true"
-        >
-          <VaIcon name="flash_on" /> {{ t("workout.virtualPower") }}
-        </VaButton>
-      </div>
-      <div class="workout-item-params" v-if="dzenLink || isPrivate">
-        <div class="workout-item-params-name">Ссылки на описание:&nbsp;</div>
-        <div v-if="dzenLink">
-          <a :href="dzenLink" target="_blank">Дзен</a>
-          <VaIcon
-            v-if="isPrivate"
-            name="edit"
-            @click="showModalLink = !showModalLink"
-          />
-        </div>
-        <div class="workout-item-params-pointer" v-else>
-          <a @click="showModalLink = !showModalLink">Добавить</a>
-        </div>
-      </div>
 
       <div v-if="!isEmpty(areaAvgData)" class="area-data">
         <h4>Данные участка</h4>
@@ -221,6 +174,40 @@
       </div>
     </div>
   </div>
+  <div id="workout-controls" v-if="workoutItem && isPrivate">
+    <div class="workout-controls-grid">
+      <div class="workout-control-item">
+        <div class="workout-item-params-name">Сделать публичной:</div>
+        <input
+          type="checkbox"
+          v-model="workoutItem.is_public"
+          @change="changePublic(workoutItem.is_public)"
+        />
+      </div>
+      <div class="workout-control-item">
+        <div class="workout-item-params-name">
+          {{ t("workout.hide_start_end") }}:
+        </div>
+        <input
+          type="checkbox"
+          v-model="workoutItem.hide_start_end"
+          @change="changeHideStartEnd(workoutItem.hide_start_end)"
+        />
+      </div>
+      <div class="workout-control-item">
+        <VaButton
+          preset="secondary"
+          size="small"
+          :color="
+            workoutItem!.virtual_power_bike_type ? 'primary' : 'textPrimary'
+          "
+          @click="showVPModal = true"
+        >
+          <VaIcon name="flash_on" /> {{ t("workout.virtualPower") }}
+        </VaButton>
+      </div>
+    </div>
+  </div>
   <div
     id="workout-photos"
     v-if="workoutItem && (photos.length > 0 || isPrivate)"
@@ -397,17 +384,17 @@
     @update:modelValue="(v: boolean) => (showVPModal = v)"
   >
     <h1 class="va-h5 mb-4">{{ t("workout.virtualPowerBtn") }}</h1>
-    <VaForm @submit.prevent="calculateVP">
+    <VaForm>
       <p class="mb-1 font-bold">{{ t("workout.virtualPowerBikeType") }}</p>
       <VaSelect v-model="vpBikeType" :items="bikeTypeOptions" class="mb-4" />
       <p class="mb-1 font-bold">{{ t("workout.virtualPowerSurface") }}</p>
       <VaSelect v-model="vpSurface" :items="surfaceOptions" class="mb-4" />
       <div class="flex justify-end">
         <VaButton
-          type="submit"
           preset="primary"
           size="small"
           :loading="vpLoading"
+          @click="calculateVP"
         >
           {{ t("workout.virtualPowerCalculate") }}
         </VaButton>
@@ -1716,6 +1703,37 @@ h3 {
   top: 6px;
   right: 6px;
 }
+#workout-controls {
+  width: 100%;
+  margin-top: 16px;
+  padding: 12px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fafafa;
+}
+.workout-controls-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+.workout-control-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.workout-control-item input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+@media (max-width: 550px) {
+  .workout-controls-grid {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}
 #x-axis-switcher {
   width: 100%;
   display: flex;