PageRenderTime 26ms CodeModel.GetById 23ms app.highlight 1ms RepoModel.GetById 0ms app.codeStats 1ms

/uPortal-webapp/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp

https://github.com/Jasig/uPortal
JavaServer Pages | 350 lines | 284 code | 56 blank | 10 comment | 17 complexity | e95a9b088958020c28e646ab30c60cfd MD5 | raw file
  1<%--
  2
  3    Licensed to Apereo under one or more contributor license
  4    agreements. See the NOTICE file distributed with this work
  5    for additional information regarding copyright ownership.
  6    Apereo licenses this file to you under the Apache License,
  7    Version 2.0 (the "License"); you may not use this file
  8    except in compliance with the License.  You may obtain a
  9    copy of the License at the following location:
 10
 11      http://www.apache.org/licenses/LICENSE-2.0
 12
 13    Unless required by applicable law or agreed to in writing,
 14    software distributed under the License is distributed on an
 15    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 16    KIND, either express or implied.  See the License for the
 17    specific language governing permissions and limitations
 18    under the License.
 19
 20--%>
 21<%@ include file="/WEB-INF/jsp/include.jsp"%>
 22<c:set var="n"><portlet:namespace/></c:set>
 23
 24<div id="${n}google-analytics-config" class="google-analytics-config">
 25    <div class="property-configs">
 26    </div>
 27    <button class="addPropertyConfig">Add Host</button> <button class="saveConfig">Save</button> <button class="done">Done</button>
 28</div>
 29
 30<script id="${n}propertyConfigTemplate" type="text/template">
 31   <a class="property destroy"></a>
 32   <div class="default-property-name">Default Property</div>
 33   <input name="propertyName" value="{{= name }}"/>
 34
 35   <div>
 36       <label>Property Id:</label><input name="propertyId" value="{{= propertyId }}"/>
 37   </div>
 38   <div class="property-config">
 39   </div>
 40   <div class="property-dimensions">
 41   </div>
 42</script>
 43
 44<script id="${n}settingsTemplate" type="text/template">
 45   <div>
 46      <label><a href="{{= settingsUrl }}" target="_blank" rel="noopener noreferrer">{{= settingsName }}:</a></label>
 47      <input class="settingName" name="settingName" value=""/>:
 48      <input class="settingValue" name="settingValue" value=""/>
 49      <button class="addSetting">+</button>
 50   </div>
 51   <div class="setting-data"></div>
 52</script>
 53
 54<script id="${n}settingTemplate" type="text/template">
 55   <span class="view name">
 56      <label>{{= name }}</label>:
 57   </span>
 58
 59   <span class="view value">
 60      <label>{{= value }}</label>
 61   </span>
 62
 63   <a class="setting destroy"></a>
 64</script>
 65
 66<portlet:resourceURL var="getDataUrl" id="getData" escapeXml="false" />
 67<portlet:resourceURL var="storeDataUrl" id="storeData" escapeXml="false" />
 68<portlet:actionURL var="configDoneUrl" name="configDone" escapeXml="false" />
 69
 70<script type="text/javascript">
 71up.analytics = up.analytics || {};
 72up.analytics.config = up.analytics.config || {};
 73up.analytics.config.model = up.analytics.config.model || {};
 74up.analytics.config.view = up.analytics.config.view || {};
 75
 76(function($, Backbone, _) {
 77   'use strict';
 78
 79   var data = ${up:json(data)};
 80
 81   /**
 82    * Centralized sync method
 83    */
 84   up.analytics.sync = function(type) {
 85      return function(method, model, options) {
 86         //DOES NOTHING FOR NOW, SOMEDAY WE WILL HAVE REAL-TIME SYNC/SAVE
 87      };
 88   };
 89
 90   up.analytics.config.model.Setting = Backbone.Model.extend({
 91      sync : up.analytics.sync("Setting")
 92   });
 93
 94   up.analytics.config.model.SettingsList = Backbone.Collection.extend({
 95      model : up.analytics.config.model.Setting,
 96      sync : up.analytics.sync("SettingsList")
 97   });
 98
 99   up.analytics.config.model.PropertyConfiguration = Backbone.Model.extend({
100      sync : up.analytics.sync("PropertyConfiguration"),
101      initialize : function(data) {
102         this.set("config", new up.analytics.config.model.SettingsList(data.config || []));
103         this.set("dimensionGroups", new up.analytics.config.model.SettingsList(data.dimensionGroups || []));
104      },
105      defaults : {
106         name : "",
107         propertyId : ""
108      }
109   });
110
111   up.analytics.config.model.PropertyConfigurationList = Backbone.Collection.extend({
112      model : up.analytics.config.model.PropertyConfiguration,
113      sync : up.analytics.sync("PropertyConfigurationList")
114   });
115
116   up.analytics.config.model.GlobalConfiguration = Backbone.Model.extend({
117      sync : up.analytics.sync("GlobalConfiguration"),
118      initialize : function(data) {
119         data = data || {};
120         this.set("defaultConfig", new up.analytics.config.model.PropertyConfiguration(data.defaultConfig || {}));
121         this.set("hosts", new up.analytics.config.model.PropertyConfigurationList(data.hosts || []));
122      }
123   });
124
125   up.analytics.config.view.SettingView = Backbone.View.extend({
126      tagName : "div",
127      className : "setting-container",
128      template : _.template($('#${n}settingTemplate').html()),
129
130      events : {
131         "click a.setting.destroy" : "clear"
132      },
133
134      initialize : function() {
135         this.listenTo(this.model, 'change', this.render);
136         this.listenTo(this.model, 'destroy', this.remove);
137      },
138
139      render : function() {
140         $(this.el).html(this.template(this.model.toJSON()));
141         return this;
142      },
143
144      // Remove the item, destroy the model.
145      clear : function() {
146         this.model.destroy();
147      }
148   });
149
150   up.analytics.config.view.SettingsView = Backbone.View.extend({
151      tagName : "div",
152      className : "settings",
153      template : _.template($("#${n}settingsTemplate").html()),
154      initialize : function(options) {
155         this.settingsName = options.settingsName;
156         this.settingsUrl = options.settingsUrl;
157
158         this.listenTo(this.model, 'add', this.addOne);
159         this.listenTo(this.model, 'remove', this.remove);
160         this.listenTo(this.model, 'reset', this.addAll);
161      },
162      events : {
163         "click .addSetting" : "create"
164      },
165      render : function() {
166         var modelData = this.model.toJSON();
167         modelData["settingsName"] = this.settingsName;
168         modelData["settingsUrl"] = this.settingsUrl;
169         $(this.el).html(this.template(modelData));
170
171
172         var container = document.createDocumentFragment();
173         _.forEach(this.model.models, function(setting) {
174            var view = new up.analytics.config.view.SettingView({
175               model : setting
176            });
177            container.appendChild(view.render().el);
178         }, this);
179         this.$(".setting-data").html(container);
180
181
182         return this;
183      },
184
185      // Add a single setting item to the list by creating a view for it
186      addOne : function(setting) {
187         var view = new up.analytics.config.view.SettingView({
188            model : setting
189         });
190         this.$(".setting-data").append(view.render().el);
191      },
192
193      // Add all items in the setting collection at once.
194      addAll : function() {
195         this.model.each(this.addOne, this);
196      },
197
198      create : function(e) {
199         this.newName = this.$(".settingName");
200         this.newValue = this.$(".settingValue");
201
202         if (!this.newName.val() || !this.newValue.val()) {
203            return;
204         }
205
206         this.model.create({
207            name : this.newName.val(),
208            value : this.newValue.val()
209         });
210
211         this.newName.val('');
212         this.newValue.val('');
213      },
214
215      remove : function(e) {
216         this.render();
217      }
218   });
219
220   up.analytics.config.view.PropertyConfigurationView = Backbone.View.extend({
221      tagName : "div",
222      className : "analytics-host",
223      template : _.template($("#${n}propertyConfigTemplate").html()),
224      initialize : function(options) {
225          this.isDefaultConfig = (options.isDefaultConfig == true);
226      },
227      events : {
228          "click a.property.destroy" : "clear",
229          "blur input[name=propertyId]" : "updatePropertyId",
230          "blur input[name=propertyName]" : "updatePropertyName"
231      },
232      render : function() {
233         $(this.el).html(this.template(this.model.toJSON()));
234
235         if (this.isDefaultConfig) {
236             this.$("div.default-property-name").show();
237             this.$("input[name=propertyName]").hide();
238         }
239         else {
240             this.$("div.default-property-name").hide();
241             this.$("input[name=propertyName]").show();
242         }
243
244         var configSettings = new up.analytics.config.view.SettingsView({
245                  model : this.model.get("config"),
246                  settingsName : "Settings",
247                  settingsUrl : "https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#create"
248               });
249         this.$(".property-config").html((configSettings.render().el));
250
251         var dimensionSettings = new up.analytics.config.view.SettingsView({
252                  model : this.model.get("dimensionGroups"),
253                  settingsName : "Dimensions",
254                  settingsUrl : "https://support.google.com/analytics/answer/2709829"
255               });
256         this.$(".property-dimensions").html((dimensionSettings.render().el));
257
258         return this;
259      },
260      updatePropertyId : function() {
261          var propertyId = this.$("input[name=propertyId]").val();
262          this.model.set("propertyId", propertyId);
263      },
264      updatePropertyName : function() {
265          var propertyName = this.$("input[name=propertyName]").val();
266          this.model.set("name", propertyName);
267      },
268      // Remove the item, destroy the model.
269      clear : function() {
270         this.model.destroy();
271      }
272   });
273
274   up.analytics.config.view.GlobalConfigurationView = Backbone.View.extend({
275      el : $("div#${n}google-analytics-config"),
276
277      initialize : function() {
278         this.listenTo(this.model, 'change', this.render);
279         this.listenTo(this.model.get("hosts"), 'add', this.render);
280         this.listenTo(this.model.get("hosts"), 'remove', this.render);
281
282         this.render();
283      },
284      events : {
285         "click .addPropertyConfig" : "newPropertyConfig",
286         "click .saveConfig" : "saveConfig",
287         "click .done" : "completeConfig"
288      },
289      render : function() {
290         var container = document.createDocumentFragment();
291
292         var defaultConfig = this.model.get("defaultConfig");
293         var defaultConfigView = new up.analytics.config.view.PropertyConfigurationView({
294            model : defaultConfig,
295            isDefaultConfig: true
296         });
297         container.appendChild(defaultConfigView.render().el);
298
299         var hosts = this.model.get("hosts");
300         _.forEach(hosts.models, function(hostConfig) {
301            var hostView = new up.analytics.config.view.PropertyConfigurationView({
302               model : hostConfig
303            });
304            container.appendChild(hostView.render().el);
305         }, this);
306
307         this.$el.find(".property-configs").html(container);
308
309         return this;
310      },
311      newPropertyConfig : function() {
312         var instName = window.prompt("Host Name:");
313         if (!instName)
314            return;
315         this.model.get("hosts").create({
316            "name" : instName
317         });
318      },
319      saveConfig : function() {
320          $.ajax({
321              type: "POST",
322              url: "${storeDataUrl}",
323              dataType: 'json',
324              data: {config:JSON.stringify(globalConfig)},
325              success: function (data) {
326                  //TODO force sync of globalConfig with returned data
327              }
328          });
329      },
330      completeConfig : function() {
331          // The 'done' button requires an actionURL and a POST...
332          var form = $('<form />', {
333              action: '${configDoneUrl}',
334              method: 'POST',
335              style: 'display: none;'
336          });
337          form.appendTo('body').submit();
338      }
339   });
340
341   var globalConfig = new up.analytics.config.model.GlobalConfiguration(data);
342
343   new up.analytics.config.view.GlobalConfigurationView({
344      model : globalConfig
345   });
346
347
348
349})(up.jQuery, up.Backbone, up._);
350</script>