add notification widget/full system

web/static/src/ts/widgets/Discuss.ts

@@ -11,7 +11,7 @@ const template = `
         <button t-on-click="toggle">Toggle  Clock/counters</button>
         <button t-on-click="toggleColor">Toggle Color</button>
         <button t-on-click="updateState({})">Rerender this widget</button>
-        <input/>
+        <input t-ref="textinput"/>
         <t t-if="state.validcounter">
             <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
             <t t-widget="Counter" t-ref="counter2" t-props="{initialState:400}"/>
@@ -20,6 +20,7 @@ const template = `
             <t t-widget="Clock"/>
         </t>
         <t t-widget="ColorWidget" t-props="{color: state.color}"/>
+        <button t-on-click="addNotif">Add Notification</button>
     </div>
 `;
 
@@ -52,6 +53,12 @@ export class Discuss extends Widget<Env, {}> {
     const newColor = this.state.color === "red" ? "blue" : "red";
     this.updateState({ color: newColor });
   }
+
+  addNotif() {
+    const text = (<any>this.refs.textinput).value;
+    const message = `It is now ${new Date().toLocaleTimeString()}.<br/> Msg: ${text}`;
+    this.env.notifications.add({ title: "hey", message: message });
+  }
 }
 
 class ColorWidget extends Widget<Env, { color: "red" | "blue" }> {

web/static/src/ts/widgets/notification.ts

@@ -0,0 +1,20 @@
+import { Widget } from "../core/widget";
+import { Env } from "../env";
+import { INotification } from "../services/notifications";
+
+const template = `
+    <div class="o_notification">
+        <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close"/>
+        <div class="o_notification_title">
+            <t t-raw="props.title"/>
+        </div>
+        <div class="o_notification_content" t-if="props.message.length">
+            <t t-raw="props.message"/>
+        </div>
+
+    </div>`;
+
+export class Notification extends Widget<Env, INotification> {
+  name = "notification";
+  template = template;
+}