Angular.js Scripting

Back to Content

The next piece is the Angular.js script file – Planning.js – which is contained in the Scripts folder. Note that the file starts with a module declaration and then a controller declaration. The controller code starts with statements
that show/hide the elements the elements that need to be displayed. I tried to call a function instead of using a code block of statement, but I didn’t get that to work. Note that you can use $scope.[model] to define simple and
complex model elements, such as $scope.Message for setting display messages and $scope.Planning to define a more complex Model element corresponding to the fields on your HTML form. The rest of the code simply defines functions:

// Defining angularjs module
var app = angular.module(‘planningModule’, []);

// Defining angularjs Controller and injecting ProductsService
app.controller(‘planningCtrl’, function ($scope, $http) {

$scope.message = ”;

document.getElementById(‘lblstarttijd’).hidden = false;
document.getElementById(‘startdatum’).hidden = false;
document.getElementById(‘selstarttijd’).hidden = false;
document.getElementById(‘lbleindtijd’).hidden = false;
document.getElementById(‘einddatum’).hidden = false;
document.getElementById(‘seleindtijd’).hidden = false;
document.getElementById(‘lblredencode’).hidden = false;
document.getElementById(‘selRedenCode’).hidden = false;
document.getElementById(‘lbltoelichting’).hidden = false;
document.getElementById(‘toelichting’).hidden = false;
document.getElementById(‘lblisBenodigd’).hidden = false;
var radios = document.getElementsByName(‘isBenodigd’);
for (var i = 0; i < radios.length; i++) {
radios[i].hidden = false;
}
document.getElementById(‘lblisBenodigdTrue’).hidden = false;
document.getElementById(‘lblisBenodigdFalse’).hidden = false;

document.getElementById(‘lblContacttijdstip’).hidden = true;
document.getElementById(‘contacttijdstip’).hidden = true;
document.getElementById(‘lblTypeContactpoging’).hidden = true;
document.getElementById(‘seltypeContactpoging’).hidden = true;
document.getElementById(‘lblOpmerking’).hidden = true;
document.getElementById(‘opmerking’).style.display = ‘none’;

document.getElementById(“opdrachtId”).focus();

$scope.Planning = {
//opdrachtid: ‘LIA_006002710433’,
opdrachtid: ”,
versienummer: ‘1.32’,
typeTijdstip: ‘Wens’,
startdatum: setCurrentDate(),
starttijd: ’08:00′,
einddatum: setCurrentDate(),
eindtijd: ’10:00′,
redencode: ‘KlantNietThuis’,
toelichting: ”,
isBenodigd: ‘true’,
contacttijdstip: setCurrentDateTime(),
typeContactpoging: ‘Telefonisch’,
opmerking: ”
};

// Reset planning
$scope.clear = function () {

$scope.Planning.opdrachtid = ”,
$scope.Planning.startdatum = setCurrentDate();
$scope.Planning.starttijd = ’08:00′;
$scope.Planning.einddatum = setCurrentDate();
$scope.Planning.eindtijd = ’10:00′;
$scope.Planning.redencode = ‘KlantNietThuis’;
$scope.Planning.toelichting = ”;
$scope.Planning.isBenodigd = ‘true’;
$scope.Planning.contacttijdstip = setCurrentDateTime();
$scope.Planning.typeContactpoging = ‘Telefonisch’;
$scope.Planning.opmerking = ”;

};

$scope.clearError = function () {

document.getElementById(‘errorOpdrachtId’).textContent = “”;
document.getElementById(‘errorOpdrachtId’).textContent = “”;
document.getElementById(‘errorStartdatum’).textContent = “”;
document.getElementById(‘errorEinddatum’).textContent = “”;
document.getElementById(‘errorContacttijdstip’).textContent = “”;

};

$scope.enterplanning = function () {

$scope.message = ‘Entering Planning’;

document.getElementById(‘lblstarttijd’).hidden = false;
document.getElementById(‘startdatum’).hidden = false;
document.getElementById(‘selstarttijd’).hidden = false;
document.getElementById(‘lbleindtijd’).hidden = false;
document.getElementById(‘einddatum’).hidden = false;
document.getElementById(‘seleindtijd’).hidden = false;
document.getElementById(‘lblredencode’).hidden = false;
document.getElementById(‘selRedenCode’).hidden = false;
document.getElementById(‘lbltoelichting’).hidden = false;
document.getElementById(‘toelichting’).hidden = false;
document.getElementById(‘lblisBenodigd’).hidden = false;
var radios = document.getElementsByName(‘isBenodigd’);
for (var i = 0; i < radios.length; i++) {
radios[i].hidden = false;
}
document.getElementById(‘lblisBenodigdTrue’).hidden = false;
document.getElementById(‘lblisBenodigdFalse’).hidden = false;

document.getElementById(‘lblContacttijdstip’).hidden = true;
document.getElementById(‘contacttijdstip’).hidden = true;
document.getElementById(‘lblTypeContactpoging’).hidden = true;
document.getElementById(‘seltypeContactpoging’).hidden = true;
document.getElementById(‘lblOpmerking’).hidden = true;
document.getElementById(‘opmerking’).style.display = ‘none’;

$scope.clearError();

document.getElementById(“opdrachtId”).focus();

};

$scope.enterbeletmelding = function () {

$scope.message = ‘Entering Beletmelding’;

document.getElementById(‘lblstarttijd’).hidden = true;
document.getElementById(‘startdatum’).hidden = true;
document.getElementById(‘selstarttijd’).hidden = true;
document.getElementById(‘lbleindtijd’).hidden = true;
document.getElementById(‘einddatum’).hidden = true;
document.getElementById(‘seleindtijd’).hidden = true;
document.getElementById(‘lblredencode’).hidden = true;
document.getElementById(‘selRedenCode’).hidden = true;
document.getElementById(‘lbltoelichting’).hidden = true;
document.getElementById(‘toelichting’).hidden = true;
document.getElementById(‘lblisBenodigd’).hidden = true;
var radios = document.getElementsByName(‘isBenodigd’);
for (var i = 0; i < radios.length; i++) {
radios[i].hidden = true;
}
document.getElementById(‘lblisBenodigdTrue’).hidden = true;
document.getElementById(‘lblisBenodigdFalse’).hidden = true;

document.getElementById(‘lblContacttijdstip’).hidden = false;
document.getElementById(‘contacttijdstip’).hidden = false;
document.getElementById(‘lblTypeContactpoging’).hidden = false;
document.getElementById(‘seltypeContactpoging’).hidden = false;
document.getElementById(‘lblOpmerking’).hidden = false;
document.getElementById(‘opmerking’).style.display = ‘block’;

$scope.clearError();

document.getElementById(“contacttijdstip”).focus();

};

// Verzend button
$scope.save = function () {

if (validate()) {

$http({
method: ‘POST’,
url: ‘api/Planning/PostPlanning/’,
data: $scope.Planning
}).then(function successCallback(response) {
// called asynchronously if successful call
$scope.message = response.data;
$scope.clear();
$scope.clearError();
document.getElementById(“opdrachtId”).focus();
}, function errorCallback(response) {
// called asynchronously if an error occurs
$scope.message = response.data.ExceptionMessage;
});
}

};

// Reset button
$scope.cancel = function () {
$scope.clear();
$scope.Planning.typeTijdstip = ‘Wens’;
$scope.enterplanning();
};

function setCurrentDate() {
var date = new Date();
var mm = date.getMonth() + 1; // getMonth() is zero-based
var dd = date.getDate();

return [date.getFullYear(), ‘-‘,
(mm > 9 ? ” : ‘0’) + mm, ‘-‘,
(dd > 9 ? ” : ‘0’) + dd
].join(”);

}

function setCurrentDateTime() {
var date = new Date();
var mm = date.getMonth() + 1; // getMonth() is zero-based
var dd = date.getDate();
var hh = date.getHours();
var mi = date.getMinutes();
var ss = ’00’;
return [date.getFullYear(), ‘-‘,
(mm > 9 ? ” : ‘0’) + mm, ‘-‘,
(dd > 9 ? ” : ‘0’) + dd,
” “,
(hh > 9 ? ” : ‘0’) + hh,
“:”,
(mi > 9 ? ” : ‘0’) + mi,
“:”,
ss
].join(”);

}

function validate() {

var result = false;

if ($scope.Planning.opdrachtid != “”) {
document.getElementById(‘errorOpdrachtId’).textContent = “”;
result = true;

if ($scope.Planning.typeTijdstip != ‘Beletmelding’) {
if ($scope.Planning.startdatum != “”) {
document.getElementById(‘errorStartdatum’).textContent = “”;
result = true;

if ($scope.Planning.einddatum != “”) {
document.getElementById(‘errorEinddatum’).textContent = “”;
result = true;
}
else {
document.getElementById(‘errorEinddatum’).textContent = “* Required *”;
document.getElementById(“einddatum”).focus();
result = false;
}
}
else {
document.getElementById(‘errorStartdatum’).textContent = “* Required *”;
document.getElementById(“startdatum”).focus();
result = false;
}
}

if ($scope.Planning.typeTijdstip == ‘Beletmelding’) {

if ($scope.Planning.contacttijdstip != “”) {
document.getElementById(‘errorContacttijdstip’).textContent = “”;
result = true;
}
else {
if ($scope.Planning.typeTijdstip == ‘Beletmelding’) {
document.getElementById(‘errorContacttijdstip’).textContent = “* Required *”;
document.getElementById(“contacttijdstip”).focus();
}
result = false;
}
}

}
else
{
document.getElementById(‘errorOpdrachtId’).textContent = “* Required *”;
document.getElementById(“opdrachtId”).focus();
result = false;
}

return result;

}

});

Back to Content

Leave a Reply

Your email address will not be published. Required fields are marked *