First steps for import helper

UI/BigComponents/BackToIndex.ts

@@ -0,0 +1,20 @@
+import {SubtleButton} from "../Base/SubtleButton";
+import Combine from "../Base/Combine";
+import Svg from "../../Svg";
+import Translations from "../i18n/Translations";
+import BaseUIElement from "../BaseUIElement";
+
+export default class BackToIndex extends SubtleButton {
+    
+    constructor(message? : string | BaseUIElement) {
+        super(
+            Svg.back_svg().SetStyle("height: 1.5rem;"),
+           message ?? Translations.t.general.backToMapcomplete,
+            {
+                url: "./index.html"
+            }
+        )
+    }
+    
+    
+}

UI/BigComponents/MoreScreen.ts

@@ -110,7 +110,7 @@ export default class MoreScreen extends Combine {
             ]), {url: linkText, newTab: false});
     }
 
-    private static CreateProffessionalSerivesButton() {
+    public static CreateProffessionalSerivesButton() {
         const t = Translations.t.professional.indexPage;
         return new Combine([
             new Title(t.hook, 4),

UI/ImportHelperGui.ts

@@ -0,0 +1,60 @@
+import {FixedUiElement} from "./Base/FixedUiElement";
+import {LoginToggle} from "./Popup/LoginButton";
+import {OsmConnection} from "../Logic/Osm/OsmConnection";
+import UserRelatedState from "../Logic/State/UserRelatedState";
+import Combine from "./Base/Combine";
+import BackToIndex from "./BigComponents/BackToIndex";
+import BaseUIElement from "./BaseUIElement";
+import TableOfContents from "./Base/TableOfContents";
+import LanguagePicker from "./LanguagePicker";
+import Translations from "./i18n/Translations";
+import Constants from "../Models/Constants";
+import Toggle from "./Input/Toggle";
+import MoreScreen from "./BigComponents/MoreScreen";
+import Title from "./Base/Title";
+
+export default class ImportHelperGui extends LoginToggle{
+
+    constructor() {
+        const t = Translations.t.importHelper;
+        
+        const state = new UserRelatedState(undefined)
+
+        const leftContents: BaseUIElement[] = [
+            new BackToIndex().SetClass("block pl-4"),
+            LanguagePicker.CreateLanguagePicker(Translations.t.importHelper.title.SupportedLanguages())?.SetClass("mt-4 self-end flex-col"),
+        ].map(el => el?.SetClass("pl-4"))
+
+        const leftBar = new Combine([
+            new Combine(leftContents).SetClass("sticky top-4 m-4")
+        ]).SetClass("block w-full md:w-2/6 lg:w-1/6")
+        
+        
+        super(
+            
+            new Toggle(
+            new Combine([
+                leftBar,
+                new Combine([
+                    new Title(t.title,1),
+                    t.description
+                ]).SetClass("flex flex-col m-8")
+            ]).SetClass("block md:flex")
+            
+            ,
+                new Combine([
+                    t.lockNotice.Subs(Constants.userJourney),
+                    MoreScreen.CreateProffessionalSerivesButton()
+                ])
+                
+                ,
+                state.osmConnection.userDetails.map(ud => ud.csCount >= Constants.userJourney.importHelperUnlock)),
+            
+            "Login needed...",
+            state)
+    }
+
+}
+
+
+new ImportHelperGui().AttachTo("main")

UI/ProfessionalGui.ts

@@ -6,9 +6,8 @@ import Toggleable, {Accordeon} from "./Base/Toggleable";
 import List from "./Base/List";
 import BaseUIElement from "./BaseUIElement";
 import LanguagePicker from "./LanguagePicker";
-import {SubtleButton} from "./Base/SubtleButton";
-import Svg from "../Svg";
 import TableOfContents from "./Base/TableOfContents";
+import BackToIndex from "./BigComponents/BackToIndex";
 
 class Snippet extends Toggleable {
     constructor(translations, ...extraContent: BaseUIElement[]) {
@@ -40,7 +39,7 @@ class SnippetContent extends Combine {
     }
 }
 
-export default class ProfessionalGui {
+class ProfessionalGui {
 
 
     constructor() {
@@ -93,16 +92,8 @@ export default class ProfessionalGui {
         ]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
 
 
-        const backToIndex = new Combine([new SubtleButton(
-            Svg.back_svg().SetStyle("height: 1.5rem;"),
-            t.backToMapcomplete,
-            {
-                url: "./index.html"
-            }
-        )]).SetClass("block")
-
         const leftContents: BaseUIElement[] = [
-            backToIndex,
+            new BackToIndex().SetClass("block"),
             new TableOfContents(content, {
                 noTopLevel: true,
                 maxDepth: 2
@@ -110,6 +101,7 @@ export default class ProfessionalGui {
             
             LanguagePicker.CreateLanguagePicker(Translations.t.professional.title.SupportedLanguages())?.SetClass("mt-4 self-end flex-col"),
         ].map(el => el?.SetClass("pl-4"))
+        
         const leftBar = new Combine([
             new Combine(leftContents).SetClass("sticky top-4 m-4")
         ]).SetClass("block w-full md:w-2/6 lg:w-1/6")