Add google docs widget

Adds #90

config/integrations/googledocs_widget.yaml

@@ -0,0 +1,7 @@
+# All this configuration does is make "Google Docs Widget" available in the UI
+type: "widget"
+integrationType: "googledocs"
+enabled: true
+name: "Google Docs"
+about: "Collaborate on and share documents using Google Docs"
+avatar: "img/avatars/googledocs.png"

web/app/configs/widget/googledocs/googledocs-config.component.html

@@ -0,0 +1,59 @@
+<div class="config-wrapper">
+    <img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
+    <div class="config-header">
+        <img [src]="integration.avatar">
+        <h4>Configure embedded Google Docs</h4>
+    </div>
+    <div class="config-content" *ngIf="isLoading">
+        <div class="row">
+            <div class="col-md-12">
+                <p><i class="fa fa-circle-notch fa-spin"></i> Loading widgets...</p>
+            </div>
+        </div>
+    </div>
+    <div class="config-content" *ngIf="!isLoading">
+        <form (submit)="validateAndAddWidget()" novalidate name="addForm">
+            <div class="row">
+                <div class="col-md-8" style="margin-bottom: 12px;">
+                    <div class="input-group input-group-sm">
+                        <input type="text" class="form-control"
+                               placeholder="Link to Google Doc"
+                               [(ngModel)]="newWidgetUrl" name="newWidgetUrl"
+                               [disabled]="isUpdating">
+                        <span class="input-group-btn">
+                            <button type="submit" class="btn btn-success" [disabled]="isUpdating">
+                                <i class="fa fa-plus-circle"></i> Add Widget
+                            </button>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-md-12 removable widget-item" *ngFor="let widget of widgets trackById">
+                    {{ widget.name || widget.url }} <span class="text-muted" *ngIf="widget.ownerId">(added by {{ widget.ownerId }})</span>
+                    <button type="button" class="btn btn-outline-info btn-sm" (click)="editWidget(widget)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        <i class="fa fa-pencil"></i> Edit Widget
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeWidget(widget)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        <i class="fa fa-times"></i> Remove Widget
+                    </button>
+                    <div *ngIf="isWidgetToggled(widget)">
+                        <label class="col-md-8" style="padding-left: 0; margin-left: 0;">
+                            Google Doc
+                            <input type="text" class="form-control"
+                                   placeholder="Link to Google Doc"
+                                   [(ngModel)]="widget.newUrl" name="widget-url-{{widget.id}}"
+                                   [disabled]="isUpdating">
+                        </label>
+                        <button type="button" class="btn btn-primary btn-sm" (click)="validateAndSaveWidget(widget)">
+                            Save
+                        </button>
+                        <button type="button" class="btn btn-outline btn-sm" (click)="toggleWidget(widget)">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

web/app/configs/widget/googledocs/googledocs-config.component.scss

@@ -0,0 +1,4 @@
+// component styles are encapsulated and only applied to their components
+.widget-item {
+  margin-top: 3px;
+}

web/app/configs/widget/googledocs/googledocs-config.component.ts

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { WidgetComponent } from "../widget.component";
+import { ScalarService } from "../../../shared/scalar.service";
+import { ConfigModalContext } from "../../../integration/integration.component";
+import { ToasterService } from "angular2-toaster";
+import { Widget, WIDGET_DIM_GOOGLEDOCS, WIDGET_SCALAR_GOOGLEDOCS } from "../../../shared/models/widget";
+
+@Component({
+    selector: "my-googledocswidget-config",
+    templateUrl: "googledocs-config.component.html",
+    styleUrls: ["googledocs-config.component.scss", "./../../config.component.scss"],
+})
+export class GoogleDocsWidgetConfigComponent extends WidgetComponent implements ModalComponent<ConfigModalContext> {
+
+    constructor(public dialog: DialogRef<ConfigModalContext>,
+                toaster: ToasterService,
+                scalarService: ScalarService,
+                window: Window) {
+        super(
+            toaster,
+            scalarService,
+            dialog.context.roomId,
+            window,
+            WIDGET_DIM_GOOGLEDOCS,
+            WIDGET_SCALAR_GOOGLEDOCS,
+            dialog.context.integration,
+            dialog.context.integrationId,
+            "Google Docs",
+            "generic", // wrapper
+            "googleDocs" // scalar wrapper
+        );
+    }
+
+    public validateAndAddWidget() {
+        // We don't actually validate anything here, but we could
+        this.addWidget({dimOriginalUrl: this.newWidgetUrl});
+    }
+
+    public validateAndSaveWidget(widget: Widget) {
+        // We don't actually validate anything here, but we could
+        this.saveWidget(widget);
+    }
+}

web/app/shared/integration.service.ts

@@ -11,11 +11,12 @@ import { EtherpadWidgetConfigComponent } from "../configs/widget/etherpad/etherp
 import { JitsiWidgetConfigComponent } from "../configs/widget/jitsi/jitsi-config.component";
 import {
     WIDGET_DIM_CUSTOM,
-    WIDGET_DIM_ETHERPAD,
+    WIDGET_DIM_ETHERPAD, WIDGET_DIM_GOOGLEDOCS,
     WIDGET_DIM_JITSI,
     WIDGET_DIM_TWITCH,
     WIDGET_DIM_YOUTUBE
 } from "./models/widget";
+import { GoogleDocsWidgetConfigComponent } from "../configs/widget/googledocs/googledocs-config.component";
 
 @Injectable()
 export class IntegrationService {
@@ -56,6 +57,10 @@ export class IntegrationService {
                 component: JitsiWidgetConfigComponent,
                 screenId: "type_" + WIDGET_DIM_JITSI,
             },
+            "googledocs": {
+                component: GoogleDocsWidgetConfigComponent,
+                screenId: "type_" + WIDGET_DIM_GOOGLEDOCS,
+            },
         },
     };
 

web/app/shared/models/widget.ts

@@ -16,6 +16,7 @@ export const WIDGET_DIM_YOUTUBE = "dimension-youtube";
 export const WIDGET_DIM_TWITCH = "dimension-twitch";
 export const WIDGET_DIM_ETHERPAD = "dimension-etherpad";
 export const WIDGET_DIM_JITSI = "dimension-jitsi";
+export const WIDGET_DIM_GOOGLEDOCS = "dimension-googledocs";
 
 export interface Widget {
     id: string;