From 162d9d05ccaef8237c45208fa131e5d8e32db67e Mon Sep 17 00:00:00 2001
From: Oleg Kalachev <okalachev@gmail.com>
Date: Sat, 18 Aug 2018 00:41:12 +0300
Subject: [PATCH] rc: use web for statustext notifications

---
 apps/ios/Podfile                       |  1 -
 apps/ios/cleverrc/ViewController.swift | 10 +-------
 apps/ios/cleverrc/index.html           |  1 +
 apps/ios/cleverrc/main.css             | 34 ++++++++++++++++++++++++--
 apps/ios/cleverrc/telemetry.js         | 26 ++++++++++++++++++++
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/apps/ios/Podfile b/apps/ios/Podfile
index 2bffe4c7..4cf211d3 100644
--- a/apps/ios/Podfile
+++ b/apps/ios/Podfile
@@ -9,6 +9,5 @@ target 'cleverrc' do
 
   # Pods for cleverrc
   pod 'SwiftSocket', '~> 2.0'
-  pod 'NotificationBannerSwift'
 
 end
diff --git a/apps/ios/cleverrc/ViewController.swift b/apps/ios/cleverrc/ViewController.swift
index b8fb8721..b2eced68 100644
--- a/apps/ios/cleverrc/ViewController.swift
+++ b/apps/ios/cleverrc/ViewController.swift
@@ -62,15 +62,7 @@ class ViewController: UIViewController, WKScriptMessageHandler {
         } else if (message.name == "notification") {
             // Got notification message
             print(message)
-            let m = message.body as! NSDictionary;
-            let level = m["severity"] as! Int
-            if level == 4 {
-                let banner = NotificationBanner(title: m["text"] as! String, style: .warning)
-                banner.show()
-            } else {
-                let banner = NotificationBanner(title: m["text"] as! String, style: .danger)
-                banner.show()
-            }
+            tapticNotify()
         }
     }
 
diff --git a/apps/ios/cleverrc/index.html b/apps/ios/cleverrc/index.html
index 391ef631..b6cca6db 100644
--- a/apps/ios/cleverrc/index.html
+++ b/apps/ios/cleverrc/index.html
@@ -17,6 +17,7 @@
 				<div class="stick-pointer"></div>
 			</div>
 		</div>
+		<div class="notifications"></div>
 		<script src="main.js" type="text/javascript"></script>
 		<script src="telemetry.js" type="text/javascript"></script>
 	</body>
diff --git a/apps/ios/cleverrc/main.css b/apps/ios/cleverrc/main.css
index 3f3f944d..be91c227 100644
--- a/apps/ios/cleverrc/main.css
+++ b/apps/ios/cleverrc/main.css
@@ -8,7 +8,7 @@ html, body {
 }
 
 * {
-    user-select: none;
+	user-select: none;
 }
 
 .stick {
@@ -76,7 +76,8 @@ body.armed .telemetry .mode {
 
 body.low-battery .battery {
 	color: #ff554b;
-	animation: scale 0.3s 1 ease-in-out}
+	animation: scale 0.3s 1 ease-in-out
+}
 
 .logo {
 	position: absolute;
@@ -93,3 +94,32 @@ body.low-battery .battery {
 	user-select: none;
 	pointer-events: none;
 }
+
+.notifications {
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	color: white;
+}
+
+.notifications.hidden {
+	transform: translateY(-100%);
+}
+
+.notifications.anim {
+	transition: transform 0.2s ease;
+}
+
+.notifications .item {
+	font-size: 4mm;
+	-webkit-text-size-adjust: none;
+	background: #fca83a;
+	padding: 3mm;
+	padding-bottom: 1.5mm;
+}
+
+.notifications .item:last-child {
+	padding-bottom: 3mm;
+}
diff --git a/apps/ios/cleverrc/telemetry.js b/apps/ios/cleverrc/telemetry.js
index 9606136f..bae841d8 100644
--- a/apps/ios/cleverrc/telemetry.js
+++ b/apps/ios/cleverrc/telemetry.js
@@ -1,6 +1,7 @@
 var url = 'ws://192.168.11.1:9090';
 var modeEl = document.querySelector('.telemetry .mode');
 var batteryEl = document.querySelector('.battery');
+var notificationsEl = document.querySelector('.notifications');
 
 var ros = new ROSLIB.Ros({ url: url });
 
@@ -60,6 +61,30 @@ new ROSLIB.Topic({
 	}
 });
 
+var notificationHideTimer;
+
+function notify(text, severity) {
+	var item = document.createElement('div');
+	item.innerHTML = text;
+	item.classList.add('item');
+	notificationsEl.prepend(item);
+	var itemHeight = item.offsetHeight;
+	notificationsEl.classList.remove('anim');
+	notificationsEl.style.transform = 'translateY(' + -itemHeight + 'px)';
+	setTimeout(function() {
+		notificationsEl.classList.add('anim');
+		notificationsEl.style.transform = 'translateY(0)';
+	}, 0);
+	clearTimeout(notificationHideTimer);
+	notificationHideTimer = setTimeout(function() {
+		notificationsEl.style.transform = '';
+		notificationsEl.classList.add('hidden');
+		setTimeout(function() {
+			notificationsEl.innerHTML = '';
+		}, 210);
+	}, 4000);
+}
+
 new ROSLIB.Topic({
 	ros: ros,
 	name: '/mavros/statustext/recv',
@@ -73,6 +98,7 @@ new ROSLIB.Topic({
 			console.log('Filtered out message ' + message.text);
 			return;
 		}
+		notify(message.text, message.severity);
 		callNativeApp('notification', message);
 	}
 });