[PORTAL-16 PORTAL-18] Widget ms; staging
[portal.git] / ecomp-portal-FE-common / client / app / views / widgets / widget-details-dialog / widget-details.modal.html
index 46a5b1c..0f77ef6 100644 (file)
-<!--\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>