feat: add explanation of how date math works
This commit is contained in:
kolaente
parent
6c55411f71
commit
e7fa1d3383
3 changed files with 160 additions and 2 deletions
|
|
@ -49,6 +49,122 @@
|
||||||
:config="flatPickerConfig"
|
:config="flatPickerConfig"
|
||||||
v-model="flatpickrRange"
|
v-model="flatpickrRange"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ $t('input.datepickerRange.math.canuse') }}
|
||||||
|
<a @click="showHowItWorks = true">{{ $t('input.datepickerRange.math.learnhow') }}</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<modal
|
||||||
|
@close="() => showHowItWorks = false"
|
||||||
|
:enabled="showHowItWorks"
|
||||||
|
transition-name="fade"
|
||||||
|
:overflow="true"
|
||||||
|
variant="hint-modal"
|
||||||
|
>
|
||||||
|
<card class="has-no-shadow how-it-works-modal" :title="$t('input.datepickerRange.math.title')">
|
||||||
|
<p>
|
||||||
|
{{ $t('input.datepickerRange.math.intro') }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.expression">
|
||||||
|
<code>now</code>
|
||||||
|
<code>||</code>
|
||||||
|
</i18n-t>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.similar">
|
||||||
|
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/" rel="noreferrer noopener nofollow" target="_blank">
|
||||||
|
Grafana
|
||||||
|
</a>
|
||||||
|
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math" rel="noreferrer noopener nofollow" target="_blank">
|
||||||
|
Elasticsearch
|
||||||
|
</a>
|
||||||
|
</i18n-t>
|
||||||
|
</p>
|
||||||
|
<p>{{ $t('misc.forExample') }}</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>+1d</code>{{ $t('input.datepickerRange.math.add1Day') }}</li>
|
||||||
|
<li><code>-1d</code>{{ $t('input.datepickerRange.math.minus1Day') }}</li>
|
||||||
|
<li><code>/d</code>{{ $t('input.datepickerRange.math.roundDay') }}</li>
|
||||||
|
</ul>
|
||||||
|
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>s</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>m</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>h</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>H</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>M</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>y</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>now</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now+24h</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/w+1w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now+30d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||||
|
<td>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
|
||||||
|
<code>{{ exampleDate }}</code>
|
||||||
|
</i18n-t>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</card>
|
||||||
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -62,6 +178,7 @@ import 'flatpickr/dist/flatpickr.css'
|
||||||
import {computed, ref, watch} from 'vue'
|
import {computed, ref, watch} from 'vue'
|
||||||
import {useI18n} from 'vue-i18n'
|
import {useI18n} from 'vue-i18n'
|
||||||
import {store} from '@/store'
|
import {store} from '@/store'
|
||||||
|
import {format} from 'date-fns'
|
||||||
import Popup from '@/components/misc/popup.vue'
|
import Popup from '@/components/misc/popup.vue'
|
||||||
|
|
||||||
import {dateRanges} from '@/components/date/dateRanges'
|
import {dateRanges} from '@/components/date/dateRanges'
|
||||||
|
|
@ -84,6 +201,9 @@ const flatPickerConfig = computed(() => ({
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
const showHowItWorks = ref(false)
|
||||||
|
const exampleDate = format(new Date(), 'yyyy-MM-dd')
|
||||||
|
|
||||||
const flatpickrRange = ref('')
|
const flatpickrRange = ref('')
|
||||||
|
|
||||||
const from = ref('')
|
const from = ref('')
|
||||||
|
|
@ -226,4 +346,12 @@ const customRangeActive = computed<Boolean>(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.how-it-works-modal{
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -207,7 +207,6 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -525,7 +525,38 @@
|
||||||
},
|
},
|
||||||
"datepickerRange": {
|
"datepickerRange": {
|
||||||
"to": "To",
|
"to": "To",
|
||||||
"from": "From"
|
"from": "From",
|
||||||
|
"math": {
|
||||||
|
"canuse": "You can use date math to filter for relative dates.",
|
||||||
|
"learnhow": "Check out how it works",
|
||||||
|
"title": "Date Math",
|
||||||
|
"intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
|
||||||
|
"expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
|
||||||
|
"similar": "These expressions are similar to the ones provided by {0} and {1}.",
|
||||||
|
"add1Day": "Add one day",
|
||||||
|
"minus1Day": "Subtract one day",
|
||||||
|
"roundDay": "Round down to the nearest day",
|
||||||
|
"supportedUnits": "Supported time units are:",
|
||||||
|
"someExamples": "Some examples of time expressions:",
|
||||||
|
"units": {
|
||||||
|
"seconds": "Seconds",
|
||||||
|
"minutes": "Minutes",
|
||||||
|
"hours": "Hours",
|
||||||
|
"days": "Days",
|
||||||
|
"weeks": "Weeks",
|
||||||
|
"months": "Months",
|
||||||
|
"years": "Years"
|
||||||
|
},
|
||||||
|
"examples": {
|
||||||
|
"now": "Right now",
|
||||||
|
"in24h": "In 24h",
|
||||||
|
"today": "Today at 00:00",
|
||||||
|
"beginningOfThisWeek": "The beginning of this week at 00:00",
|
||||||
|
"endOfThisWeek": "The end of this week",
|
||||||
|
"in30Days": "In 30 days",
|
||||||
|
"datePlusMonth": "{0} plus one month at 00:00 of that day"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"task": {
|
"task": {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue