| <div class="content-page"> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <page-title icon="🔿" title="Send Notification"></page-title> |
| |
| |
| <a style="float: right" target="_blank" href="http://apigee.com/docs/usergrid/content/push-notifications" class="notifications-links">Learn more in our docs</a> |
| |
| <form id="query-inputs" class="notifcations-form" ng-submit="scheduleNotification()" novalidate name="send"> |
| <h4>Notifier and Recipients</h4> |
| Choose the Notifier (a configured notification service) to connect with for this push notification. Only users |
| with devices registered with this notifier will receive the push notification. If a group is selected, only the users |
| in the selected goup, with devices registered with this notifier, will receive the push notification. |
| |
| <br/><br/> |
| <label for="send-notification-notifier">Notifier:</label> |
| <select name="notifierName" ng-required="true" id="send-notification-notifier" ng-model="send.selectedNotifier" ng-options="n._data.name for n in notifiersCollection"> |
| <option value="">Choose Notifier</option> |
| </select> |
| <span ng-show="send.notifierName.$dirty && send.notifierName.$error.required"> |
| You must choose a notifier |
| </span> |
| |
| <div class="control-group"> |
| <input type="radio" name="notification-user-group" id="notification-user-group-all" ng-required="true" ng-model="send.controlGroup" value="all" checked> All Devices |
| <input type="radio" name="notification-user-group" id="notification-user-group-devices" ng-required="true" ng-model="send.controlGroup" value="devices"> Devices |
| <input type="radio" name="notification-user-group" id="notification-user-group-users" ng-required="true" ng-model="send.controlGroup" value="users"> Users |
| <input type="radio" name="notification-user-group" id="notification-user-group-group" ng-required="true" ng-model="send.controlGroup" value="groups"> Groups |
| </div> |
| |
| <div class="control-group"> |
| <div id="notificaitons-devices-select-container" ng-show="send.controlGroup === 'devices'"> |
| Enter the device uuids:<br> |
| <textarea id="devices-list" placeholder="device-UUID-1,device-UUID-2,device-UUID-3,etc..." ng-model="send.devices" ng-list class="span6 pull-left" rows="5" ng-required="send.controlGroup === 'devices'"></textarea> |
| </div> |
| |
| <div id="notificaitons-users-select-container" ng-show="send.controlGroup === 'users'"> |
| Enter the usernames:<br> |
| <textarea id="user-list" placeholder="username1,username2,username3,etc..." ng-model="send.users" ng-list class="span6 pull-left" rows="5" ng-required="send.controlGroup === 'users'"></textarea> |
| <!--br> |
| <div class="thingy"> |
| Or, use a form to look them up:<br> |
| <a style="margin-right: 15px;" class="btn btn-primary" data-toggle="modal" href="#dialog-form-add-user-to-notification"> Add User</a> |
| </div--> |
| </div> |
| <div id="notificaitons-group-select-container" ng-show="send.controlGroup === 'groups'"> |
| Enter the group paths:<br> |
| <textarea id="group-list" placeholder="group-path-1,group-path-2,group-path-3,etc..." ng-model="send.groups" ng-list class="span6 pull-left" rows="5" ng-required="send.controlGroup === 'groups'"></textarea> |
| <!--br> |
| <div class="thingy"> |
| <a style="margin-right: 15px;" class="btn btn-primary" data-toggle="modal" href="#dialog-form-add-group-to-notification"> Add Group</a> |
| </div--> |
| </div> |
| </div> |
| |
| <hr> |
| <h4>Notifier Message</h4> |
| Edit the "alert" message in the JSON payload. |
| <div class="controls"> |
| <div> |
| <textarea id="notification-json" class="span6 pull-left" rows="3" ng-model="send.notifierMessage" required ug-validate>Your text here</textarea> |
| <br> |
| <a target="_blank" href="http://apigee.com/docs/usergrid/content/push-notifications" class="notifications-links">Learn more about messages in our docs</a> |
| </div> |
| </div> |
| <div style="display: none;"> |
| <a class="btn" id="reset-notifications-payload" >Reset Payload</a> |
| <a class="btn" id="validate-notifications-json" >Validate JSON</a> |
| <span id="notifications-json-status" class="alert" style="width: 400px;">Validate your JSON!</span> |
| </div> |
| <hr> |
| <h4>Delivery</h4> |
| Select whether to schedule this push notification for immediate delivery or at a future date and time. |
| |
| <div class="control-group"> |
| <input type="radio" name="notification-schedule-time" id="notification-schedule-time-now" ng-required="true" ng-model="send.deliveryPeriod" value="now" checked> Now |
| <input type="radio" name="notification-schedule-time" id="notification-schedule-time-later" ng-required="true" ng-model="send.deliveryPeriod" value="later"> Schedule for later |
| </div> |
| <div id="notification-schedule-time-controls" ng-show="send.deliveryPeriod === 'later'"> |
| <div id="notifications-start-time-span" class="control-group"> |
| <label class="control-label" for="notification-schedule-time-date">Start Date/Time:</label> |
| <div class="controls"> |
| <input type="text" id="notification-schedule-time-date" name="schedule-date" class="input-small"/> |
| <input type="text" id="notification-schedule-time-time" name="schedule-time" value="12:00 AM" class="input-small"/> (<span id="gmt_display"></span>) |
| </div> |
| </div> |
| </div> |
| <br/> |
| <p ng-show="send.$invalid">Please complete all required information before submitting.</p> |
| <input type="submit" ng-disabled="!send.$valid" name="submit" class="btn btn-primary" /> |
| </form> |
| </div> |
| |
| |
| <form id="dialog-form-add-user-to-notification" class="modal hide fade"> |
| <div class="modal-header"> |
| <a class="close" data-dismiss="modal">×</a> |
| <h4>Add a user to this Notification</h4> |
| </div> |
| <div class="modal-body"> |
| <p class="validateTips">Search for the user you want to add to this notification.</p> |
| <fieldset> |
| <div class="control-group"> |
| <label for="search-notification-user-name-input">User</label> |
| <div class="controls"> |
| <input type="text" name="search-notification-user-name-input" id="search-notification-user-name-input" class="input-xlarge"/> |
| <p class="help-block hide"></p> |
| </div> |
| </div> |
| </fieldset> |
| </div> |
| <div class="modal-footer"> |
| <input type="submit" class="btn btn-usergrid" value="Add"/> |
| <input type="reset" class="btn" value="Cancel" data-dismiss="modal"/> |
| </div> |
| </form> |
| |
| <form id="dialog-form-add-group-to-notification" class="modal hide fade"> |
| <div class="modal-header"> |
| <a class="close" data-dismiss="modal">×</a> |
| <h4>Add a group to this Notification</h4> |
| </div> |
| <div class="modal-body"> |
| <p class="validateTips">Search for the group you want to add to this notification.</p> |
| <fieldset> |
| <div class="control-group"> |
| <label for="search-notification-group-name-input">Group</label> |
| <div class="controls"> |
| <input type="text" name="search-notification-group-name-input" id="search-notification-group-name-input" class="input-xlarge"/> |
| <p class="help-block hide"></p> |
| </div> |
| </div> |
| </fieldset> |
| </div> |
| <div class="modal-footer"> |
| <input type="submit" class="btn btn-usergrid" value="Add"/> |
| <input type="reset" class="btn" value="Cancel" data-dismiss="modal"/> |
| </div> |
| </form> |
