Skip to content

Commit ff53daa

Browse files
farfromrefugfarfromrefug
committed
feat: ascent detection in elevation profile
1 parent b562626 commit ff53daa

3 files changed

Lines changed: 88 additions & 26 deletions

File tree

‎app/components/bottomsheet/BottomSheetInner.svelte‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -954,23 +954,24 @@
954954
955955
async function showElevationProfileSettings(event) {
956956
try {
957-
await showSlidersPopover({
958-
debounceDuration: 0,
957+
await showPopoverMenu({
958+
// debounceDuration: 0,
959959
anchor: event.object,
960-
vertPos: VerticalPosition.BELOW,
961-
items: [{
960+
vertPos: VerticalPosition.ABOVE,
961+
options: [{
962962
type: 'switch',
963-
mapStore: showGradeColors,
963+
id: 'elevation_profile_show_grade_colors',
964964
value: get(showGradeColors),
965965
title: lc('show_elevation_profile_grade_colors')
966966
},
967967
{
968968
type: 'switch',
969-
mapStore: showAscents,
969+
id: 'elevation_profile_show_ascents',
970970
value: get(showAscents),
971971
title: lc('show_elevation_profile_ascents')
972972
},
973973
{
974+
type: 'slider',
974975
title: lc('elevation_profile_smooth_window'),
975976
icon: 'mdi-window-closed-variant',
976977
min: 0,
@@ -983,11 +984,12 @@
983984
}, 10)
984985
},
985986
{
987+
type: 'slider',
986988
title: lc('elevation_profile_filter_step'),
987989
icon: 'mdi-filter',
988990
min: 0,
989991
max: 50,
990-
resetValue: 10,
992+
defaultValue: 10,
991993
step: 1,
992994
value: ApplicationSettings.getNumber('elevation_profile_filter_step', 10),
993995
onChange: debounce((value) => {
@@ -999,7 +1001,7 @@
9991001
icon: 'mdi-trending-up',
10001002
min: 0,
10011003
max: 200,
1002-
resetValue: 10,
1004+
defaultValue: 10,
10031005
step: 1,
10041006
value: ApplicationSettings.getNumber('elevation_profile_ascents_min_gain', 10),
10051007
onChange: debounce((value) => {

‎app/components/chart/ElevationChart.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
showError(err);
5353
}
5454
}
55-
$: if (chart?.nativeView?.data && ($showProfileGrades !== undefined || $showAscents !== undefined)){
55+
$: if (chart?.nativeView?.data && (showProfileGrades !== undefined || showAscents !== undefined)){
5656
updateChartData(item);
5757
}
5858
let onChartDataUpdateCallbacks = [];
@@ -363,7 +363,7 @@
363363
spaceMax += chartElevationMinRange - deltaA;
364364
}
365365
const labelCount = 5;
366-
const interval = Math max(chartElevationMinRange, deltaA) / labelCount < 100 ? 50 : Math.round(Math max(chartElevationMinRange, deltaA) / labelCount / 100) * 100;
366+
const interval = Math.max(chartElevationMinRange, deltaA) / labelCount < 100 ? 50 : Math.round(Math.max(chartElevationMinRange, deltaA) / labelCount / 100) * 100;
367367
leftAxis.forcedInterval = interval;
368368
leftAxis.labelCount = labelCount;
369369
leftAxis.spaceMin = spaceMin;

‎app/components/common/OptionSelect.svelte‎

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
import { onDestroy } from 'svelte';
1111
import { Template } from 'svelte-native/components';
1212
import IconButton from '~/components/common/IconButton.svelte';
13-
import ListItem from '~/components/common/ListItem.svelte';
1413
import { ListItem as IListItem } from '~/components/common/ListItem';
14+
import ListItem from '~/components/common/ListItem.svelte';
15+
import ListItemAutoSize from '~/components/common/ListItemAutoSize.svelte';
16+
import SettingsSlider from '~/components/settings/SettingsSlider.svelte';
1517
import { lc } from '~/helpers/locale';
16-
import { colors } from '~/variables';
17-
import ListItemAutoSize from './ListItemAutoSize.svelte';
18+
import { colors, fontScale, fonts } from '~/variables';
1819
export interface OptionType extends IListItem {
1920
subtitle?: string;
2021
isPick?: boolean;
@@ -32,6 +33,9 @@
3233
export let borderRadius = 8;
3334
export let rowHeight = null;
3435
export let autofocus = false;
36+
export let estimatedItemSize = true;
37+
export let autoSize = false;
38+
export let isScrollEnabled = true;
3539
export let width: string | number = '*';
3640
export let containerColumns: string = '*';
3741
export let autoSizeListItem: boolean = false;
@@ -45,8 +49,8 @@
4549
export let onlyOneSelected = false;
4650
export let currentlyCheckedItem = null;
4751
export let onCheckBox: (item, value, e) => void = null;
52+
export let onChange: (item, value, e) => void = null;
4853
export let onRightIconTap: (item, e) => void = null;
49-
export let onLongPress: (item, e) => void = null;
5054
5155
export let titleProps: Partial<svelteNative.JSX.LabelAttributes> = {};
5256
export let titleHolderProps: Partial<svelteNative.JSX.StackLayoutAttributes> = {};
@@ -60,7 +64,7 @@
6064
let filter: string = null;
6165
6266
// technique for only specific properties to get updated on store change
63-
$: ({ colorOutline } = $colors);
67+
$: ({ colorOutline, colorOnSurface } = $colors);
6468
6569
function updateFiltered(filter) {
6670
if (filter) {
@@ -105,7 +109,7 @@
105109
} catch (err) {
106110
close(null);
107111
}
108-
} else if (item.type === 'checkbox') {
112+
} else if (item.type === 'checkbox' || item.type === 'switch') {
109113
// we dont want duplicate events so let s timeout and see if we clicking diretly on the checkbox
110114
const checkboxView: CheckBox = ((event.object as View).parent as View).getViewById('checkbox');
111115
clearCheckboxTimer();
@@ -176,6 +180,9 @@
176180
if (item.type) {
177181
return item.type;
178182
}
183+
if (autoSizeListItem && item.icon) {
184+
return 'lefticon';
185+
}
179186
if (item.rightIcon) {
180187
return 'righticon';
181188
}
@@ -227,18 +234,26 @@
227234
}} />
228235
</gridlayout>
229236
{/if}
230-
<collectionView {itemTemplateSelector} items={filteredOptions} row={2} {rowHeight} on:dataPopulated={onDataPopulated} ios:contentInsetAdjustmentBehavior={2}>
237+
<collectionView
238+
{autoSize}
239+
{estimatedItemSize}
240+
{isScrollEnabled}
241+
{itemTemplateSelector}
242+
items={filteredOptions}
243+
row={2}
244+
{rowHeight}
245+
on:dataPopulated={onDataPopulated}
246+
ios:contentInsetAdjustmentBehavior={2}>
231247
<Template key="checkbox" let:item>
232248
<svelte:component
233249
this={component}
234250
{borderRadius}
235251
columns="auto,*,auto"
236252
{fontSize}
237253
{fontWeight}
238-
{iconFontSize}
254+
iconFontSize={item.iconFontSize || iconFontSize}
239255
{item}
240256
mainCol={1}
241-
{onLongPress}
242257
showBottomLine={showBorders}
243258
{subtitleProps}
244259
{titleHolderProps}
@@ -255,16 +270,34 @@
255270
on:checkedChange={(e) => onCheckedChanged(item, e)} />
256271
</svelte:component>
257272
</Template>
273+
<Template key="switch" let:item>
274+
<svelte:component
275+
this={component}
276+
{borderRadius}
277+
columns="auto,*,auto"
278+
{fontSize}
279+
{fontWeight}
280+
iconFontSize={item.iconFontSize || iconFontSize}
281+
{item}
282+
mainCol={1}
283+
showBottomLine={showBorders}
284+
{subtitleProps}
285+
{titleHolderProps}
286+
{titleProps}
287+
{...templateProps}
288+
on:tap={(event) => onTap(item, event)}>
289+
<switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckedChanged(item, e)} />
290+
</svelte:component>
291+
</Template>
258292
<Template key="righticon" let:item>
259293
<svelte:component
260294
this={component}
261295
{borderRadius}
262296
columns="*,auto"
263297
{fontSize}
264298
{fontWeight}
265-
{iconFontSize}
299+
iconFontSize={item.iconFontSize || iconFontSize}
266300
{item}
267-
{onLongPress}
268301
showBottomLine={showBorders}
269302
{subtitleProps}
270303
{titleHolderProps}
@@ -274,36 +307,63 @@
274307
<mdbutton class="icon-btn" col={1} text={item.rightIcon} variant="text" on:tap={(event) => onRightTap(item, event)} />
275308
</svelte:component>
276309
</Template>
310+
<Template key="lefticon" let:item>
311+
<svelte:component
312+
this={component}
313+
{borderRadius}
314+
columns="auto,*"
315+
{fontSize}
316+
{fontWeight}
317+
{item}
318+
mainCol={1}
319+
showBottomLine={showBorders}
320+
{subtitleProps}
321+
{titleHolderProps}
322+
{titleProps}
323+
{...templateProps}
324+
on:tap={(event) => onTap(item, event)}>
325+
<label
326+
col={0}
327+
color={item.color || colorOnSurface}
328+
fontFamily={$fonts.mdi}
329+
fontSize={(item.iconFontSize || iconFontSize) * $fontScale}
330+
paddingLeft="8"
331+
text={item.icon}
332+
verticalAlignment="center"
333+
width={iconFontSize * 2} />
334+
</svelte:component>
335+
</Template>
277336
<Template key="image" let:item>
278337
<svelte:component
279338
this={component}
280339
{borderRadius}
281340
columns="auto,*"
282341
{fontSize}
283342
{fontWeight}
284-
{iconFontSize}
343+
iconFontSize={item.iconFontSize || iconFontSize}
285344
{item}
286345
mainCol={1}
287-
{onLongPress}
288346
showBottomLine={showBorders}
289347
{subtitleProps}
290348
title={item.name}
291349
{titleHolderProps}
292350
{titleProps}
293351
{...templateProps}
294352
on:tap={(event) => onTap(item, event)}>
295-
<image borderRadius={4} col={0} colorMatrix={item.imageMatrix} marginBottom={5} marginRight={10} marginTop={5} src={item.image} />
353+
<image borderRadius={4} col={0} marginBottom={5} marginRight={10} marginTop={5} src={item.image} />
296354
</svelte:component>
297355
</Template>
356+
<Template key="slider" let:item>
357+
<SettingsSlider {...item} onChange={(value, event) => onChange?.(item, value, event)} />
358+
</Template>
298359
<Template let:item>
299360
<svelte:component
300361
this={component}
301362
{borderRadius}
302363
{fontSize}
303364
{fontWeight}
304-
{iconFontSize}
365+
iconFontSize={item.iconFontSize || iconFontSize}
305366
{item}
306-
{onLongPress}
307367
showBottomLine={showBorders}
308368
{subtitleProps}
309369
{titleHolderProps}

0 commit comments

Comments
 (0)