github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/js/index.js (about)

     1  var Index = function () {
     2  
     3      return {
     4  
     5          //main function
     6          init: function () {
     7              Metronic.addResizeHandler(function () {
     8                  jQuery('.vmaps').each(function () {
     9                      var map = jQuery(this);
    10                      map.width(map.parent().width());
    11                  });
    12              });
    13          },
    14  
    15          initJQVMAP: function () {
    16              if (!jQuery().vectorMap) {
    17                  return;
    18              }
    19  
    20              var showMap = function (name) {
    21                  jQuery('.vmaps').hide();
    22                  jQuery('#vmap_' + name).show();
    23              }
    24  
    25              var setMap = function (name) {
    26                  var data = {
    27                      map: 'world_en',
    28                      backgroundColor: null,
    29                      borderColor: '#333333',
    30                      borderOpacity: 0.5,
    31                      borderWidth: 1,
    32                      color: '#c6c6c6',
    33                      enableZoom: true,
    34                      hoverColor: '#c9dfaf',
    35                      hoverOpacity: null,
    36                      values: sample_data,
    37                      normalizeFunction: 'linear',
    38                      scaleColors: ['#b6da93', '#909cae'],
    39                      selectedColor: '#c9dfaf',
    40                      selectedRegion: null,
    41                      showTooltip: true,
    42                      onLabelShow: function (event, label, code) {
    43  
    44                      },
    45                      onRegionOver: function (event, code) {
    46                          if (code == 'ca') {
    47                              event.preventDefault();
    48                          }
    49                      },
    50                      onRegionClick: function (element, code, region) {
    51                          var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
    52                          alert(message);
    53                      }
    54                  };
    55  
    56                  data.map = name + '_en';
    57                  var map = jQuery('#vmap_' + name);
    58                  if (!map) {
    59                      return;
    60                  }
    61                  map.width(map.parent().parent().width());
    62                  map.show();
    63                  map.vectorMap(data);
    64                  map.hide();
    65              }
    66  
    67              setMap("world");
    68              setMap("usa");
    69              setMap("europe");
    70              setMap("russia");
    71              setMap("germany");
    72              showMap("world");
    73  
    74              jQuery('#regional_stat_world').click(function () {
    75                  showMap("world");
    76              });
    77  
    78              jQuery('#regional_stat_usa').click(function () {
    79                  showMap("usa");
    80              });
    81  
    82              jQuery('#regional_stat_europe').click(function () {
    83                  showMap("europe");
    84              });
    85              jQuery('#regional_stat_russia').click(function () {
    86                  showMap("russia");
    87              });
    88              jQuery('#regional_stat_germany').click(function () {
    89                  showMap("germany");
    90              });
    91  
    92              $('#region_statistics_loading').hide();
    93              $('#region_statistics_content').show();
    94          },
    95  
    96          initCalendar: function () {
    97              if (!jQuery().fullCalendar) {
    98                  return;
    99              }
   100  
   101              var date = new Date();
   102              var d = date.getDate();
   103              var m = date.getMonth();
   104              var y = date.getFullYear();
   105  
   106              var h = {};
   107  
   108              if ($('#calendar').width() <= 400) {
   109                  $('#calendar').addClass("mobile");
   110                  h = {
   111                      left: 'title, prev, next',
   112                      center: '',
   113                      right: 'today,month,agendaWeek,agendaDay'
   114                  };
   115              } else {
   116                  $('#calendar').removeClass("mobile");
   117                  if (Metronic.isRTL()) {
   118                      h = {
   119                          right: 'title',
   120                          center: '',
   121                          left: 'prev,next,today,month,agendaWeek,agendaDay'
   122                      };
   123                  } else {
   124                      h = {
   125                          left: 'title',
   126                          center: '',
   127                          right: 'prev,next,today,month,agendaWeek,agendaDay'
   128                      };
   129                  }
   130              }
   131  
   132             
   133  
   134              $('#calendar').fullCalendar('destroy'); // destroy the calendar
   135              $('#calendar').fullCalendar({ //re-initialize the calendar
   136                  disableDragging : false,
   137                  header: h,
   138                  editable: true,
   139                  events: [{
   140                      title: 'All Day',
   141                      start: new Date(y, m, 1),
   142                      backgroundColor: Metronic.getBrandColor('yellow')
   143                  }, {
   144                      title: 'Long Event',
   145                      start: new Date(y, m, d - 5),
   146                      end: new Date(y, m, d - 2),
   147                      backgroundColor: Metronic.getBrandColor('blue')
   148                  }, {
   149                      title: 'Repeating Event',
   150                      start: new Date(y, m, d - 3, 16, 0),
   151                      allDay: false,
   152                      backgroundColor: Metronic.getBrandColor('red')
   153                  }, {
   154                      title: 'Repeating Event',
   155                      start: new Date(y, m, d + 6, 16, 0),
   156                      allDay: false,
   157                      backgroundColor: Metronic.getBrandColor('green')
   158                  }, {
   159                      title: 'Meeting',
   160                      start: new Date(y, m, d+9, 10, 30),
   161                      allDay: false
   162                  }, {
   163                      title: 'Lunch',
   164                      start: new Date(y, m, d, 14, 0),
   165                      end: new Date(y, m, d, 14, 0),
   166                      backgroundColor: Metronic.getBrandColor('grey'),
   167                      allDay: false
   168                  }, {
   169                      title: 'Birthday',
   170                      start: new Date(y, m, d + 1, 19, 0),
   171                      end: new Date(y, m, d + 1, 22, 30),
   172                      backgroundColor: Metronic.getBrandColor('purple'),
   173                      allDay: false
   174                  }, {
   175                      title: 'Click for Google',
   176                      start: new Date(y, m, 28),
   177                      end: new Date(y, m, 29),
   178                      backgroundColor: Metronic.getBrandColor('yellow'),
   179                      url: 'http://google.com/'
   180                  }]
   181              });
   182          },
   183  
   184          initCharts: function () {
   185              if (!jQuery.plot) {
   186                  return;
   187              }
   188  
   189              function showChartTooltip(x, y, xValue, yValue) {
   190                  $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
   191                      position: 'absolute',
   192                      display: 'none',
   193                      top: y - 40,
   194                      left: x - 40,
   195                      border: '0px solid #ccc',
   196                      padding: '2px 6px',
   197                      'background-color': '#fff'
   198                  }).appendTo("body").fadeIn(200);
   199              }
   200  
   201              var data = [];
   202              var totalPoints = 250;
   203  
   204              // random data generator for plot charts
   205  
   206              function getRandomData() {
   207                  if (data.length > 0) data = data.slice(1);
   208                  // do a random walk
   209                  while (data.length < totalPoints) {
   210                      var prev = data.length > 0 ? data[data.length - 1] : 50;
   211                      var y = prev + Math.random() * 10 - 5;
   212                      if (y < 0) y = 0;
   213                      if (y > 100) y = 100;
   214                      data.push(y);
   215                  }
   216                  // zip the generated y values with the x values
   217                  var res = [];
   218                  for (var i = 0; i < data.length; ++i) res.push([i, data[i]])
   219                  return res;
   220              }
   221  
   222              function randValue() {
   223                  return (Math.floor(Math.random() * (1 + 50 - 20))) + 10;
   224              }
   225  
   226              var visitors = [
   227                  ['02/2013', 1500],
   228                  ['03/2013', 2500],
   229                  ['04/2013', 1700],
   230                  ['05/2013', 800],
   231                  ['06/2013', 1500],
   232                  ['07/2013', 2350],
   233                  ['08/2013', 1500],
   234                  ['09/2013', 1300],
   235                  ['10/2013', 4600]
   236              ];
   237  
   238  
   239              if ($('#site_statistics').size() != 0) {
   240  
   241                  $('#site_statistics_loading').hide();
   242                  $('#site_statistics_content').show();
   243  
   244                  var plot_statistics = $.plot($("#site_statistics"),
   245                      [{
   246                          data: visitors,
   247                          lines: {
   248                              fill: 0.6,
   249                              lineWidth: 0
   250                          },
   251                          color: ['#f89f9f']
   252                      }, {
   253                          data: visitors,
   254                          points: {
   255                              show: true,
   256                              fill: true,
   257                              radius: 5,
   258                              fillColor: "#f89f9f",
   259                              lineWidth: 3
   260                          },
   261                          color: '#fff',
   262                          shadowSize: 0
   263                      }],
   264  
   265                      {
   266                          xaxis: {
   267                              tickLength: 0,
   268                              tickDecimals: 0,
   269                              mode: "categories",
   270                              min: 0,
   271                              font: {
   272                                  lineHeight: 14,
   273                                  style: "normal",
   274                                  variant: "small-caps",
   275                                  color: "#6F7B8A"
   276                              }
   277                          },
   278                          yaxis: {
   279                              ticks: 5,
   280                              tickDecimals: 0,
   281                              tickColor: "#eee",
   282                              font: {
   283                                  lineHeight: 14,
   284                                  style: "normal",
   285                                  variant: "small-caps",
   286                                  color: "#6F7B8A"
   287                              }
   288                          },
   289                          grid: {
   290                              hoverable: true,
   291                              clickable: true,
   292                              tickColor: "#eee",
   293                              borderColor: "#eee",
   294                              borderWidth: 1
   295                          }
   296                      });
   297  
   298                  var previousPoint = null;
   299                  $("#site_statistics").bind("plothover", function (event, pos, item) {
   300                      $("#x").text(pos.x.toFixed(2));
   301                      $("#y").text(pos.y.toFixed(2));
   302                      if (item) {
   303                          if (previousPoint != item.dataIndex) {
   304                              previousPoint = item.dataIndex;
   305  
   306                              $("#tooltip").remove();
   307                              var x = item.datapoint[0].toFixed(2),
   308                                  y = item.datapoint[1].toFixed(2);
   309  
   310                              showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' visits');
   311                          }
   312                      } else {
   313                          $("#tooltip").remove();
   314                          previousPoint = null;
   315                      }
   316                  });
   317              }
   318  
   319  
   320              if ($('#site_activities').size() != 0) {
   321                  //site activities
   322                  var previousPoint2 = null;
   323                  $('#site_activities_loading').hide();
   324                  $('#site_activities_content').show();
   325  
   326                  var data1 = [
   327                      ['DEC', 300],
   328                      ['JAN', 600],
   329                      ['FEB', 1100],
   330                      ['MAR', 1200],
   331                      ['APR', 860],
   332                      ['MAY', 1200],
   333                      ['JUN', 1450],
   334                      ['JUL', 1800],
   335                      ['AUG', 1200],
   336                      ['SEP', 600]
   337                  ];
   338  
   339  
   340                  var plot_statistics = $.plot($("#site_activities"),
   341  
   342                      [{
   343                          data: data1,
   344                          lines: {
   345                              fill: 0.2,
   346                              lineWidth: 0,
   347                          },
   348                          color: ['#BAD9F5']
   349                      }, {
   350                          data: data1,
   351                          points: {
   352                              show: true,
   353                              fill: true,
   354                              radius: 4,
   355                              fillColor: "#9ACAE6",
   356                              lineWidth: 2
   357                          },
   358                          color: '#9ACAE6',
   359                          shadowSize: 1
   360                      }, {
   361                          data: data1,
   362                          lines: {
   363                              show: true,
   364                              fill: false,
   365                              lineWidth: 3
   366                          },
   367                          color: '#9ACAE6',
   368                          shadowSize: 0
   369                      }],
   370  
   371                      {
   372  
   373                          xaxis: {
   374                              tickLength: 0,
   375                              tickDecimals: 0,
   376                              mode: "categories",
   377                              min: 0,
   378                              font: {
   379                                  lineHeight: 18,
   380                                  style: "normal",
   381                                  variant: "small-caps",
   382                                  color: "#6F7B8A"
   383                              }
   384                          },
   385                          yaxis: {
   386                              ticks: 5,
   387                              tickDecimals: 0,
   388                              tickColor: "#eee",
   389                              font: {
   390                                  lineHeight: 14,
   391                                  style: "normal",
   392                                  variant: "small-caps",
   393                                  color: "#6F7B8A"
   394                              }
   395                          },
   396                          grid: {
   397                              hoverable: true,
   398                              clickable: true,
   399                              tickColor: "#eee",
   400                              borderColor: "#eee",
   401                              borderWidth: 1
   402                          }
   403                      });
   404  
   405                  $("#site_activities").bind("plothover", function (event, pos, item) {
   406                      $("#x").text(pos.x.toFixed(2));
   407                      $("#y").text(pos.y.toFixed(2));
   408                      if (item) {
   409                          if (previousPoint2 != item.dataIndex) {
   410                              previousPoint2 = item.dataIndex;
   411                              $("#tooltip").remove();
   412                              var x = item.datapoint[0].toFixed(2),
   413                                  y = item.datapoint[1].toFixed(2);
   414                              showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + 'M$');
   415                          }
   416                      }
   417                  });
   418  
   419                  $('#site_activities').bind("mouseleave", function () {
   420                      $("#tooltip").remove();
   421                  });
   422              }
   423          },
   424  
   425          initMiniCharts: function () {
   426              if (!jQuery().easyPieChart || !jQuery().sparkline) {
   427                  return;
   428              }
   429  
   430              // IE8 Fix: function.bind polyfill
   431              if (Metronic.isIE8() && !Function.prototype.bind) {
   432                  Function.prototype.bind = function (oThis) {
   433                      if (typeof this !== "function") {
   434                          // closest thing possible to the ECMAScript 5 internal IsCallable function
   435                          throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
   436                      }
   437  
   438                      var aArgs = Array.prototype.slice.call(arguments, 1),
   439                          fToBind = this,
   440                          fNOP = function () {},
   441                          fBound = function () {
   442                              return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
   443                          aArgs.concat(Array.prototype.slice.call(arguments)));
   444                      };
   445  
   446                      fNOP.prototype = this.prototype;
   447                      fBound.prototype = new fNOP();
   448  
   449                      return fBound;
   450                  };
   451              }
   452  
   453              $('.easy-pie-chart .number.transactions').easyPieChart({
   454                  animate: 1000,
   455                  size: 75,
   456                  lineWidth: 3,
   457                  barColor: Metronic.getBrandColor('yellow')
   458              });
   459  
   460              $('.easy-pie-chart .number.visits').easyPieChart({
   461                  animate: 1000,
   462                  size: 75,
   463                  lineWidth: 3,
   464                  barColor: Metronic.getBrandColor('green')
   465              });
   466  
   467              $('.easy-pie-chart .number.bounce').easyPieChart({
   468                  animate: 1000,
   469                  size: 75,
   470                  lineWidth: 3,
   471                  barColor: Metronic.getBrandColor('red')
   472              });
   473  
   474              $('.easy-pie-chart-reload').click(function () {
   475                  $('.easy-pie-chart .number').each(function () {
   476                      var newValue = Math.floor(100 * Math.random());
   477                      $(this).data('easyPieChart').update(newValue);
   478                      $('span', this).text(newValue);
   479                  });
   480              });
   481  
   482              $("#sparkline_bar").sparkline([8, 9, 10, 11, 10, 10, 12, 10, 10, 11, 9, 12, 11, 10, 9, 11, 13, 13, 12], {
   483                  type: 'bar',
   484                  width: '100',
   485                  barWidth: 5,
   486                  height: '55',
   487                  barColor: '#35aa47',
   488                  negBarColor: '#e02222'
   489              });
   490  
   491              $("#sparkline_bar2").sparkline([9, 11, 12, 13, 12, 13, 10, 14, 13, 11, 11, 12, 11, 11, 10, 12, 11, 10], {
   492                  type: 'bar',
   493                  width: '100',
   494                  barWidth: 5,
   495                  height: '55',
   496                  barColor: '#ffb848',
   497                  negBarColor: '#e02222'
   498              });
   499  
   500              $("#sparkline_line").sparkline([9, 10, 9, 10, 10, 11, 12, 10, 10, 11, 11, 12, 11, 10, 12, 11, 10, 12], {
   501                  type: 'line',
   502                  width: '100',
   503                  height: '55',
   504                  lineColor: '#ffb848'
   505              });
   506  
   507          },
   508  
   509          initChat: function () {
   510  
   511              var cont = $('#chats');
   512              var list = $('.chats', cont);
   513              var form = $('.chat-form', cont);
   514              var input = $('input', form);
   515              var btn = $('.btn', form);
   516  
   517              var handleClick = function (e) {
   518                  e.preventDefault();
   519  
   520                  var text = input.val();
   521                  if (text.length == 0) {
   522                      return;
   523                  }
   524  
   525                  var time = new Date();
   526                  var time_str = (time.getHours() + ':' + time.getMinutes());
   527                  var tpl = '';
   528                  tpl += '<li class="out">';
   529                  tpl += '<img class="avatar" alt="" src="' + Layout.getLayoutImgPath() + 'avatar1.jpg"/>';
   530                  tpl += '<div class="message">';
   531                  tpl += '<span class="arrow"></span>';
   532                  tpl += '<a href="#" class="name">Bob Nilson</a>&nbsp;';
   533                  tpl += '<span class="datetime">at ' + time_str + '</span>';
   534                  tpl += '<span class="body">';
   535                  tpl += text;
   536                  tpl += '</span>';
   537                  tpl += '</div>';
   538                  tpl += '</li>';
   539  
   540                  var msg = list.append(tpl);
   541                  input.val("");
   542  
   543                  var getLastPostPos = function () {
   544                      var height = 0;
   545                      cont.find("li.out, li.in").each(function () {
   546                          height = height + $(this).outerHeight();
   547                      });
   548  
   549                      return height;
   550                  }
   551  
   552                  cont.find('.scroller').slimScroll({
   553                      scrollTo: getLastPostPos()
   554                  });
   555              }
   556  
   557              $('body').on('click', '.message .name', function (e) {
   558                  e.preventDefault(); // prevent click event
   559  
   560                  var name = $(this).text(); // get clicked user's full name
   561                  input.val('@' + name + ':'); // set it into the input field
   562                  Metronic.scrollTo(input); // scroll to input if needed
   563              });
   564  
   565              btn.click(handleClick);
   566  
   567              input.keypress(function (e) {
   568                  if (e.which == 13) {
   569                      handleClick(e);
   570                      return false; //<---- Add this line
   571                  }
   572              });
   573          },
   574  
   575          initDashboardDaterange: function () {
   576  
   577              if (!jQuery().daterangepicker) {
   578                  return;
   579              }
   580  
   581              $('#dashboard-report-range').daterangepicker({
   582                      opens: (Metronic.isRTL() ? 'right' : 'left'),
   583                      startDate: moment().subtract('days', 29),
   584                      endDate: moment(),
   585                      minDate: '01/01/2012',
   586                      maxDate: '12/31/2014',
   587                      dateLimit: {
   588                          days: 60
   589                      },
   590                      showDropdowns: false,
   591                      showWeekNumbers: true,
   592                      timePicker: false,
   593                      timePickerIncrement: 1,
   594                      timePicker12Hour: true,
   595                      ranges: {
   596                          'Today': [moment(), moment()],
   597                          'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
   598                          'Last 7 Days': [moment().subtract('days', 6), moment()],
   599                          'Last 30 Days': [moment().subtract('days', 29), moment()],
   600                          'This Month': [moment().startOf('month'), moment().endOf('month')],
   601                          'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
   602                      },
   603                      buttonClasses: ['btn btn-sm'],
   604                      applyClass: ' blue',
   605                      cancelClass: 'default',
   606                      format: 'MM/DD/YYYY',
   607                      separator: ' to ',
   608                      locale: {
   609                          applyLabel: 'Apply',
   610                          fromLabel: 'From',
   611                          toLabel: 'To',
   612                          customRangeLabel: 'Custom Range',
   613                          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   614                          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   615                          firstDay: 1
   616                      }
   617                  },
   618                  function (start, end) {
   619                      $('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
   620                  }
   621              );
   622  
   623  
   624              $('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
   625              $('#dashboard-report-range').show();
   626          }
   627  
   628      };
   629  
   630  }();