// Use the settings object to change the theme
mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
var formatDate = mobiscroll.util.datetime.formatDate;
var demoApp = {
data: [],
nothingScheduled: document.querySelector('.md-no-schedule'),
filters: {
range: 'today',
calls: true,
meetings: true
},
loadData: function () {
var i,
now = new Date(),
data = [{
id: 1,
name: "Owen Adams",
company: "Sunholdings Corp.",
icon: "phone",
type: "call"
}, {
id: 2,
name: "Kian Phillips",
company: "sol-flex Corp.",
icon: "location",
type: "meeting"
}, {
id: 3,
name: "Robert Bradley",
company: "Silvermedia",
icon: "location",
type: "meeting"
}, {
id: 4,
name: "Lydia Young",
company: "Zimplex",
icon: "phone",
type: "call"
}, {
id: 5,
name: "Hollie Hudson",
company: "Stanelectrics",
icon: "location",
type: "meeting"
}, {
id: 6,
name: "Lynn Elliott",
company: "Techhex",
icon: "location",
type: "meeting"
}, {
id: 7,
name: "Konner Murray",
company: "HACME Corp.",
icon: "phone",
type: "call"
}, {
id: 8,
name: "Morgan Downs",
company: "Itex Corp.",
icon: "location",
type: "meeting"
}, {
id: 9,
name: "Warren Boone",
company: "Sumline",
icon: "location",
type: "meeting"
}, {
id: 10,
name: "Charlie Jenkins",
company: "Quaddoex",
icon: "phone",
type: "call"
}, {
id: 11,
name: "Jillian Hobbs",
company: "Indizap",
icon: "location",
type: "meeting",
formatedTime: ''
}, {
id: 12,
name: "Donald Mccormick",
company: "Zootrax",
icon: "phone",
type: "call"
}, {
id: 13,
name: "Luke Harper",
company: "Unihouse",
icon: "phone",
type: "call"
}, {
id: 14,
name: "Leah West",
company: "Ap-care",
icon: "phone",
type: "call"
}, {
id: 15,
name: "Billie Rivas",
company: "Technoit Corp.",
icon: "location",
type: "meeting"
}, {
id: 16,
name: "Janae Diaz",
company: "Plex-ron Corp.",
icon: "location",
type: "meeting"
}, {
id: 17,
name: "Raquel Bentley",
company: "Silicon-lax",
icon: "phone",
type: "call"
}, {
id: 18,
name: "Harley Burke",
company: "Lamzone",
icon: "location",
type: "meeting"
}];
// Genarate random dates
for (i = 0; i < data.length; ++i) {
data[i].date = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + (i > 5 ? (i - 5) : 0),
now.getHours() + i * 2,
Math.round((now.getMinutes() + i * 5) / 5) * 5);
}
this.data = data;
},
filter: function () {
var i,
item,
start,
end,
range,
now = new Date(),
count = 0;
switch (this.filters.range) {
case 'today':
start = new Date(now.setHours(0, 0, 0, 0));
end = new Date(now.setHours(23, 59, 59, 999));
break;
case 'week':
start = new Date(now.setHours(0, 0, 0, 0));
end = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + (7 - now.getDay()), 23, 59, 59, 999
);
break;
default:
range = this.range.getVal();
start = range[0];
end = range[1];
}
for (i = 0; i < this.data.length; i++) {
item = this.data[i];
if ((
(item.type == 'call' && this.filters.calls) ||
(item.type == 'meeting' && this.filters.meetings)
) && (item.date >= start) && (item.date <= end)) {
if (!item._added) {
// Add to listview
this.listview.add(item.id, mobiscroll.$(
'<li data-id="' + item.id + '" data-icon="' + item.icon + '">' +
'<h4>' + item.name + '</h4>' +
'<h4>' + item.company + '</h4>' +
'<span class="md-time" style="position:absolute;right:1.25em;top:50%;margin-top:-9px;">' + formatDate('D d hh:ii', item.date) +
'</span>' +
'</li>'));
item._added = true;
}
count++;
} else if (item._added) {
// Remove from listview
this.listview.remove(item.id);
item._added = false;
}
}
if (count === 0) {
this.nothingScheduled.style.display = 'block';
} else {
this.nothingScheduled.style.display = 'none';
}
},
init: function () {
var now = new Date(),
that = this;
// Load data
this.loadData();
// Init range
this.range = mobiscroll.range('.md-schedule-range');
// Init listview
this.listview = mobiscroll.listview('.md-schedule-list', {
enhance: true,
swipe: false,
striped: true,
onInit: function (ev, inst) {
setTimeout(function () {
that.filter();
});
}
});
// Attach change listener to all filters
document.querySelectorAll('.md-schedule-filter').forEach(function (elm) {
elm.addEventListener('change', function (ev) {
var input = ev.target;
if (input.type == 'checkbox') {
that.filters[input.name] = input.checked;
} else if (input.type == 'radio') {
that.filters[input.name] = input.value;
} else if (input.name == 'custom') {
that.filters.range = 'custom';
}
that.filter();
});
});
// Show rangepicker when selecting custom range
document.querySelector('.md-schedule-custom').addEventListener('click', function () {
that.range.show();
});
}
};
demoApp.init();