config.xml

@@ -1,8 +1,8 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="1.6.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.starter" version="1.5.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>METAsocket</name>
     <description>WowApp's awesome instant messenger for the whole Greifentanzgeschwader</description>
-    <author email="webmaster@sabolli.de" href="https://sabolli.de/wow/metasocket/">sabolli</author>
+    <author email="webmaster@sabolli.de" href="https://sabolli.de/metasocket/">sabolli</author>
     <content src="index.html" />
     <access origin="*" />
     <allow-intent href="http://*/*" />

src/app/app.config.ts

@@ -1,4 +1,4 @@
 export default class AppConfig
 {
-  public static readonly VERSION: string = '1.6.5';
+  public static readonly VERSION: string = '1.5.0';
 }

src/app/chat/chat.component.html

@@ -1,4 +1,4 @@
-<div #chat id="chat" (touchmove)="onChatTouch($event)" (touchend)="onTouchEnd()">
+<div id="chat">
   <div #errorMessage id="error-message">Konnte keine Verbindung herstellen!</div>
 
   <div #chatPostArea id="chat-post-area" (scroll)="onScroll()">
@@ -19,14 +19,3 @@
     <button #buttonSend class="button-send-offline" (click)="postMessage()" id="button-send"></button>
   </div>
 </div>
-
-<div #sidebarBackground id="sidebar-background" (click)="pushAwaySidebar()"></div>
-
-<div #sidebar id="sidebar" (touchmove)="onSidebarTouch($event)" (touchend)="onTouchEnd()">
-  <div id="userlist">
-    <div *ngFor="let user of userList" class="user">
-      <div class="userlist-element"><img src="{{url}}/user/{{user.userId}}/avatar?token={{userToken}}" class="chat-avatar userlist-avatar"></div>
-      <div class="userlist-element"><div class="">{{user.username}}</div></div>
-    </div>
-  </div>
-</div>

src/app/chat/chat.component.ts

@@ -15,7 +15,6 @@ import FullscreenNotification from '../fullscreen.notification';
 import AppConfig from '../app.config';
 import FullscreenDialog from '../fullscreen.dialog';
 import AppStorage from '../app.storage';
-import {User} from '../user';
 
 const {App} = Plugins;
 
@@ -25,18 +24,12 @@ const {App} = Plugins;
   styleUrls: ['./chat.component.scss'],
 })
 export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, WebsocketListener {
-  public static readonly SWIPE_SENSITIVITY: number = 30;
-
   messages: ChatMessage[] = [];
   userToken: string;
   userId: number;
   url: string;
   chatText: string;
-  userList: User[] = [];
 
-  @ViewChild('chat') chat: ElementRef;
-  @ViewChild('sidebar') sidebar: ElementRef;
-  @ViewChild('sidebarBackground') sidebarBackground: ElementRef;
   @ViewChild('chatPostArea') chatPostArea: ElementRef;
   @ViewChild('errorMessage') errorMessage: ElementRef;
   @ViewChild('chatTextArea') chatTextArea: ElementRef;
@@ -49,9 +42,6 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
   private hasBeenReloaded = false;
   private hasFocus = true;
   private isReconnection = false;
-  private lastTouchX = null;
-  private lastTouchY = null;
-  private isSwiping = false;
 
   public constructor(
     private apiService: ApiService,
@@ -65,17 +55,11 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.url = Setting.URL;
     this.websocketService.setListener(this);
     this.websocketService.initializeSocket(AppStorage.getChatToken());
-    this.backgroundMode.setDefaults({silent: true});
     this.backgroundMode.enable();
     this.backgroundMode.disableBatteryOptimizations();
     this.backgroundMode.disableWebViewOptimizations();
   }
 
-  private static isHorizontalSwipe(deltaX: number, deltaY: number): boolean
-  {
-    return Math.abs(deltaX) / window.innerHeight > Math.abs(deltaY) / window.innerWidth;
-  }
-
   ngAfterViewInit(): void {
     this.chatPostArea.nativeElement.scroll(0, this.chatPostArea.nativeElement.scrollHeight);
   }
@@ -246,46 +230,6 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.isReconnection = true;
   }
 
