chrome/browser/resources/settings/internet_page/network_apnlist.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Polymer element for displaying and modifying a list of cellular
   7  * access points.
   8  */
   9 (function() {
  10 'use strict';
  11
  12 Polymer({
  13   is: 'network-apnlist',
  14
  15   properties: {
  16     /**
  17      * The current state for the network matching |guid|.
  18      * @type {?CrOnc.NetworkStateProperties}
  19      */
  20     networkState: {
  21       type: Object,
  22       value: null,
  23       observer: 'networkStateChanged_'
  24     },
  25
  26     /**
  27      * The CrOnc.APNProperties.AccessPointName value of the selected APN.
  28      */
  29     selectedApn: {
  30       type: String,
  31       value: ''
  32     },
  33
  34     /**
  35      * Selectable list of APN dictionaries for the UI. Includes an entry
  36      * corresponding to |otherApn| (see below).
  37      * @type {!Array<!CrOnc.APNProperties>}
  38      */
  39     apnSelectList: {
  40       type: Array,
  41       value: function() { return []; }
  42     },
  43
  44     /**
  45      * The user settable properties for a new ('other') APN. The values for
  46      * AccessPointName, Username, and Password will be set to the currently
  47      * active APN if it does not match an existing list entry.
  48      * @type {?CrOnc.APNProperties}
  49      */
  50     otherApn: {
  51       type: Object,
  52       value: null
  53     },
  54
  55     /**
  56      * Array of property names to pass to the Other APN property list.
  57      * @type {!Array<string>}
  58      */
  59     otherApnFields_: {
  60       type: Array,
  61       value: function() {
  62         return ['AccessPointName', 'Username', 'Password'];
  63       },
  64       readOnly: true
  65     },
  66
  67     /**
  68      * Array of edit types to pass to the Other APN property list.
  69      */
  70     otherApnEditTypes_: {
  71       type: Object,
  72       value: function() {
  73         return {
  74           'AccessPointName': 'String',
  75           'Username': 'String',
  76           'Password': 'String'
  77         };
  78       },
  79       readOnly: true
  80     },
  81   },
  82
  83   /** @const */ DefaultAccessPointName: 'none',
  84
  85   /**
  86    * Polymer networkState changed method.
  87    */
  88   networkStateChanged_: function() {
  89     if (!this.networkState || !this.networkState.Cellular)
  90       return;
  91
  92     var activeApn = null;
  93     var cellular = this.networkState.Cellular;
  94     if (cellular.APN && cellular.APN.AccessPointName)
  95       activeApn = cellular.APN;
  96     else if (cellular.LastGoodAPN && cellular.LastGoodAPN.AccessPointName)
  97       activeApn = cellular.LastGoodAPN;
  98     this.setApnSelectList_(activeApn);
  99   },
 100
 101   /**
 102    * Sets the list of selectable APNs for the UI. Appends an 'Other' entry
 103    * (see comments for |otherApn| above).
 104    * @param {?CrOnc.APNProperties} activeApn The currently active APN value.
 105    * @private
 106    */
 107   setApnSelectList_: function(activeApn) {
 108     // Copy the list of APNs from this.networkState.
 109     var result = this.getApnList_().slice();
 110
 111     // Test whether |activeApn| is in the current APN list in this.networkState.
 112     var activeApnInList = activeApn && result.some(
 113         function(a) { return a.AccessPointName == activeApn.AccessPointName; });
 114
 115     // If |activeApn| is specified and not in the list, use the active
 116     // properties for 'other'. Otherwise use any existing 'other' properties.
 117     var otherApnProperties =
 118         (activeApn && !activeApnInList) ? activeApn : this.otherApn;
 119     var otherApn = this.createApnObject_(otherApnProperties);
 120
 121     // Always use 'Other' for the name of custom APN entries (the name does
 122     // not get saved).
 123     otherApn.Name = 'Other';
 124
 125     // If no 'active' or 'other' AccessPointName was provided, use the default.
 126     otherApn.AccessPointName =
 127         otherApn.AccessPointName || this.DefaultAccessPointName;
 128
 129     // Save the 'other' properties.
 130     this.otherApn = otherApn;
 131
 132     // Append 'other' to the end of the list of APNs.
 133     result.push(otherApn);
 134
 135     this.set('apnSelectList', result);
 136     this.set(
 137         'selectedApn',
 138         (activeApn && activeApn.AccessPointName) || otherApn.AccessPointName);
 139   },
 140
 141   /**
 142    * @param {?CrOnc.APNProperties=} apnProperties
 143    * @return {!CrOnc.APNProperties} A new APN object with properties from
 144    *     |apnProperties| if provided.
 145    * @private
 146    */
 147   createApnObject_: function(apnProperties) {
 148     var newApn = {AccessPointName: ''};
 149     if (apnProperties)
 150       Object.assign(newApn, apnProperties);
 151     return newApn;
 152   },
 153
 154   /**
 155    * @return {!Array<!CrOnc.APNProperties>} The list of APN properties in
 156    *     |networkState| or an empty list if the property is not set.
 157    * @private
 158    */
 159   getApnList_: function() {
 160     var apnList = /** @type {Array<!CrOnc.APNProperties>|undefined} */(
 161         CrOnc.getActiveValue(this.networkState, 'Cellular.APNList'));
 162     return apnList || [];
 163   },
 164
 165   /**
 166    * We need to update the select value after the dom-repeat template updates:
 167    * 1. Rebuilding the template options resets the select value property.
 168    * 2. The template update occurs after any property changed events.
 169    * TODO(stevenjb): Remove once we use cr-dropdown-menu which (hopefully)
 170    * won't require this.
 171    * @private
 172    */
 173   onSelectApnUpdated_: function() {
 174     this.$.selectApn.value = this.selectedApn;
 175   },
 176
 177   /**
 178    * Event triggered when the selectApn selection changes.
 179    * @param {Event} event The select node change event.
 180    * @private
 181    */
 182   onSelectApnChange_: function(event) {
 183     var selectedApn = event.target.value;
 184     // When selecting 'Other', don't set a change event unless a valid
 185     // non-default value has been set for Other.
 186     if (this.isOtherSelected_(this.networkState, selectedApn) &&
 187         (!this.otherApn || !this.otherApn.AccessPointName ||
 188          this.otherApn.AccessPointName == this.DefaultAccessPointName)) {
 189       return;
 190     }
 191     this.sendApnChange_(selectedApn);
 192   },
 193
 194   /**
 195    * Event triggered when any 'Other' APN network property changes.
 196    * @param {!{detail: {field: string, value: string}}} event
 197    * @private
 198    */
 199   onOtherApnChange_: function(event) {
 200     this.set('otherApn.' + event.detail.field, event.detail.value);
 201     // Don't send a change event for 'Other' until the 'Save' button is clicked.
 202   },
 203
 204   /**
 205    * Event triggered when the Other APN 'Save' button is clicked.
 206    * @param {Event} event
 207    * @private
 208    */
 209   onSaveOther_: function(event) {
 210     this.sendApnChange_(this.selectedApn);
 211   },
 212
 213   /**
 214    * Send the apn-change event.
 215    * @param {string} selectedApn
 216    * @private
 217    */
 218   sendApnChange_: function(selectedApn) {
 219     var apnList = this.getApnList_();
 220     var apn = this.findApnInList(apnList, selectedApn);
 221     if (apn == undefined) {
 222       apn = this.createApnObject_();
 223       if (this.otherApn) {
 224         apn.AccessPointName = this.otherApn.AccessPointName;
 225         apn.Username = this.otherApn.Username;
 226         apn.Password = this.otherApn.Password;
 227       }
 228     }
 229     this.fire('apn-change', {field: 'APN', value: apn});
 230   },
 231
 232   /**
 233    * @param {?CrOnc.NetworkStateProperties} networkState
 234    * @param {string} selectedApn
 235    * @return {boolean} True if the 'other' APN is currently selected.
 236    * @private
 237    */
 238   isOtherSelected_: function(networkState, selectedApn) {
 239     if (!networkState || !networkState.Cellular)
 240       return false;
 241     var apnList = this.getApnList_();
 242     var apn = this.findApnInList(apnList, selectedApn);
 243     return apn == undefined;
 244   },
 245
 246   /**
 247    * @param {!CrOnc.APNProperties} apn
 248    * @return {string} The most descriptive name for the access point.
 249    * @private
 250    */
 251   apnDesc_: function(apn) {
 252     return apn.LocalizedName || apn.Name || apn.AccessPointName;
 253   },
 254
 255   /**
 256    * @param {!Array<!CrOnc.APNProperties>} apnList
 257    * @param {string} accessPointName
 258    * @return {CrOnc.APNProperties|undefined} The entry in |apnList| matching
 259    *     |accessPointName| if it exists, or undefined.
 260    * @private
 261    */
 262   findApnInList: function(apnList, accessPointName) {
 263     for (let a of apnList) {
 264       if (a.AccessPointName == accessPointName)
 265         return a;
 266     }
 267     return undefined;
 268   }
 269 });
 270 })();