commit 0fe16735e5144230604f7dff0c9ada3d9ec04a13
parent 590655ea297ee9065167274f5b5e6bb14dd2fa18
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Fri, 20 Aug 2021 16:23:31 -0700
Add ability to edit targets in pace calculator
Diffstat:
6 files changed, 113 insertions(+), 9 deletions(-)
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -25,7 +25,7 @@ input, select {
/* default styles for mobile devices */
@media only screen and (max-width: 800px) {
- input, select {
+ input, select, button {
font-size: 1em;
}
}
diff --git a/src/assets/plus-circle.svg b/src/assets/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
diff --git a/src/assets/trash-2.svg b/src/assets/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
diff --git a/src/assets/x.svg b/src/assets/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
diff --git a/src/views/PaceCalculator.vue b/src/views/PaceCalculator.vue
@@ -15,12 +15,16 @@
<p>is the same pace as running</p>
- <table class="output">
+ <table class="output" v-if="!inEditMode">
<thead>
<tr>
- <th>Distance</th>
- <th></th>
+ <th colspan="2">Distance</th>
<th>Time</th>
+ <th>
+ <button class="icon" title="Edit Targets" @click="inEditMode=true">
+ <img alt="" src="@/assets/edit.svg">
+ </button>
+ </th>
</tr>
</thead>
<tbody>
@@ -32,10 +36,71 @@
<td>in</td>
- <td>
+ <td colspan="2">
{{ formatDuration(item.time, 0, 2) }}
</td>
</tr>
+
+ <tr v-if="results.length === 0" class="empty-message">
+ <td colspan="4">
+ There aren't any targets,<br>
+ click
+ <img alt="Edit Targets" src="@/assets/edit.svg">
+ to add one
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table class="edit-targets" v-if="inEditMode">
+ <thead>
+ <tr>
+ <th>
+ Edit Targets
+ </th>
+ <th>
+ <button class="icon" title="Close" @click="inEditMode=false">
+ <img alt="" src="@/assets/x.svg">
+ </button>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in targets" :key="index">
+ <td>
+ <decimal-input v-model="item.distanceValue" aria-label="Distance Value"
+ :min="0" :digits="2"/>
+ <select v-model="item.distanceUnit" aria-label="Distance Unit">
+ <option v-for="(value, key) in distanceUnits" :key="key" :value="key">
+ {{ value }}
+ </option>
+ </select>
+ </td>
+
+ <td>
+ <button class="icon" title="Remove Target" @click="targets.splice(index, 1)">
+ <img alt="" src="@/assets/trash-2.svg">
+ </button>
+ </td>
+ </tr>
+
+ <tr v-if="targets.length === 0" class="empty-message">
+ <td colspan="4">
+ There aren't any targets,<br>
+ click
+ <img alt="Add Target" src="@/assets/plus-circle.svg">
+ to add one
+ </td>
+ </tr>
+
+ <tr class="add-target">
+ <td colspan="4">
+ <button class="icon" title="Add Target" @click="targets.push({distanceValue: 1,
+ distanceUnit: 'miles'})">
+ <img alt="" src="@/assets/plus-circle.svg">
+ </button>
+ </td>
+ </tr>
</tbody>
</table>
</div>
@@ -89,6 +154,11 @@ export default {
formatDuration: unitUtils.formatDuration,
/**
+ * Whether the calculator is in edit targets mode
+ */
+ inEditMode: false,
+
+ /**
* The output targets
*/
targets: [
@@ -188,22 +258,52 @@ export default {
}
/* calculator output */
+.output th:last-child {
+ text-align: right;
+}
+
+/* edit targets table */
+.edit-targets th:last-child, .edit-targets td:last-child {
+ text-align: right;
+}
+.edit-targets td select {
+ margin-left: 0.2em;
+}
+.edit-targets .add-target td {
+ text-align: center;
+ padding: 0.5em 0.2em;
+}
+
+/* general table styles */
table {
margin-top: 10px;
border-collapse: collapse;
min-width: 300px;
+ text-align: left;
}
-tr {
+table tr {
border: 0.1em solid #000000;
}
-th, td {
+table th, table td {
padding: 0.2em;
- text-align: left;
}
-@media only screen and (max-width: 400px) {
+table button.icon {
+ height: 2em;
+ width: 2em;
+}
+@media only screen and (max-width: 500px) {
table {
width: 100%;
min-width: 0px;
}
}
+
+/* empty table message */
+.empty-message td {
+ text-align: center !important;
+}
+.empty-message img {
+ height: 1em;
+ width: 1em;
+}
</style>
