Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow custom model for mobile devices (plus separate settings panel) #316

Merged
merged 28 commits into from
Mar 24, 2023

Conversation

karussell
Copy link
Member

@karussell karussell commented Mar 16, 2023

In master the custom model is only active if the custom model box is visible which leads to bugs:

  1. We disabled custom model for mobile devices (small screens) as the app would become unusable with an open custom model box. And so links with a custom model in the URL will (silently) show the wrong route on mobile devices as the custom model is removed.
  2. switching between mobile and desktop sizes does not work as the custom model gets lost
  3. custom model gets lost or encoded values are not properly initialized when minimizing (with the x button) and then showing the sidebar again (hamburger button)

In this PR changes I basically moved the custom-model object state from the custom-model-editor into the SettingsStore that lives regardless of the UI component.

And so we can change how the gear wheel button works: the button now just opens a new settings box where we can change the miles/kilometer settings and also if the custom model is enabled or not. (A small shadow under the gear wheel is shown when the custom model is enabled. I'm open to suggestions to make it more obvious.)

And because the custom model editor does no longer store the custom model itself and also not if the custom model is enabled we don't have to always show the custom model editor and the above problems for small screen sizes disappear and we can additionally support custom models for mobile devices. Furthermore we can easily add new settings (like the dark mode option) without adding more stuff to the main view.

  • trigger routing if "custom_model" in URL parameter (but keep settings box closed). For that I had to use and extract the validateJson method from the custom model editor.
  • avoid route re-calculation if settings box is shown (with enabled custom model box)
  • make json invalid -> hide settings box -> now default custom model example is shown instead of invalid (completely different) custom model before -> for now fixed it and closing the settings box means "reset to custom model before invalidated one". Is different than before but IMO makes sense now.
  • fix a tricky problem with jest and ES6 modules -> no longer necessary
  • remove QueryStore.state.customModel as we have it in the SettingsStore

You can try it out here.

grafik

…is calculated because of an invalid custom model due to missing encoded values (recreation of CustomModelBox without the previously expected /info endpoint being called)
<div
ref={divElement}
className={styles.customModelBox}
style={{ display: enabled ? 'block' : 'none' }}
Copy link
Member Author

@karussell karussell Mar 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need for this anymore as we keep the customModel in the settings and can handle the visibility of the customModelBox outside of this component

Comment on lines 106 to 110
customModelEnabled: initialCustomModelStr != null,
customModelValid: false,
customModel: null,
zoom: true,
initialCustomModelStr: initialCustomModelStr,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved them into the settings state

… avoid route re-calculation if settings box is shown; 3. invalid custom model is reset to custom model before if settings box is closed
… tests: 1. insist on transpiling custom model editor code to avoid ES6 modules for jest and 2. allowJs in tsconfig and 3. explicitly transform js files using ts-jest - why?
@karussell karussell added the bug Something isn't working label Mar 20, 2023
@karussell karussell changed the title Gear as setting button Allow custom model for mobile devices (repurpose gear wheel as setting button) Mar 20, 2023
@easbar
Copy link
Member

easbar commented Mar 21, 2023

switching between mobile and desktop sizes does not work as the custom model gets lost
custom model gets lost or encoded values are not properly initialized when minimizing (with the x button) and then showing the sidebar again (hamburger button)

This is a little bug we introduce when we added the custom model examples: We overwrite the current custom model with the default example, even when we entered our own model before. It can be fixed like this:

b226360

karussell and others added 15 commits March 21, 2023 16:19
* Move custom model examples to separate file

* Minor rename

* Extract custom model area function

* Remove openSettingsHandle

* Rename custom model examples file

* Remove warning that can never occur

* Move state from settings to query store, query store even depended on settings..

* minor

* move custom model box out of settings

* oops, made a mistake

* Use string to represent custom model state!

* much better

* add todos

* Rename action
@karussell karussell changed the title Allow custom model for mobile devices (repurpose gear wheel as setting button) Allow custom model for mobile devices (plus separate settings panel) Mar 24, 2023
@karussell karussell added this to the 0.5 milestone Mar 24, 2023
@karussell karussell merged commit 710a9a5 into master Mar 24, 2023
@karussell karussell deleted the gear_as_setting_button branch March 24, 2023 08:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants