This is a section on my web app where a user can "subscribe" to a report sent in 3 different times: weekly, monthly, quarterly. (can choose 1 option from each of the three).
I am struggling with both planning the best solution for this while struggling with the code pattern.
What should happen:
When loading the page, I have to pass a PHP var that will set the current status of the users report (variable report in the begging of my code [{weekly},{Monthly},{Quarterly}]) 0,1,2,3 will be the indicators . Ex: if a user have set in the past that he wants a 6 month report monthly - he's going to see the checkbox of the "monthly" checked - and "6 months" selected in the radio button and the variable will be set to [0,2,0]
When selecting a checkbox - the 3 (or one) radio buttons are enabled to select.
When unchecking a checkbox - the radio buttons are disabled and all checks are deleted.
"Save Schedule" button will send the data to PHP.
My question is:
How do I structure my code in a modular way, preventing spaghetti code?
After solving problem no.1 - should I apply a "render" function? (inspired by this video tutorial)
Just mentioning:
This is a JSFIDDLE with my code with less spaghetti. - includes what currently is working.
I am practicing modular JS code, so I'll be more than happy to get general tips referring to my code (recommended links, videos and tutorials ect).
I am using jQuery 1.3.2 which do not include all functionalities of the current library. (like parents and on.('click', func..)
html:
<span class="btn" id="setScheduleBtn">Set Schedule</span>
<div id="reportSchedule" name="reportSchedule" style="display: none;">
<fieldset class="report-type" style="width:21%; display: inline-block;">
<legend>
<input type="checkbox" name="weekly" id="weekly">
<label for="weekly">Weekly:</label>
</legend>
<input type="radio" id="week" name="week" value="1" disabled>
<label for="week">3 Months</label>
</fieldset>
<fieldset class="report-type" style="width:21%; display: inline-block;">
<legend>
<input type="checkbox" name="monthly" id="monthly">
<label for="monthly">Monthly:</label>
</legend>
<input type="radio" id="monthly1" name="monr" value="1" disabled>
<label for="monthly1">1 Month</label>
<input type="radio" id="monthly3" name="monr" value="2" disabled>
<label for="monthly3">3 Months</label>
<input type="radio" id="monthly6" name="monr" value="3" disabled>
<label for="monthly6">6 Months</label>
</fieldset>
<fieldset class="report-type" style="width:21%; display: inline-block;">
<legend>
<input type="checkbox" name="quarterly" id="quarterly">
<label for="quarterly">Quarterly:</label>
</legend>
<input type="radio" id="quarterly3" name="quar" value="1" disabled>
<label for="quarterly3">3 Months</label>
<input type="radio" id="quarterly6" name="quar" value="2" disabled>
<label for="quarterly6">6 Months</label>
<input type="radio" id="quarterly12" name="quar" value="3" disabled>
<label for="quarterly12">12 Months</label>
</fieldset>
<span class="btn" id="saveSchedule" style="display: inline-block; margin: 0 0 10px 0;">
Save Schedule
</span>
</div>
JS:
<script type="text/javascript">
/******************/
/** Set Schedule **/
/******************/
(function() {
var schedule = {
report: [],
template: $('#report_schedule').html(),
// Init functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache elements from DOM
cacheDom: function() {
this.$setScheduleBtn = $('#setScheduleBtn');
this.$reportSchedule = $('#reportSchedule');
this.$allFieldsets = this.$reportSchedule.find('fieldset');
this.$radioBtns = this.$allFieldsets.find('input[type="radio"]');
this.$saveBtn = $('#saveSchedule');
},
// Set events
bindEvents: function() {
var that = this;
// Show/Hide "Set report" section
this.$setScheduleBtn.click(this.showReportScheduler.bind(this));
// Checkbox-radio buttons clicks
this.$allFieldsets.each(function() {
let fieldset = this;
$(this).find('input[type=checkbox]').change(function () {
that.toggleRadioButtons(fieldset);
});
});
// Update current report
this.$radioBtns.change(this.updateReport.bind(this));
// Save button apply changes
this.$saveBtn.click(this.saveSchedule.bind(this));
},
// Display on click
showReportScheduler: function() {
this.$reportSchedule.slideToggle("fast");
},
// Toggle Radio Buttons
toggleRadioButtons: function(fs) {
var radios = $(fs).find("input[type=radio]");
radios.attr("disabled", !radios.attr("disabled"));
radios.removeAttr('checked');
},
updateReport: function(rd) {
console.log(rd.get(0).parentNode);
},
// Save data
saveSchedule: function() {
var selectedItems = [];
this.$allFieldsets.each(function(){
var newylyChecked = $(this).find('input[type="radio"]:checked').val();
if ( newylyChecked == undefined ) newylyChecked = 0;
selectedItems.push(parseInt(newylyChecked));
});
this.report = selectedItems;
// console.log(this.report);
if (this.sendReport(this.report)) {
this.$reportSchedule.slideUp("fast");
}
},
// Send report to server
sendReport: function() {
$.ajax({
type: "POST",
url: '/potato/schedule_report.php',
data: {
weekly: this.report[0],
monthly: this.report[1],
quarterly: this.report[2],
system_user_id: <?php echo $_SESSION["system_user_id"]; ?>
},
success: function(data) {
console.log(data);
return true;
}
});
}
};
schedule.init();
})();
</script>
Please feel free to ask for more information or anything that will help you to help me.
Used render whenever there is any change via checkboxes or radio btns:
<script type="text/javascript">
/******************/
/** Set Schedule **/
/******************/
(function() {
var schedule = {
// get reports via php
report: [<?php echo implode(', ', $current_report); ?>],
/******************/
/* Init functions */
/******************/
init: function() {
this.cacheDom();
this.bindEvents();
this.render();
},
// Cache elements from DOM
cacheDom: function() {
this.cachedReport = this.report.slice();
this.$setScheduleBtn = $('#setScheduleBtn');
this.$reportSchedule = $('#reportSchedule');
this.$allFieldsets = this.$reportSchedule.find('fieldset');
this.$checkboxBtns = this.$allFieldsets.find('input[type="checkbox"]');
this.$radioBtns = this.$allFieldsets.find('input[type="radio"]');
this.$saveBtn = this.$reportSchedule.find('#saveSchedule');
},
// Set events
bindEvents: function() {
var that = this;
// Show/Hide "Set report" section
this.$setScheduleBtn.click(this.showReportScheduler.bind(this));
// Checkbox-radio buttons clicks
this.$allFieldsets.each(function() {
let fieldset = this;
$(this).find('input[type=checkbox]').change(function () {
that.toggleRadioButtons(fieldset);
});
});
// Update 'report' checkbox on change
this.$checkboxBtns.change(function(){
that.checkboxSaveOnChange(this);
});
// Update 'report' radio on change
this.$radioBtns.change(function(){
// console.log(reportit);
that.radioSaveOnChange(this);
});
// Save button apply changes
this.$saveBtn.click(this.saveSchedule.bind(this));
},
// Renderng data
render: function() {
var newData = this.report;
var that = this;
this.$allFieldsets.each(function(i) {
let fieldset = this;
var $theCheckbox = $(fieldset).find('input[type="checkbox"]');
var radios = $(fieldset).find("input[type=radio]");
switch ( newData[i] ) {
case 0:
$theCheckbox.attr("checked", false);
radios.attr("disabled", radios.attr("disabled"));
radios.removeAttr('checked');
break;
case 1:
$theCheckbox.attr("checked", true);
radios.attr("disabled", !radios.attr("disabled"));
radios.eq(0).attr("checked", true);
break;
case 2:
$theCheckbox.attr("checked", true);
radios.attr("disabled", !radios.attr("disabled"));
radios.eq(1).attr("checked", true);
break;
case 3:
$theCheckbox.attr("checked", true);
radios.attr("disabled", !radios.attr("disabled"));
radios.eq(2).attr("checked", true);
break;
}
});
},
/***********/
/* General */
/***********/
// Update "report" variable onclick checkbox
checkboxSaveOnChange: function(newCheckbox){
(newCheckbox.checked ? console.log("doing nothing") : this.report[newCheckbox.value] = 0 );
console.log(this.report);
},
// Update "report" variable onclick radio
radioSaveOnChange: function(newRadio){
switch ( newRadio.name ) {
case 'week':
this.report[0] = parseInt(newRadio.value)+1;
break;
case "mont":
this.report[1] = parseInt(newRadio.value)+1;
break;
case "quar":
this.report[2] = parseInt(newRadio.value)+1;
break;
}
console.log(this.report);
},
// Display report form on click
showReportScheduler: function() {
this.$reportSchedule.slideToggle("fast");
},
// Toggle Radio Buttons
toggleRadioButtons: function(fs) {
var radios = $(fs).find("input[type=radio]");
radios.attr("disabled", !radios.attr("disabled"));
radios.removeAttr('checked');
},
// Save button
saveSchedule: function() {
var selectedItems = [];
this.$allFieldsets.each(function(){
var newylyChecked = $(this).find('input[type="radio"]:checked').val();
if ( newylyChecked == undefined ) newylyChecked = 0;
selectedItems.push(parseInt(newylyChecked));
});
if (this.sendReport(this.report)) {
this.$reportSchedule.slideUp("fast");
}
},
// Checks if 2 arrays are the same
isArrayTheSame: function(array1, array2) {
var is_same = array1.length == array2.length && array1.every(function(element, index) {
return element === array2[index];
});
return is_same;
},
// Send reportt to server
sendReport: function() {
// If data has changed since the page was loaded:
if ( this.isArrayTheSame(this.report, this.cachedReport) ){
$.ajax({
type: 'POST',
url: '/potato/schedule_report.php',
data: {
weekly: this.report[0],
monthly: this.report[1],
quarterly: this.report[2],
system_user_id: <?php echo $_SESSION['system_user_id']; ?>
},
success: function(data) {
return true;
}
});
}
}
};
schedule.init();
})();
</script>