1<%-- 2 ~ Copyright (c) 2016 Google Inc. All Rights Reserved. 3 ~ 4 ~ Licensed under the Apache License, Version 2.0 (the "License"); you 5 ~ may not use this file except in compliance with the License. You may 6 ~ obtain a copy of the License at 7 ~ 8 ~ http://www.apache.org/licenses/LICENSE-2.0 9 ~ 10 ~ Unless required by applicable law or agreed to in writing, software 11 ~ distributed under the License is distributed on an "AS IS" BASIS, 12 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 13 ~ implied. See the License for the specific language governing 14 ~ permissions and limitations under the License. 15 --%> 16<%@ page contentType='text/html;charset=UTF-8' language='java' %> 17<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions' %> 18<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%> 19 20<html> 21 <%@ include file="header.jsp" %> 22 <link rel='stylesheet' href='/css/show_preferences.css'> 23 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> 24 <body> 25 <script> 26 var subscriptions = ${subscriptionsJson}; 27 var subscriptionMap = ${subscriptionMapJson}; 28 var allTests = ${allTestsJson}; 29 var testSet = new Set(allTests); 30 var addedSet = new Set(); 31 var removedKeySet = new Set(); 32 33 var addFunction = function() { 34 var test = $('#input-box').val(); 35 if (testSet.has(test) && !subscriptionMap[test] && !addedSet.has(test)) { 36 var icon = $('<i></i>').addClass('material-icons') 37 .html('clear'); 38 var clear = $('<a></a>').addClass('btn-flat clear-button') 39 .append(icon) 40 .click(clearFunction); 41 var span = $('<span></span>').addClass('entry valign') 42 .html(test); 43 var div = $('<div></div>').addClass('col s12 card option valign-wrapper') 44 .append(span).append(clear) 45 .prependTo('#options') 46 .hide() 47 .slideDown(150); 48 if (!subscriptionMap[test]) { 49 addedSet.add(test); 50 } else { 51 removedKeySet.delete(subscriptionMap[test].key); 52 } 53 $('#input-box').val('').focusout(); 54 if (!addedSet.size && !removedKeySet.size) { 55 $('#save-button-wrapper').slideUp(50); 56 } else { 57 $('#save-button-wrapper').slideDown(50); 58 } 59 } 60 } 61 62 var clearFunction = function() { 63 var div = $(this).parent(); 64 div.slideUp(150, function() { 65 div.remove(); 66 }); 67 var test = div.find('span').text(); 68 if (subscriptionMap[test]) { 69 removedKeySet.add(subscriptionMap[test].key); 70 } else { 71 addedSet.delete(test); 72 } 73 if (!addedSet.size && !removedKeySet.size) { 74 $('#save-button-wrapper').slideUp(50); 75 } else { 76 $('#save-button-wrapper').slideDown(50); 77 } 78 } 79 80 var submitForm = function() { 81 var added = Array.from(addedSet).join(','); 82 var removed = Array.from(removedKeySet).join(','); 83 $('#prefs-form>input[name="addedTests"]').val(added); 84 $('#prefs-form>input[name="removedKeys"]').val(removed); 85 $('#prefs-form').submit(); 86 } 87 88 $.widget('custom.sizedAutocomplete', $.ui.autocomplete, { 89 _resizeMenu: function() { 90 this.menu.element.outerWidth($('#input-box').width()); 91 } 92 }); 93 94 $(function() { 95 $('#input-box').sizedAutocomplete({ 96 source: allTests, 97 classes: { 98 'ui-autocomplete': 'card' 99 } 100 }); 101 102 $('#input-box').keyup(function(event) { 103 if (event.keyCode == 13) { // return button 104 $('#add-button').click(); 105 } 106 }); 107 108 $('.clear-button').click(clearFunction); 109 $('#add-button').click(addFunction); 110 $('#save-button').click(submitForm); 111 $('#save-button-wrapper').hide(); 112 }); 113 </script> 114 <div class='container'> 115 <div class='row'> 116 <h3 class='col s12 header'>Favorites</h3> 117 <p class='col s12 caption'>Add or remove tests from favorites to customize 118 the dashboard. Tests in your favorites will send you email notifications 119 to let you know when test cases change status. 120 </p> 121 </div> 122 <div class='row'> 123 <div class='input-field col s8'> 124 <input type='text' id='input-box'></input> 125 <label for='input-box'>Search for tests to add to favorites</label> 126 </div> 127 <div id='add-button-wrapper' class='col s1 valign-wrapper'> 128 <a id='add-button' class='btn-floating btn waves-effect waves-light red valign'><i class='material-icons'>add</i></a> 129 </div> 130 </div> 131 <div class='row' id='options'> 132 <c:forEach items='${subscriptions}' var='subscription' varStatus='loop'> 133 <div class='col s12 card option valign-wrapper'> 134 <span class='entry valign' index=${loop.index} key=${subscription.key}>${subscription.testName}</span> 135 <a class='btn-flat clear-button'> 136 <i class='material-icons'>clear</i> 137 </a> 138 </div> 139 </c:forEach> 140 </div> 141 </div> 142 <form id='prefs-form' style='visibility:hidden' action='/show_preferences' method='post'> 143 <input name='addedTests' type='text'> 144 <input name='removedKeys' type='text'> 145 </form> 146 <div id='save-button-wrapper' class='fixed-action-btn'> 147 <a id='save-button' class='btn-floating btn-large red waves-effect'> 148 <i class='large material-icons'>done</i> 149 </a> 150 </div> 151 <%@ include file="footer.jsp" %> 152 </body> 153</html> 154