# RAMP4 Config Editor

## Documentation

The RAMP4 Config Editor is a web application built with Vue.js and Vite and can be used to easily generate and edit RAMP4 configurations.

Read the repo's README file for how to start up the app.

When you start up the app, you will notice a fancy loading screen that says waiting for config. You need to use the app's API in order to "start" the app.

The API is available on the `window` object via the `ramp4EditorAPI` property. You can read the `src/main.ts` file for further details on what goodies the API provides. The comments in there should make it fairly simple to understand.

Now, to start the app, you'll want to open the console in your browser and do:

window.ramp4EditorAPI.initialize(ramp4Config, ramp4Options)

As you'll see in the API file, the app will be started with the initial config and options if you provide them. Otherwise, respectful defaults will be used.

Now, anytime you go into any of the sections and edit any property, the change is reflected immediately, without the need to press any save button. Again, as you may see in the API, you can view your current config via:

window.ramp4EditorAPI.getConfig()

Hopefully this provides a nice basic guide on how to use the app.
If you're working on developing the app, read the next few sections for some more details.

### The Store

As mentioned previously, when you edit a config, values update immediately without needing to save. This is done by via the `pinia` store. See file `src/store.ts`. Sadly I forgot to comment this file, but the names should make it pretty obvious what each property does.

Below is a basic example of using the store. Suppose I want to add a layer to the English config. Then, you can do the following:

store.configs['en'].layers.push(myLayerConfig)

### Updating the RAMP build

Whenever you want to update the RAMP4 build to the latest and greatest, just replace the files in the `src/lib` folder.

:warning: Caution: You need to perform one additional step to get stuff to work, thanks to Vite being disrespectful.

Go to the `ramp.js` file, and at the very end, add the line:

window.RAMP = RAMP;

### Integrating into Storylines

The easiest and best way to integrate this is by creating a build of the app via `npm run build`, and then embedding the build into Storylines via `<iframe>` trickery.

Then, you can access the API via the following:

const api = myIframeElement.contentWindow.ramp4EditorAPI

Once you have access the API, you can easily set the default config at the start, and then get the updated config when the user edits it via the instructions mentioned above.

## What is done

Recall that a RAMP4 config is structured like this:

- Starting Fixtures
- Configs
* Lang 1
- Map
- Fixtures
- Layers
- Panels
- System
* Lang 2
- Map
- Fixtures
- Layers
- Panels
- System

Bearing this in mind, here are the completed parts:

- Starting Fixtures section
- System section
- Panels section
- Map section
- Layers section

## What to do next

- Fixtures section
- Add more layer types in the layers section, e.g. data layers.
- There is currently a bug in the layers section where if you switch to a different layer type, the properties from the old layer type will persist. For example, switching from MIL to Feature will keep the `sublayers` property. To solve this, create a function in the `layers.vue` file that deletes all properties that don't belong to the layer type on layer type change.
- For all the list editor components such as tile schemas, basemaps, etc., there is currently a `list.vue` component that aims to refactor them to use one generic component rather than duplicating the same code everywhere. The following still need to be refactored to use that component:
* Grid Column Config (`src/components/layers/fixtures.vue`)
* WMS Style Legends (`src/components/layers/style-legends.vue`)
* Sublayers (`src/components/layers/sublayers.vue`)
* Basemaps (`src/components/map/basemaps.vue`)
* Basemaps Layers (`src/components/map/basemaps.vue`)
* Extent Sets (`src/components/map/extent-sets.vue`)
* Lod Sets (`src/components/map/lod-sets.vue`)
* Lods (`src/components/map/lod-sets.vue`)
* Tile Schemas (`src/components/map/tile-schemas.vue`)
- One of the limitations of the app at the moment is you cannot add or delete languages. You either have the ones you passed in the initial config, or English and French by default. Consider adding a way for the user to add/remove configs for languages in the middle of the session.
- For all the list editor components, you can currently only reorder via the draggable thingy. Add up and down buttons for reordering lists, for keyboard users. These should go in `src/components/helpers/list.vue`.
- Add a way to validate current config. This could be a button that goes along with the preview. It would check whether the user has defined all properties correctly and whether they are missing anything required. If they have made errors, notify them what has gone wrong.
- Add a way to export config to a JSON file.