Close

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