basic set up for variable inputs and theme dropdown

admin/package.json

@@ -21,7 +21,7 @@
  },
  "dependencies": {
  "@iarna/toml": "^2.2.3",
- "@mozilla/lilypad-ui": "^1.8.2",
+ "@mozilla/lilypad-ui": "^1.8.6",
  "aframe": "github:mozillareality/aframe#hubs/master",
  "bitecs": "github:mozilla/bitECS#hubs-patches",
  "classnames": "^2.2.5",

admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx

@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from 'react';
+// import theme from "../../utils/sample-theme";
+import {Button, Input, Select} from '@mozilla/lilypad-ui'
+
+const ThemeBuilder = ({config}) => {
+ const themes = JSON.parse(config?.hubs?.theme?.themes)
+ const formattedThemes = themes.map(theme => ({title: theme.name, value: theme.id}));
+
+ const [selectedTheme, setSelectedTheme] = useState(themes.find(theme => !!theme?.default))
+
+ const onChange = e => {
+ setSelectedTheme(themes.find(theme => theme.id === e.target.value))
+ }
+
+ const onSubmit = e => {
+ e.preventDefault()
+ console.log(selectedTheme)
+ }
+
+ const onVariableChange = (e, key )=> {
+ console.log(e.target.value, key)
+ e.preventDefault()
+ e.persist()
+ setSelectedTheme(prevState => {
+ console.log(prevState)
+ return {...prevState, variables: {...prevState.variables, [key]: e.target.value}}
+ })
+ }
+
+ useEffect(() => {
+ console.log(selectedTheme)
+ }, [selectedTheme])
+
+ return (
+ <div>
+ <Select label="Themes" options={formattedThemes} name="Themes" value={selectedTheme.id} onChange={onChange}/>
+ <form onSubmit={onSubmit} >
+ {Object.entries(selectedTheme.variables).map(([key, value]) => {
+ return <Input label={key} name={key} value={value} onChange={e => onVariableChange(e, key)}/>
+ })}
+ <Button type="submit" text="Submit" label="Submit" />
+ </form>
+ </div>
+ )
+}
+
+export default ThemeBuilder

admin/src/react-components/service-editor.js

@@ -38,6 +38,7 @@ import {
  getAdminInfo
 } from "../utils/ita";
 import * as AppConfigUtils from "../utils/app-config";
+import ThemeBuilder from "./ThemeBuilder/ThemeBuilder";
 
 const qs = new URLSearchParams(location.hash.split("?")[1]);
 
@@ -429,7 +430,8 @@ class ConfigurationEditor extends Component {
  const configurables = this.getFilteredDescriptors(theme);
  const getInput = ([path, descriptor]) => this.renderConfigurable(path, descriptor, getConfigValue(config, path));
 
- return (
+ return (<>
+ <ThemeBuilder config={config}/>
  <form onSubmit={this.onSubmit.bind(this)}>
  <h3 className="heading-sm mb-24">Nametags</h3>
  {getInput(configurables[0])}
@@ -466,6 +468,7 @@ class ConfigurationEditor extends Component {
  )}
  </div>
  </form>
+ </>
  );
  }