forked from MapComplete/MapComplete
		
	
		
			
				
	
	
		
			52 lines
		
	
	
		
			No EOL
		
	
	
		
			2.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			52 lines
		
	
	
		
			No EOL
		
	
	
		
			2.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| import * as shops from "./assets/generated/layers/shops.json"
 | |
| import Combine from "./UI/Base/Combine";
 | |
| import Img from "./UI/Base/Img";
 | |
| import BaseUIElement from "./UI/BaseUIElement";
 | |
| import {VariableUiElement} from "./UI/Base/VariableUIElement";
 | |
| import LanguagePicker from "./UI/LanguagePicker";
 | |
| import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig";
 | |
| import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
 | |
| import {FixedUiElement} from "./UI/Base/FixedUiElement";
 | |
| import {TagsFilter} from "./Logic/Tags/TagsFilter";
 | |
| import {SearchablePillsSelector} from "./UI/Input/SearchableMappingsSelector";
 | |
| import {UIEventSource} from "./Logic/UIEventSource";
 | |
| 
 | |
| const mappingsRaw: MappingConfigJson[] = <any>shops.tagRenderings.find(tr => tr.id == "shop_types").mappings
 | |
| const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test"))
 | |
| 
 | |
| function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> } {
 | |
|     const el: BaseUIElement = m.then
 | |
|     let icon: BaseUIElement
 | |
|     if (m.icon !== undefined) {
 | |
|         icon = new Img(m.icon).SetClass("h-8 w-8 pr-2")
 | |
|     } else {
 | |
|         icon = new FixedUiElement("").SetClass("h-8 w-1")
 | |
|     }
 | |
|     const show = new Combine([
 | |
|         icon,
 | |
|         el.SetClass("block-ruby")
 | |
|     ]).SetClass("flex items-center")
 | |
| 
 | |
|     return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if};
 | |
| 
 | |
| }
 | |
| const search = new UIEventSource("")
 | |
| const sp = new SearchablePillsSelector(
 | |
|     mappings.map(m => fromMapping(m)),
 | |
|     {
 | |
|         noMatchFound: new VariableUiElement(search.map(s => "Mark this a `"+s+"`")),
 | |
|         onNoSearch: new FixedUiElement("Search in "+mappingsRaw.length+" categories"),
 | |
|         selectIfSingle: true,
 | |
|         searchValue: search
 | |
|     }
 | |
| )
 | |
| 
 | |
| sp.AttachTo("maindiv")
 | |
| 
 | |
| const lp = new LanguagePicker(["en", "nl"], "")
 | |
| 
 | |
| new Combine([
 | |
|     new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))),
 | |
|     lp
 | |
| ]).SetClass("flex flex-col")
 | |
|     .AttachTo("extradiv") |