-<!--\r
- ================================================================================\r
- ECOMP Portal\r
- ================================================================================\r
- Copyright (C) 2017 AT&T Intellectual Property\r
- ================================================================================\r
- Licensed under the Apache License, Version 2.0 (the "License");\r
- you may not use this file except in compliance with the License.\r
- You may obtain a copy of the License at\r
- \r
- http://www.apache.org/licenses/LICENSE-2.0\r
- \r
- Unless required by applicable law or agreed to in writing, software\r
- distributed under the License is distributed on an "AS IS" BASIS,\r
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
- See the License for the specific language governing permissions and\r
- limitations under the License.\r
- ================================================================================\r
- -->\r
-<div class="widget-details-modal">\r
- <div id="'widgets-details-title" class="title">Widget Details</div>\r
-\r
- <div class="widget-properties-main" scroll-top="widgetDetails.scrollApi">\r
- <form id="widgets-details-form" name="widgetForm" novalidate autocomplete="off">\r
- <!-- We can remove this script once we get to AT&T Corporate Firefox version 47\r
- autocomplete="off" won't work until v47 -->\r
- <script type="text/javascript">\r
- document.getElementById("appForm").reset();\r
- </script>\r
- <div class="item required">\r
- <div class="item-label">Application Name</div>\r
- <div class="custom-select-wrap">\r
- <select id="widgets-details-select-app"\r
- class="select-field"\r
- ng-model="widgetDetails.selectedApp"\r
- ng-change="widgetDetails.updateSelectedApp();"\r
- ng-options="app.name for app in widgetDetails.availableApps track by app.id"\r
- ng-disabled="!widgetDetails.availableApps || !widgetDetails.availableApps.length"\r
- name="app"\r
- required>\r
- <option id="widgets-details-select-app-disabled" value="" disabled style="display: none;">Select application</option>\r
- </select>\r
- </div>\r
- <div class="error-container" ng-show="widgetForm.app.$dirty">\r
- <div ng-messages="widgetForm.app.$error" class="error-container">\r
- <small id="widgets-details-select-app-error-required" class="err-message" ng-message="required">Application is required</small>\r
- </div>\r
- </div>\r
- </div>\r
- <div class="item required">\r
- <div class="item-label">Widget Name</div>\r
- <input id="widgets-details-input-name"\r
- class="input-field"\r
- type="text"\r
- ng-model="widgetDetails.widget.name"\r
- name="name"\r
- maxlength="100"\r
- ng-pattern="/^[a-zA-Z0-9_\s\&]*$/"\r
- required/>\r
-\r
- <div class="error-container" ng-show="widgetDetails.conflictMessages.name">\r
- <small id="widgets-details-input-name-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.name"></small>\r
- </div>\r
- <div class="error-container" ng-show="widgetForm.name.$dirty || widgetDetails.isEditMode">\r
- <div ng-messages="widgetForm.name.$error" class="error-container">\r
- <small id="widgets-details-input-name-required" class="err-message" ng-message="required">Widget Name is required</small>\r
- <small id="widgets-details-input-name-pattern" class="err-message" ng-message="pattern">Widget Name must be letters, numbers, or underscore</small>\r
- </div>\r
- </div>\r
- </div>\r
- <div class="item required">\r
- <div class="left-item">\r
- <div class="item-label">Width</div>\r
- <input id="widgets-details-input-width"\r
- class="input-field"\r
- type="number"\r
- ng-model="widgetDetails.widget.width"\r
- name="width"\r
- min="300"\r
- required\r
- disabled/>\r
-\r
- <div class="error-container" ng-show="widgetForm.width.$dirty || widgetDetails.isEditMode">\r
- <div ng-messages="widgetForm.width.$error" class="error-container">\r
- <small id="widgets-details-input-width-required" class="err-message" ng-message="required">Widget width is required</small>\r
- <small id="widgets-details-input-min-width" class="err-message" ng-message="min">Minimum width is 300</small>\r
- </div>\r
- </div>\r
- </div>\r
- <div class="right-item required">\r
- <div class="item-label">Height</div>\r
- <input id="widgets-details-input-height"\r
- class="input-field"\r
- type="number"\r
- ng-model="widgetDetails.widget.height"\r
- name="height"\r
- min="200"\r
- required\r
- disabled/>\r
-\r
- <div class="error-container" ng-show="widgetForm.height.$dirty || widgetDetails.isEditMode">\r
- <div ng-messages="widgetForm.height.$error" class="error-container">\r
- <small id="widgets-details-input-height-required" class="err-message" ng-message="required">Widget height is required</small>\r
- <small id="widgets-details-input-height-minimum" class="err-message" ng-message="min">Minimum height is 200</small>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- <div class="item required">\r
- <div class="item-label">URL</div>\r
- <input id="widgets-details-input-URL"\r
- class="input-field"\r
- type="url"\r
- ng-model="widgetDetails.widget.url"\r
- name="url"\r
- maxlength="256"\r
- ng-pattern="widgetDetails.ECOMP_URL_REGEX"\r
- required/>\r
-\r
- <!--\r
- <div class="url-validation-button"\r
- ng-class="{'disabled': widgetForm.url.$invalid}"\r
- ng-click="(widgetForm.url.$invalid) || widgetDetails.validateUrl()">Validate URL\r
- </div>\r
- -->\r
-\r
- <div class="error-container" ng-show="widgetDetails.conflictMessages.url">\r
- <small id="widgets-details-input-URL-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.url"></small>\r
- </div>\r
- <div class="error-container" ng-show="widgetForm.url.$dirty || widgetDetails.isEditMode">\r
- <div ng-messages="widgetForm.url.$error" class="error-container">\r
- <small id="widgets-details-input-URL-required" class="err-message" ng-message="required">Widget URL is required</small>\r
- <small id="widgets-details-input-URL-pattern" class="err-message" ng-message="pattern">Incorrect URL pattern</small>\r
- </div>\r
- <!--\r
- <div class="error-container" ng-show="widgetForm.url.$valid && !widgetDetails.conflictMessages.url">\r
- <small class="err-message" ng-hide="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>\r
- <small class="valid-message" ng-show="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>\r
- </div>\r
- -->\r
- </div>\r
-\r
- </div>\r
- </form>\r
- </div>\r
- <div class="dialog-control">\r
- <span class="ecomp-save-spinner" ng-show="widgetDetails.isSaving"></span>\r
- <div id="widgets-details-next-button" class="next-button"\r
- ng-class="{disabled: widgetForm.$invalid}" ng-click="widgetDetails.saveChanges()">Save</div>\r
- <div id="widgets-details-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>\r
- </div>\r
-</div>\r
+<!--
+ ================================================================================
+ ECOMP Portal
+ ================================================================================
+ Copyright (C) 2017 AT&T Intellectual Property
+ ================================================================================
+ Licensed 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.
+ ================================================================================
+ -->
+<div class="widget-details-modal">
+ <div id="'widgets-details-title" class="title">Widget Details</div>
+
+ <div class="widget-properties-main" scroll-top="widgetDetails.scrollApi">
+ <form id="widgets-details-form" name="widgetForm" novalidate autocomplete="off">
+ <!-- We can remove this script once we get to AT&T Corporate Firefox version 47
+ autocomplete="off" won't work until v47 -->
+ <script type="text/javascript">
+ document.getElementById("appForm").reset();
+ </script>
+ <div class="item required">
+ <div class="item-label">Application Name</div>
+ <div class="custom-select-wrap">
+ <select id="widgets-details-select-app"
+ class="select-field"
+ ng-model="widgetDetails.selectedApp"
+ ng-change="widgetDetails.updateSelectedApp();"
+ ng-options="app.name for app in widgetDetails.availableApps track by app.id"
+ ng-disabled="!widgetDetails.availableApps || !widgetDetails.availableApps.length"
+ name="app"
+ required>
+ <option id="widgets-details-select-app-disabled" value="" disabled style="display: none;">Select application</option>
+ </select>
+ </div>
+ <div class="error-container" ng-show="widgetForm.app.$dirty">
+ <div ng-messages="widgetForm.app.$error" class="error-container">
+ <small id="widgets-details-select-app-error-required" class="err-message" ng-message="required">Application is required</small>
+ </div>
+ </div>
+ </div>
+ <div class="item required">
+ <div class="item-label">Widget Name</div>
+ <input id="widgets-details-input-name"
+ class="input-field"
+ type="text"
+ ng-model="widgetDetails.widget.name"
+ name="name"
+ maxlength="100"
+ ng-pattern="/^[a-zA-Z0-9_\s\&]*$/"
+ required/>
+
+ <div class="error-container" ng-show="widgetDetails.conflictMessages.name">
+ <small id="widgets-details-input-name-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.name"></small>
+ </div>
+ <div class="error-container" ng-show="widgetForm.name.$dirty || widgetDetails.isEditMode">
+ <div ng-messages="widgetForm.name.$error" class="error-container">
+ <small id="widgets-details-input-name-required" class="err-message" ng-message="required">Widget Name is required</small>
+ <small id="widgets-details-input-name-pattern" class="err-message" ng-message="pattern">Widget Name must be letters, numbers, or underscore</small>
+ </div>
+ </div>
+ </div>
+ <div class="item required">
+ <div class="left-item">
+ <div class="item-label">Width</div>
+ <input id="widgets-details-input-width"
+ class="input-field"
+ type="number"
+ ng-model="widgetDetails.widget.width"
+ name="width"
+ min="300"
+ required
+ disabled/>
+
+ <div class="error-container" ng-show="widgetForm.width.$dirty || widgetDetails.isEditMode">
+ <div ng-messages="widgetForm.width.$error" class="error-container">
+ <small id="widgets-details-input-width-required" class="err-message" ng-message="required">Widget width is required</small>
+ <small id="widgets-details-input-min-width" class="err-message" ng-message="min">Minimum width is 300</small>
+ </div>
+ </div>
+ </div>
+ <div class="right-item required">
+ <div class="item-label">Height</div>
+ <input id="widgets-details-input-height"
+ class="input-field"
+ type="number"
+ ng-model="widgetDetails.widget.height"
+ name="height"
+ min="200"
+ required
+ disabled/>
+
+ <div class="error-container" ng-show="widgetForm.height.$dirty || widgetDetails.isEditMode">
+ <div ng-messages="widgetForm.height.$error" class="error-container">
+ <small id="widgets-details-input-height-required" class="err-message" ng-message="required">Widget height is required</small>
+ <small id="widgets-details-input-height-minimum" class="err-message" ng-message="min">Minimum height is 200</small>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="item required">
+ <div class="item-label">URL</div>
+ <input id="widgets-details-input-URL"
+ class="input-field"
+ type="url"
+ ng-model="widgetDetails.widget.url"
+ name="url"
+ maxlength="256"
+ ng-pattern="widgetDetails.ECOMP_URL_REGEX"
+ required/>
+
+ <!--
+ <div class="url-validation-button"
+ ng-class="{'disabled': widgetForm.url.$invalid}"
+ ng-click="(widgetForm.url.$invalid) || widgetDetails.validateUrl()">Validate URL
+ </div>
+ -->
+
+ <div class="error-container" ng-show="widgetDetails.conflictMessages.url">
+ <small id="widgets-details-input-URL-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.url"></small>
+ </div>
+ <div class="error-container" ng-show="widgetForm.url.$dirty || widgetDetails.isEditMode">
+ <div ng-messages="widgetForm.url.$error" class="error-container">
+ <small id="widgets-details-input-URL-required" class="err-message" ng-message="required">Widget URL is required</small>
+ <small id="widgets-details-input-URL-pattern" class="err-message" ng-message="pattern">Incorrect URL pattern</small>
+ </div>
+ <!--
+ <div class="error-container" ng-show="widgetForm.url.$valid && !widgetDetails.conflictMessages.url">
+ <small class="err-message" ng-hide="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>
+ <small class="valid-message" ng-show="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>
+ </div>
+ -->
+ </div>
+
+ </div>
+ </form>
+ </div>
+ <div class="dialog-control">
+ <span class="ecomp-save-spinner" ng-show="widgetDetails.isSaving"></span>
+ <div id="widgets-details-next-button" class="next-button"
+ ng-class="{disabled: widgetForm.$invalid}" ng-click="widgetDetails.saveChanges()">Save</div>
+ <div id="widgets-details-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+ </div>
+</div>