-  onChatTouch(event: TouchEvent): void
-  {
-    if (this.isSwiping) {
-      return;
-    }
-
-    if (this.getTouchEvent(event) === -1) {
-      event.preventDefault();
-
-      this.sidebar.nativeElement.id = 'sidebar-swiped-in';
-      this.sidebarBackground.nativeElement.id = 'sidebar-background-visible';
-
-      this.isSwiping = true;
-
-      setTimeout(
-        () => {
-          this.isSwiping = false;
-        },
-        500
-      );
-    }
-  }
-
-  onSidebarTouch(event: TouchEvent): void
-  {
-    if (this.isSwiping) {
-      return;
-    }
-
-    if (this.getTouchEvent(event) === 1) {
-      this.pushAwaySidebar();
-    }
-  }
-
-  onTouchEnd(): void
-  {
-    this.lastTouchX = null;
-    this.lastTouchY = null;
-  }
-
   onError(message: string): void
   {
     this.errorMessage.nativeElement.style.display = 'block';
@@ -293,38 +237,6 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.disableSendButton();
   }
 
-  onUserListInit(userList: User[]): void
-  {
-    userList.forEach(
-      (user) => {
-        if (user.userId !== this.userId && !this.hasUserListUser(user)) {
-          this.userList.push(user);
-        }
-      }
-    );
-
-    this.sortUserList();
-  }
-
-  onUserConnected(user: User): void
-  {
-    if (!this.hasUserListUser(user)) {
-      this.userList.push(user);
-      this.sortUserList();
-    }
-  }
-
-  onUserDisconnected(userId: number): void
-  {
-    for (let u = 0; u < this.userList.length; u++) {
-      if (this.userList[u].userId === userId) {
-        this.userList = this.userList.slice(0, u).concat(this.userList.slice(u + 1));
-
-        return;
-      }
-    }
-  }
-
   citeUsername(username: string): void
   {
     this.insertIntoTextareaCursorPosition('@' + username, false);
@@ -403,33 +315,6 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
           }
         }
       );
-
-    setTimeout(
-      () => {
-        this.checkVersion();
-      },
-      1000 * 60 * 60 * 24
-    );
-  }
-
-  private getTouchEvent(event: TouchEvent): number
-  {
-    if (this.lastTouchX !== null && this.lastTouchY !== null) {
-      const deltaX = event.changedTouches[0].screenX - this.lastTouchX;
-      const deltaY = event.changedTouches[0].screenY - this.lastTouchY;
-
-      this.lastTouchX = null;
-      this.lastTouchY = null;
-
-      if (ChatComponent.isHorizontalSwipe(deltaX, deltaY) && Math.abs(deltaX) >= ChatComponent.SWIPE_SENSITIVITY) {
-        return deltaX >= 0 ? 1 : -1;
-      }
-
-      return 0;
-    }
-
-    this.lastTouchX = event.changedTouches[0].screenX;
-    this.lastTouchY = event.changedTouches[0].screenY;
   }
 
   private hasChatMessage(message: ChatMessage): boolean
@@ -525,41 +410,4 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.buttonSend.nativeElement.classList.add('button-send-offline');
     this.buttonSend.nativeElement.disabled = true;
   }
-
-  pushAwaySidebar(): void
-  {
-    this.sidebar.nativeElement.id = 'sidebar-swiped-out';
-    this.sidebarBackground.nativeElement.classList.add('sidebar-fadeout');
-
-    this.isSwiping = true;
-
-    setTimeout(
-      () => {
-        this.isSwiping = false;
-        this.sidebarBackground.nativeElement.classList.remove('sidebar-fadeout');
-        this.sidebarBackground.nativeElement.id = 'sidebar-background';
-      },
-      500
-    );
-  }
-
-  private sortUserList(): void
-  {
-    this.userList.sort(
-      (a: User, b: User) => {
-        return a.username > b.username ? 1 : -1;
-      }
-    );
-  }
-
-  private hasUserListUser(user: User): boolean
-  {
-    for (const u of this.userList) {
-      if (user.userId === u.userId) {
-        return true;
-      }
-    }
-
-    return false;
-  }
 }

src/app/login/login.component.html

@@ -6,7 +6,7 @@
     <form>
       <label>
         Username
