some code clean up: moved serverpages in extra classes

11 files changed, 261 insertions, 197 deletions

diff --git a/src/main/manaplus/manaplus.ts b/src/main/manaplus/manaplus.ts
index 9c3336d..6088dba 100644
--- a/src/main/manaplus/manaplus.ts
+++ b/src/main/manaplus/manaplus.ts
@@ -99,6 +99,7 @@ ipcMain.on('getScreenshots', (event:any, arg:string)=> {
       event.sender.send('getScreenshots', {dir:screenshotsDir, screenshots:screenshots.reverse().slice(0, 24)});
     });
 });
+
 EventEmitter.on('Mana:openScreenshotDir', ()=>{
   shell.openItem(path.normalize(app.getPath('userData')+`/screenshots/${CurrentServer.address}/`));
 });
diff --git a/src/renderer/customEvents.ts b/src/renderer/customEvents.ts
index dbdce31..75a1ec5 100644
--- a/src/renderer/customEvents.ts
+++ b/src/renderer/customEvents.ts
@@ -1,4 +1,10 @@
-export function switchPage(sitetype:"SERVER"|"INTERN",page:string,subPage?:string){
+import { ServerSubPages } from "./gameserver/serverView/controller";
+
+export function switchPage(
+  sitetype:"SERVER"|"INTERN",
+  page:string,
+  subPage?:ServerSubPages
+){
   const event = new CustomEvent('site-changed', { detail:{sitetype, page, subPage} });
   const elements = document.getElementsByClassName("switch-page-event");
   for (let i = 0; i < elements.length; i++) {
diff --git a/src/renderer/gameserver/data.ts b/src/renderer/gameserver/data.ts
index e86c95b..e1707f6 100644
--- a/src/renderer/gameserver/data.ts
+++ b/src/renderer/gameserver/data.ts
@@ -1,9 +1,9 @@
 // This class returns Data over the gameservers until we find a better solution
-import {socialLink} from './server';
 import GameServer from './server';
 import GameServerProfile from './profile';
 import { NewsType } from './news';
 import { OnlineListParser } from './onlineCount';
+import { socialLink } from './socialLink';
 
 
 const TMW2 = new GameServer(
diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts
index 654eaac..9bdfccd 100644
--- a/src/renderer/gameserver/server.ts
+++ b/src/renderer/gameserver/server.ts
@@ -1,10 +1,15 @@
 import GameServerProfile from './profile';
 import { shell, ipcRenderer } from 'electron';
 import { switchPage } from '../customEvents';
-import { News, NewsType } from './news';
+import { NewsType } from './news';
 import { makeOnlineCounterList, OnlineListParser } from './onlineCount';
+import { socialLink } from './socialLink';
+import { PageController } from './serverView/controller';
 
 export default class GameServer {
+
+  public pageController:PageController;
+
   constructor(
     public profile: GameServerProfile,
     public menuName: string,
@@ -17,7 +22,9 @@ export default class GameServer {
     public socialLinks: socialLink[],
     public TOSLink: string,
     public OnlineList: { parser: OnlineListParser, url: string },
-  ) { }
+  ) {
+    this.pageController = new PageController(this);
+  }
 
   getMenuEntry(): HTMLElement {
     const sidebarItem = document.createElement('div');
@@ -43,7 +50,7 @@ export default class GameServer {
 
 
     title.addEventListener('click', () => {
-      switchPage("SERVER", this.name);
+      switchPage("SERVER", this.name, 'INFO');
     });
     if (this.profile.address != 'noServer') {
       let onlineBoxActive: boolean = false;
@@ -93,7 +100,7 @@ export default class GameServer {
     container.appendChild(info);
 
     info.addEventListener('click', () => {
-      switchPage("SERVER", this.name);
+      switchPage("SERVER", this.name, "INFO");
     });
 
     const news = document.createElement('div');
@@ -152,196 +159,10 @@ export default class GameServer {
     return sidebarItem;
   }
 
-  getPage(type: string): HTMLElement {
-    const page = document.createElement('div');
-    if (typeof (type) === undefined || type == null) {
-      page.appendChild(this.getInfoPage());
-    } else if (type == "SCREENSHOTS") {
-      page.appendChild(this.getScreenshotsPage());
-    } else if (type == "PREF") {
-      page.appendChild(this.getPreferencesPage());
-    } else {
-      const content = document.createElement('div');
-      content.classList.add("unknownServerPage");
-      content.innerText = `Unknown page for${this.name}`;
-      page.appendChild(content);
-    }
-    this.updateLoginTextElement();
-    return page;
-  }
-
-  private getInfoPage(): HTMLElement {
-    const content = document.createElement('div');
-    content.classList.add("infoServerPage");
-
-    const title = document.createElement('div');
-    title.classList.add("title");
-    title.innerText = this.name;
-    content.appendChild(title);
-
-    const socialContainer = document.createElement('div');
-    socialContainer.classList.add("socialContainer");
-    setTimeout(() => {
-      this.socialLinks.forEach((link) => {
-        socialContainer.appendChild(link.getHTML());
-      });
-    }, 5);
-    content.appendChild(socialContainer);
-
-    const shrtDsrption = document.createElement('div');
-    shrtDsrption.classList.add("shortDescription");
-    shrtDsrption.innerText = this.shortDescription;
-    content.appendChild(shrtDsrption);
-    if (this.newsLatestPage && this.newsLatestPage != null) {
-      const latestNews = document.createElement('div');
-      latestNews.classList.add("news");
-      content.appendChild(latestNews);
-      News.get(this.newsLatestPage.url, this.newsLatestPage.type).then((result: string) => {
-        latestNews.innerHTML = result;
-        const aTags = latestNews.getElementsByTagName("a");
-        for (var i = 0; i < aTags.length; i++) {
-          const href = aTags[i].href.toString();
-          aTags[i].addEventListener('click', () => {
-            shell.openExternal(href);
-          });
-          aTags[i].href = "#";
-        }
-      });
-    }
-
-    return content;
-  }
-
-  private getPreferencesPage(): HTMLElement {
-    const content = document.createElement('div');
-    content.classList.add("preferencesServerPage");
-
-    const title = document.createElement('h2');
-    title.innerText = `Preferences for ${this.name}`;
-    content.appendChild(title);
-
-    const loginSection = document.createElement('div');
-    loginSection.classList.add("loginSection");
-    content.appendChild(loginSection);
-
-    const loginUsernameLabel = document.createElement('label');
-    loginUsernameLabel.innerText = "Username";
-    const loginUsername = document.createElement('input') as HTMLInputElement;
-    loginUsername.value = localStorage.getItem("2_username_" + this.profile.address);
-    loginUsernameLabel.appendChild(loginUsername);
-
-    const loginPinLabel = document.createElement('label');
-    loginPinLabel.innerText = "Password";
-    const loginPin = document.createElement('input') as HTMLInputElement;
-    loginPin.type = "password";
-    loginPin.value = localStorage.getItem("2_pin_" + this.profile.address);
-    loginPinLabel.appendChild(loginPin);
-
-    const saveBtn = document.createElement('button') as HTMLButtonElement;
-    saveBtn.innerText = "save";
-
-    saveBtn.addEventListener('click', () => {
-      localStorage.setItem("2_username_" + this.profile.address, loginUsername.value);
-      localStorage.setItem("2_pin_" + this.profile.address, loginPin.value);
-      this.updateLoginTextElement();
-    });
-
-
-    loginSection.appendChild(loginUsernameLabel);
-    loginSection.appendChild(loginPinLabel);
-    loginSection.appendChild(saveBtn);
-
-    return content;
-  }
-
-  private getScreenshotsPage(): HTMLElement {
-    const screenshotContainer = document.createElement('div');
-    screenshotContainer.classList.add("screenshotsContainer");
-    screenshotContainer.id = "screenshots";
-
-    ipcRenderer.send('getScreenshots', this.profile.address);
-
-    return screenshotContainer;
-  }
-
-  updateLoginTextElement(): void {
-    const account = localStorage.getItem("2_username_" + this.profile.address);
-    const pin = localStorage.getItem("2_pin_" + this.profile.address);
-    const element = document.getElementById('LoginText');
-    if (account && pin) {
-      element.innerHTML = `Logged in as <b>${account}</b>`;
-    } else {
-      element.innerHTML = "Automatic login not set up";
-    }
-  }
-
   play() {
     const args: any = JSON.parse(JSON.stringify(this.profile));
     args.username = localStorage.getItem("2_username_" + this.profile.address);
     args.password = localStorage.getItem("2_pin_" + this.profile.address);
     ipcRenderer.send('play', args);
   }
-}
-
-export class socialLink {
-  constructor(
-    public icon: string,// has to be one from font awesome -https://fontawesome.com/icons
-    public tooltip: string,
-    public url: string
-  ) { }
-
-  getHTML(): HTMLElement {
-    //<button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
-    const element = document.createElement('button');
-    element.onclick = () => { this.open() };
-    element.innerHTML = `<i class="${this.icon}"></i>`;
-    element.title = this.tooltip;
-    return element;
-  }
-
-  open() {
-    console.log("A link was clicked!", this.url);
-    if (this.url)
-      shell.openExternal(this.url.indexOf("://") !== -1 ? this.url : `https://${this.url}`);
-  }
-}
-
-ipcRenderer.on('getScreenshots', (event: any, data: { dir: string, screenshots: string[] }) => {
-  console.log(data)
-  const screenshots = document.getElementById('screenshots');
-  if (screenshots) {
-    // Display screenshots if that tab is open
-    if (data.screenshots.length !== 0) {
-      data.screenshots.forEach((fileName: string) => {
-        const screenshot = document.createElement("div");
-        screenshot.classList.add("screenshot");
-        screenshots.appendChild(screenshot);
-        const img = document.createElement("img");
-        img.src = data.dir + fileName;
-        screenshot.appendChild(img);
-
-        // const text = document.createElement("span");
-        // text.innerText = fileName;
-        // screenshot.appendChild(text);
-        screenshot.addEventListener('dragstart', (event) => {
-          event.preventDefault()
-          ipcRenderer.send('dragFileOut', data.dir + fileName)
-        })
-
-      });
-    } else {
-      const nothingHere = document.createElement("p");
-      nothingHere.classList.add("nothingHere");
-      nothingHere.innerText = "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'."
-
-      screenshots.appendChild(nothingHere);
-    }
-
-    const openFolderButton = document.createElement('button');
-    openFolderButton.innerText = "Open folder to see all";
-    openFolderButton.addEventListener('click', () => {
-      shell.openItem(data.dir);
-    });
-    screenshots.appendChild(openFolderButton);
-  }
-})
+}
\ No newline at end of file
diff --git a/src/renderer/gameserver/serverView/controller.ts b/src/renderer/gameserver/serverView/controller.ts
new file mode 100644
index 0000000..412033c
--- /dev/null
+++ b/src/renderer/gameserver/serverView/controller.ts
@@ -0,0 +1,36 @@
+import GameServer from "../server";
+import { updateLoginTextElement, ServerPreferencesPage } from "./preferences";
+import { ServerInfoPage } from "./info";
+import { GameServerPage } from "./serverPage";
+import { ServerScreenshotPage } from "./screenshots";
+
+export type ServerSubPages = 'INFO' | 'SCREENSHOTS' | 'PREF' | 'UNKNOWN';
+
+export class PageController {
+    unknownPage: GameServerPage;
+    infoPage: ServerInfoPage;
+    scrnshtPage: ServerScreenshotPage;
+    prefPage: ServerPreferencesPage;
+
+    constructor(private server: GameServer) {
+        this.unknownPage = new GameServerPage(server);
+        this.infoPage = new ServerInfoPage(server);
+        this.scrnshtPage = new ServerScreenshotPage(server);
+        this.prefPage = new ServerPreferencesPage(server);
+    }
+
+    getPage(type: ServerSubPages): HTMLElement {
+        let page: GameServerPage = this.unknownPage;
+        if (type == "INFO") {
+            page = this.infoPage;
+        } else if (type == "SCREENSHOTS") {
+            page = this.scrnshtPage;
+        } else if (type == "PREF") {
+            page = this.prefPage;
+        }
+        const htmlElement = document.createElement('div');
+        htmlElement.appendChild(page.getPage());
+        updateLoginTextElement(this.server.profile.address);
+        return htmlElement;
+    }
+}
\ No newline at end of file
diff --git a/src/renderer/gameserver/serverView/info.ts b/src/renderer/gameserver/serverView/info.ts
new file mode 100644
index 0000000..b37562a
--- /dev/null
+++ b/src/renderer/gameserver/serverView/info.ts
@@ -0,0 +1,48 @@
+import { NewsType, News } from "../news";
+import { shell } from "electron";
+import { GameServerPage } from "./serverPage";
+
+export class ServerInfoPage extends GameServerPage {
+
+    public getPage(): HTMLElement {
+        const content = document.createElement('div');
+        content.classList.add("infoServerPage");
+
+        const title = document.createElement('div');
+        title.classList.add("title");
+        title.innerText = this.server.name;
+        content.appendChild(title);
+
+        const socialContainer = document.createElement('div');
+        socialContainer.classList.add("socialContainer");
+        setTimeout(() => {
+            this.server.socialLinks.forEach((link) => {
+                socialContainer.appendChild(link.getHTML());
+            });
+        }, 5);
+        content.appendChild(socialContainer);
+
+        const shrtDsrption = document.createElement('div');
+        shrtDsrption.classList.add("shortDescription");
+        shrtDsrption.innerText = this.server.shortDescription;
+        content.appendChild(shrtDsrption);
+        if (this.server.newsLatestPage && this.server.newsLatestPage != null) {
+            const latestNews = document.createElement('div');
+            latestNews.classList.add("news");
+            content.appendChild(latestNews);
+            News.get(this.server.newsLatestPage.url, this.server.newsLatestPage.type).then((result: string) => {
+                latestNews.innerHTML = result;
+                const aTags = latestNews.getElementsByTagName("a");
+                for (var i = 0; i < aTags.length; i++) {
+                    const href = aTags[i].href.toString();
+                    aTags[i].addEventListener('click', () => {
+                        shell.openExternal(href);
+                    });
+                    aTags[i].href = "#";
+                }
+            });
+        }
+
+        return content;
+    }
+}
\ No newline at end of file
diff --git a/src/renderer/gameserver/serverView/preferences.ts b/src/renderer/gameserver/serverView/preferences.ts
new file mode 100644
index 0000000..4697efe
--- /dev/null
+++ b/src/renderer/gameserver/serverView/preferences.ts
@@ -0,0 +1,59 @@
+import GameServerProfile from "../profile";
+import { GameServerPage } from "./serverPage";
+
+export class ServerPreferencesPage extends GameServerPage {
+
+    getPage(): HTMLElement {
+        const content = document.createElement('div');
+        content.classList.add("preferencesServerPage");
+
+        const title = document.createElement('h2');
+        title.innerText = `Preferences for ${this.server.name}`;
+        content.appendChild(title);
+
+        const loginSection = document.createElement('div');
+        loginSection.classList.add("loginSection");
+        content.appendChild(loginSection);
+
+        const loginUsernameLabel = document.createElement('label');
+        loginUsernameLabel.innerText = "Username";
+        const loginUsername = document.createElement('input') as HTMLInputElement;
+        loginUsername.value = localStorage.getItem("2_username_" + this.server.profile.address);
+        loginUsernameLabel.appendChild(loginUsername);
+
+        const loginPinLabel = document.createElement('label');
+        loginPinLabel.innerText = "Password";
+        const loginPin = document.createElement('input') as HTMLInputElement;
+        loginPin.type = "password";
+        loginPin.value = localStorage.getItem("2_pin_" + this.server.profile.address);
+        loginPinLabel.appendChild(loginPin);
+
+        const saveBtn = document.createElement('button') as HTMLButtonElement;
+        saveBtn.innerText = "save";
+
+        saveBtn.addEventListener('click', () => {
+            localStorage.setItem("2_username_" + this.server.profile.address, loginUsername.value);
+            localStorage.setItem("2_pin_" + this.server.profile.address, loginPin.value);
+            updateLoginTextElement(this.server.profile.address);
+        });
+
+
+        loginSection.appendChild(loginUsernameLabel);
+        loginSection.appendChild(loginPinLabel);
+        loginSection.appendChild(saveBtn);
+
+        return content;
+    }
+
+}
+
+export function updateLoginTextElement(serverAddress: string): void {
+    const account = localStorage.getItem("2_username_" + serverAddress);
+    const pin = localStorage.getItem("2_pin_" + serverAddress);
+    const element = document.getElementById('LoginText');
+    if (account && pin) {
+        element.innerHTML = `Logged in as <b>${account}</b>`;
+    } else {
+        element.innerHTML = "Automatic login not set up";
+    }
+}
\ No newline at end of file
diff --git a/src/renderer/gameserver/serverView/screenshots.ts b/src/renderer/gameserver/serverView/screenshots.ts
new file mode 100644
index 0000000..2d6fc62
--- /dev/null
+++ b/src/renderer/gameserver/serverView/screenshots.ts
@@ -0,0 +1,55 @@
+import { ipcRenderer, shell } from "electron";
+import { GameServerPage } from "./serverPage";
+
+export class ServerScreenshotPage extends GameServerPage {
+
+  getPage(): HTMLElement {
+    const screenshotContainer = document.createElement('div');
+    screenshotContainer.classList.add("screenshotsContainer");
+    screenshotContainer.id = "screenshots";
+
+    ipcRenderer.send('getScreenshots', this.server.profile.address);
+
+    return screenshotContainer;
+  }
+}
+
+ipcRenderer.on('getScreenshots', (event: any, data: { dir: string, screenshots: string[] }) => {
+  console.log(data)
+  const screenshots = document.getElementById('screenshots');
+  if (screenshots) {
+    // Display screenshots if that tab is open
+    if (data.screenshots.length !== 0) {
+      data.screenshots.forEach((fileName: string) => {
+        const screenshot = document.createElement("div");
+        screenshot.classList.add("screenshot");
+        screenshots.appendChild(screenshot);
+        const img = document.createElement("img");
+        img.src = data.dir + fileName;
+        screenshot.appendChild(img);
+
+        // const text = document.createElement("span");
+        // text.innerText = fileName;
+        // screenshot.appendChild(text);
+        screenshot.addEventListener('dragstart', (event) => {
+          event.preventDefault()
+          ipcRenderer.send('dragFileOut', data.dir + fileName)
+        })
+
+      });
+    } else {
+      const nothingHere = document.createElement("p");
+      nothingHere.classList.add("nothingHere");
+      nothingHere.innerText = "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'."
+
+      screenshots.appendChild(nothingHere);
+    }
+
+    const openFolderButton = document.createElement('button');
+    openFolderButton.innerText = "Open folder to see all";
+    openFolderButton.addEventListener('click', () => {
+      shell.openItem(data.dir);
+    });
+    screenshots.appendChild(openFolderButton);
+  }
+})
diff --git a/src/renderer/gameserver/serverView/serverPage.ts b/src/renderer/gameserver/serverView/serverPage.ts
new file mode 100644
index 0000000..91556b0
--- /dev/null
+++ b/src/renderer/gameserver/serverView/serverPage.ts
@@ -0,0 +1,14 @@
+import GameServer from "../server";
+
+export class GameServerPage {
+
+    constructor(protected server: GameServer) {
+
+    }
+    getPage(): HTMLElement {
+        const content = document.createElement('div');
+        content.classList.add("unknownServerPage");
+        content.innerText = `Unknown page for${this.server.name}`;
+        return content;
+    };
+}
\ No newline at end of file
diff --git a/src/renderer/gameserver/socialLink.ts b/src/renderer/gameserver/socialLink.ts
new file mode 100644
index 0000000..b56fab0
--- /dev/null
+++ b/src/renderer/gameserver/socialLink.ts
@@ -0,0 +1,24 @@
+import { shell } from "electron";
+
+export class socialLink {
+    constructor(
+      public icon: string,// has to be one from font awesome -https://fontawesome.com/icons
+      public tooltip: string,
+      public url: string
+    ) { }
+  
+    getHTML(): HTMLElement {
+      //<button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
+      const element = document.createElement('button');
+      element.onclick = () => { this.open() };
+      element.innerHTML = `<i class="${this.icon}"></i>`;
+      element.title = this.tooltip;
+      return element;
+    }
+  
+    open() {
+      console.log("A link was clicked!", this.url);
+      if (this.url)
+        shell.openExternal(this.url.indexOf("://") !== -1 ? this.url : `https://${this.url}`);
+    }
+  }
\ No newline at end of file
diff --git a/src/renderer/serverView.ts b/src/renderer/serverView.ts
index 6145e56..04ecde4 100644
--- a/src/renderer/serverView.ts
+++ b/src/renderer/serverView.ts
@@ -57,13 +57,13 @@ function updateView(){
       if(selectedServer && selectedServer !==null ){
         if(GameServerList.filter((server)=>server.name==selectedServer).length == 0){
           localStorage.removeItem("selected_server");
-          switchPage("SERVER", GameServerList[0].name);
+          switchPage("SERVER", GameServerList[0].name, 'INFO');
         }else{
-          switchPage("SERVER", selectedServer);
+          switchPage("SERVER", selectedServer, 'INFO');
         }
       }else{
         //TODO ask if is on special page like global settings first
-        switchPage("SERVER", GameServerList[0].name);
+        switchPage("SERVER", GameServerList[0].name, 'INFO');
       }
     }
   }
@@ -80,7 +80,7 @@ switchPageEvent.addEventListener("site-changed", (event:CustomEvent)=>{
     while (serverPage.firstChild) {
         serverPage.removeChild(serverPage.firstChild);
     }
-    let page = SelectedGameserver.getPage(event.detail.subPage);
+    let page = SelectedGameserver.pageController.getPage(event.detail.subPage);
     serverPage.appendChild(page);
     // page.classList.add('animated');
     // page.classList.add('fadeIn');