PageRenderTime 108ms CodeModel.GetById 28ms RepoModel.GetById 0ms app.codeStats 1ms

/uportal-war/src/main/webapp/WEB-INF/jsp/GoogleAnalytics/config.jsp

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