-        <input #loginName name="username" [(ngModel)] = "username" (click)="selectUsername()" required autofocus>
+        <input #loginName name="username" [(ngModel)] = "username" required autofocus>
       </label>
 
       <label>

src/app/login/login.component.ts

@@ -40,8 +40,7 @@ export class LoginComponent implements OnInit {
   login(event): void
   {
     event.target.disabled = true;
-    event.target.classList.add('submit-progress');
+    event.target.style.visibility = 'hidden';
-    this.error = null;
 
     this.apiService.getAuthToken(this.username, this.password).toPromise()
       .then(
@@ -63,7 +62,7 @@ export class LoginComponent implements OnInit {
               this.error = error.name + ': ' + error.message;
 
               event.target.disabled = false;
-              event.target.classList.remove('submit-progress');
+              event.target.style.visibility = 'visible';
             }
           );
         }
@@ -95,14 +94,8 @@ export class LoginComponent implements OnInit {
         this.password = '';
 
         event.target.disabled = false;
-        event.target.classList.remove('submit-progress');
+        event.target.style.visibility = 'visible';
       }
     );
   }
-
-  selectUsername(): void
-  {
-    this.usernameElement.nativeElement.selectionStart = 0;
-    this.usernameElement.nativeElement.selectionEnd = this.username.length;
-  }
 }

src/app/socket.user.disconnected.message.ts

@@ -1,4 +0,0 @@
-export interface SocketUserDisconnectedMessage {
-  type: number;
-  userId: number;
-}

src/app/user.ts

@@ -1,5 +0,0 @@
-export interface User
-{
-  userId: number;
-  username: string;
-}

src/app/userlist/userlist.component.html

@@ -1,3 +0,0 @@
-<p>
-  userlist works!
-</p>

