using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace WebApiExplorer.Controllers.Visitor
{
public partial class VisitorController : Controller
{
public IActionResult UniqueVisitorId()
{
return View();
}
}
}
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
ViewBag.DemoDescription = false;
}
@section Styles{
<style>
#map {
height: 450px;
width: 100%;
}
#histories-container {
max-height: 249px;
overflow-y: auto;
}
</style>
}
<h3>
@Html.Raw(Visitor.Txt_Title_Unique_VisitorId)
</h3>
@section Summary{
@Html.Raw(Visitor.Description)
}
<div>
<div class="col-md-6">
<table class="table">
<tbody id="current">
<tr>
<td id="visits"><span id="visitorId"></span></td>
</tr>
<tr>
<td id="timer"></td>
</tr>
<tr>
<td id="totalVisitedTime"></td>
</tr>
</tbody>
</table>
<div class="h4">@Html.Raw(Visitor.Txt_Title_Visitor_Visit_Histories)</div>
<div id="histories-container">
<table class="table">
<thead>
<tr>
<th>@Html.Raw(Visitor.Txt_Title_VisitorId)</th>
<th>@Html.Raw(Visitor.Txt_Visit_Date)</th>
</tr>
</thead>
<tbody id="histories">
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<script>
function loadedContent() {
c1.webapi.VisitorConfig.API_HOST.url = "https://demos.componentone.com/ASPNET/5/C1WebAPI/3.0.20202.265";
}
</script>
<script src="@(Configuration["WebAPIService"])api/visitor/visitor-client.min.js" onload="loadedContent();"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=@(Configuration["GoogleMapApiKey"])"></script>
<script>
window.onload = function () {
if (!String.prototype.format) {
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match;
});
};
}
window.visitor.getDataAsync(handleGetVisitorDataAsync);
function createMap(geo) {
var position = { lat: geo.latitude, lng: geo.longitude };
var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: position });
var marker = new google.maps.Marker({ position: position, map: map });
}
function handleGetVisitorDataAsync(data) {
startTimer();
saveVisitorData(data.visitorId, data.session);
var visitorIdElement = document.getElementById('visitorId');
visitorIdElement.innerHTML = data.visitorId;
createMap(data.geo);
bindHistories(data.visitorId);
}
function setTotalVisitedTime(time) {
document.getElementById('totalVisitedTime').innerHTML = '@Html.Raw(Visitor.Template_Total_Visits_Time)'.format(time);
}
function saveVisitorData(visitorId, session) {
var key = genKey(visitorId);
var pureItem = {
visitorId: visitorId,
start: session.start
};
localStorage.setItem(key, JSON.stringify(pureItem));
function genKey(visitorId) {
return 'visitorId-' + visitorId + '-' + new Date().toISOString();
}
}
function bindHistories(visitorId) {
var source = [];
for (var key in localStorage) {
if (matched(key)) {
source.push(JSON.parse(localStorage.getItem(key)));
}
}
renderHistories();
setTotalVisitedTime(source.length);
function renderHistories() {
var table = document.getElementById("histories");
var sortedSource = source.sort(function (a, b) {
a = new Date(a.start);
b = new Date(b.start);
return a > b ? -1 : a < b ? 1 : 0;
});
for (var i = 0; i < sortedSource.length; i++) {
renderRow(i, sortedSource[i]);
}
function renderRow(index, visitorHistory) {
var row = table.insertRow(index);
renderCell(0, visitorHistory.visitorId);
renderCell(1, visitorHistory.start);
function renderCell(cellIndex, text) {
var cell = row.insertCell(cellIndex);
cell.innerHTML = text;
}
}
}
function matched(key) {
return key.indexOf('visitorId-' + visitorId) > -1;
}
}
var browsingTimeTemplate = '@Html.Raw(Visitor.Template_Browsing_Time)';
function startTimer() {
var now = 1;
setTimerLabel();
window.setInterval(function () {
now++;
setTimerLabel();
}, 1000);
function setTimerLabel()
{
document.getElementById('timer').innerHTML = browsingTimeTemplate + ' ' + now + '(s)';
}
}
}
</script>