Further work on infobox, styling everything, removing clutter

UI/FeatureInfoBox.ts

@@ -0,0 +1,115 @@
+import {UIElement} from "./UIElement";
+import {TagMapping, TagMappingOptions} from "./TagMapping";
+import {Question, QuestionDefinition} from "../Logic/Question";
+import {UIEventSource} from "./UIEventSource";
+import {VerticalCombine} from "./VerticalCombine";
+import {QuestionPicker} from "./QuestionPicker";
+import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
+import {ImageCarousel} from "./Image/ImageCarousel";
+import {Changes} from "../Logic/Changes";
+import {UserDetails} from "../Logic/OsmConnection";
+import {Img} from "./Img";
+import {CommonTagMappings} from "../Layers/CommonTagMappings";
+import {Tag} from "../Logic/TagsFilter";
+
+export class FeatureInfoBox extends UIElement {
+
+    private _tagsES: UIEventSource<any>;
+
+
+    private _title: UIElement;
+    private _osmLink: UIElement;
+    private _infoElements: UIElement[]
+
+
+    private _questions: QuestionPicker;
+
+    private _changes: Changes;
+    private _userDetails: UIEventSource<UserDetails>;
+    private _imageElement: ImageCarousel;
+
+
+    constructor(
+        tagsES: UIEventSource<any>,
+        elementsToShow: (TagMappingOptions | QuestionDefinition | UIElement)[],
+        questions: QuestionDefinition[],
+        changes: Changes,
+        userDetails: UIEventSource<UserDetails>,
+    ) {
+        super(tagsES);
+        this._tagsES = tagsES;
+        this._changes = changes;
+        this._userDetails = userDetails;
+
+        this._imageElement = new ImageCarousel(this._tagsES);
+
+        this._questions = new QuestionPicker(
+            this._changes.asQuestions(questions), this._tagsES);
+
+        var infoboxes: UIElement[] = [];
+        for (const uiElement of elementsToShow) {
+            if (uiElement instanceof QuestionDefinition) {
+                const questionDef = uiElement as QuestionDefinition;
+                const question = new Question(this._changes, questionDef);
+                infoboxes.push(question.CreateHtml(this._tagsES));
+            } else if (uiElement instanceof TagMappingOptions) {
+                const tagMappingOpt = uiElement as TagMappingOptions;
+                infoboxes.push(new TagMapping(tagMappingOpt, this._tagsES))
+            } else {
+                const ui = uiElement as UIElement;
+                infoboxes.push(ui);
+            }
+
+        }
+
+        this._title = infoboxes.shift();
+        this._infoElements = infoboxes;
+
+        this._osmLink = new TagMapping(CommonTagMappings.osmLink, this._tagsES);
+
+
+    }
+
+    InnerRender(): string {
+
+
+        return "<div class='featureinfobox'>" +
+            "<div class='featureinfoboxtitle'>" +
+            "<span>" + this._title.Render() + "</span>" +
+            this._osmLink.Render() +
+            "</div>" +
+            
+            "<div class='infoboxcontents'>" +
+
+            this._imageElement.Render() +
+
+            new VerticalCombine(this._infoElements).Render() +
+            "   <span class='infobox-questions'>" +
+            this._questions.Render() +
+            "   </span>" +
+            "</div>" +
+            "" +
+            "</div>";
+    }
+
+    Activate() {
+        super.Activate();
+        this._imageElement.Activate();
+    }
+
+    Update() {
+        super.Update();
+        this._imageElement.Update();
+    }
+
+    private generateInfoBox() {
+        var infoboxes: UIElement[] = [];
+
+        infoboxes.push(new OsmImageUploadHandler(
+            this._tagsES, this._userDetails, this._changes
+        ).getUI());
+
+
+        return new VerticalCombine(infoboxes);
+    }
+}