src/app/userlist/userlist.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { UserlistComponent } from './userlist.component';
-
-describe('UserlistComponent', () => {
-  let component: UserlistComponent;
-  let fixture: ComponentFixture<UserlistComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ UserlistComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(UserlistComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/userlist/userlist.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-userlist',
-  templateUrl: './userlist.component.html',
-  styleUrls: ['./userlist.component.scss'],
-})
-export class UserlistComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/websocket.listener.ts

@@ -1,5 +1,4 @@
 import {ChatMessage} from './chat.message';
-import {User} from './user';
 
 export interface WebsocketListener
 {
@@ -11,11 +10,5 @@ export interface WebsocketListener
 
   onReconnect(): void;
 
-  onUserListInit(userList: User[]): void;
-
-  onUserConnected(user: User): void;
-
-  onUserDisconnected(userId: number): void;
-
   onError(message: string): void;
 }

src/app/websocket.service.ts

@@ -6,7 +6,6 @@ import {SocketReceivedChatMessage} from './socketReceivedChatMessage';
 import {WebsocketListener} from './websocket.listener';
 import {SocketSendMessage} from './socket.send.message';
 import {SocketKeepaliveMessage} from './socket.keepalive.message';
-import {User} from './user';
 
 @Injectable({
   providedIn: 'root'
@@ -31,8 +30,7 @@ export class WebsocketService {
 
   destroy(): void
   {
-    this.isReconnectDesired = false;
+    this.socket = null;
-    this.socket.close();
   }
 
   setListener(listener: WebsocketListener): void {
@@ -86,31 +84,14 @@ export class WebsocketService {
 
       case Response.REGISTRATION_MESSAGE:
         this.userList.set(response.userId, response.username);
-        this.listener.onUserConnected({userId: response.userId, username: response.username});
         break;
 
       case Response.USERLIST:
-        const userList: User[] = [];
-
         response.users.forEach(
           (user) => {
             this.userList.set(user.userId, user.username);
-
-            userList.push(
-              {
-                userId: user.userId,
-                username: user.username,
-              }
-            );
           }
         );
-
-        this.listener.onUserListInit(userList);
-
-        break;
-
-      case Response.USER_DISCONNECTED:
-        this.listener.onUserDisconnected(response.userId);
         break;
 
       default:
@@ -176,6 +157,5 @@ enum Response {
   CHAT_MESSAGE = 1,
   REGISTRATION_MESSAGE,
   USERLIST,
-  KEEP_ALIVE,
+  KEEP_ALIVE
-  USER_DISCONNECTED = 5,
 }

src/global.scss

@@ -8,41 +8,10 @@
   to { background-color: rgba(0, 0, 0, 0.5) }
 }
 
-@keyframes sidebar-background-exit {
-  from { background-color: rgba(0, 0, 0, 0.5) }
-  to { background-color: rgba(0, 0, 0, 0) }
-}
-
-@keyframes chat-swipe-in {
-  from {left: -100%}
-  to {left: 0}
-}
-
-@keyframes chat-swipe-out {
-  from {left: 0}
-  to {left: -100%}
-}
-
-@keyframes sidebar-swipe-in {
-  from {right: -350px}
-  to {right: 0}
-}
-
-@keyframes sidebar-swipe-out {
-  from {right: 0}
-  to {right: -350px}
-}
-
 @keyframes fullscreen-notification-window-entrance {
   from { transform: scale(0)}
 }
 
-@keyframes progress {
-  0% {opacity: 0}
-  50% {opacity: 1.0}
-  100% {opacity: 0}
-}
-
 * {
   box-sizing: border-box;
   font-family: sans-serif;
@@ -53,7 +22,7 @@ html, body {
   background-color: #251a25;
 }
 
-#chat, #chat-swiped-in, #chat-swiped-out {
+#chat {
   background: rgb(27, 47, 114) url("assets/graphics/bg_responsive.jpg") repeat;
   margin: 0;
   font-size: 16px;
@@ -61,13 +30,13 @@ html, body {
   position: fixed;
   top: 0;
   left: 0;
-  right: 300px;
+  right: 0;
   bottom: 0;
   color: white;
 }
 
 #chat-post-area {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -78,7 +47,7 @@ html, body {
 }
 
 #chat-type-area {
-  position: absolute;
+  position: fixed;
   height: 50px;
   background-color: #cccccc;
   left: 0;
@@ -203,12 +172,6 @@ html, body {
   font-weight: bold;
 }
 
-.submit-progress {
-  animation-name: progress;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-}
-
 .app-version {
   color: white;
   margin-top: 50px;
@@ -359,111 +322,9 @@ a.notification-button {
   margin-top: 5px;
 }
 
-#sidebar, #sidebar-swiped-in, #sidebar-swiped-out {
-  position: fixed;
-  width: 300px;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #cccccc;
-  border: 2px grey solid;
-  border-top: 2px solid white;
-  border-left: 2px solid white;
-  padding: 20px;
-}
-
-#sidebar-background {
-  display: none;
-}
-
-#userlist {
-  width: 100%;
-  height: 100%;
-  flex-flow: column wrap;
-  border: 2px grey solid;
-  border-bottom: 2px solid white;
-  border-right: 2px solid white;
-  background-color: rgb(26, 37, 26);
-  color: white;
-  overflow: auto;
-}
-
-.user {
-  display: block;
-  margin: 10px;
-}
-
-.userlist-element {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.userlist-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 24px;
-}
-
 @media only screen and (max-height: 500px) {
   #login {
     position: static;
     display: block;
   }
 }
-
-@media only screen and (max-width: 800px) {
-  #sidebar, #sidebar-swiped-in, #sidebar-swiped-out {
-    max-width: 100%;
-    height: 100%;
-    right: -350px;
-    animation-duration: 0.5s;
-    box-shadow: 0 0 20px black;
-  }
-
-  #sidebar-swiped-in {
-    right: 0;
-    animation-name: sidebar-swipe-in;
-  }
-
-  #sidebar-swiped-out {
-    animation-name: sidebar-swipe-out
-  }
-
-  #sidebar-background, #sidebar-background-visible {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  #sidebar-background-visible {
-    display: block;
-    animation-name: fullscreen-notification-entrance;
-    animation-duration: 0.5s;
-  }
-
-  .sidebar-fadeout {
-    animation-name: sidebar-background-exit !important;
-    animation-duration: 0.5s;
-  }
-
-  #chat, #chat-swiped-in, #chat-swiped-out {
-    width: 100%;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    animation-duration: 0.5s;
-  }
-
-  #chat-swiped-in {
-    animation-name: chat-swipe-in;
-  }
-
-  #chat-swiped-out {
-    overflow: hidden;
-    animation-name: chat-swipe-out;
-    left: -100%;
-  }
-}