I fairly new to angular and saving data to the db and then retrieving it. I am working with Angular Material as one of my dependencies.
In a first step I was successfull in creating a user (saving to db) and then retrieving it via a ng-repeat on a list. And lastly doing a delete of a user.
Now i want to do exactly the same but then for creating a task with some more input fields in my form. Here I am encountering several issues:
The form is in a dialog box (md-dialog -> angular material) (the same was for creating a user)
HTML code:
<body ng-controller="AppCtrl">
<div class="tile contentEditorBox" ng-dblclick="showPopUp($event)" ce-drag ce-resize ng-repeat="task in taskInfo"
style="top: {{ gridSizeNG.y * item.row }}px; left: {{ gridSizeNG.x * item.column }}px; width: {{ gridSizeNG.x * item.width }}px; "
ng-data-id="{{ task.id }}" ng-init="snapInit()">
<div class="txtWrapperTile">
<div class="containerTxt">
<div class="taskName">
<h5> {{ task.task_name }} </h5>
</div>
<div class="taskProjectClient">
<!-- <p class="pPC"> {{ task.task_project_client_name}} </p> -->
<p class="pPC"> {{ task.id_Location }} </p>
</div>
</div><!-- end containerTxt -->
</div><!-- end txtWrapperTile -->
</div>
</body>
Code for the dialog box -> dialog1.tmpl.html
<md-dialog aria-label="">
<form ng-controller="AppCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<md-input-container md-no-float="">
<input class="customInput" placeholder="Name this task..." name="task_name" ng-model="task_name">
</md-input-container>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div id="containerForm">
<div layout="row">
<div class="labelPosition">
<md-select-label>Project type</md-select-label>
</div>
<div id="containerSelectListProjectType">
<md-select ng-model="task_project_type" name="project_type" placeholder="Choose a project type" id="containerProjectType">
<md-option ng-model="selected_task_project_type" ng-repeat="projecttype in projectTypeInfo" ng-value="{{projecttype.id_ProjectType}}">{{projecttype.project_type}}</md-option>
</md-select>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPosition">
<md-select-label>Location</md-select-label>
</div>
<div id="containerSelectListLocation">
<md-select ng-model="task_location" name="location" placeholder="Choose your location">
<md-option ng-repeat="location in locationInfo" ng-value="{{location.id_Location}}">{{location.location}}</md-option>
</md-select>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPositionET">
<md-select-label>Estimate time</md-select-label>
</div>
<div id="containerEstimateTime">
<md-input-container md-no-float="">
<input name="estimate_time" placeholder="0 hours" ng-model="task_estimate_time">
</md-input-container>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPositionCP">
<md-select-label>Client/Project</md-select-label>
</div>
<div id="containerClientProject">
<md-input-container md-no-float="">
<input name="project_client_name" placeholder="Project/Client name" ng-model="task_project_client_name">
</md-input-container>
</div>
</div>
<br />
<div layout="row" ng-show="showUrl">
<div class="labelPosition">
<md-select-label>Url</md-select-label>
</div>
<div id="containerUrl">
<md-input-container md-no-float="">
<input name="url" placeholder="Url" ng-model="task_url">
</md-input-container>
</div>
</div>
<br />
<div layout="row" ng-show="showResourceLink">
<div class="labelPosition">
<md-select-label>Resource link</md-select-label>
</div>
<div id="containerResourceLink">
<md-input-container md-no-float="">
<input name="resource_link" placeholder="Resource link" ng-model="task_resource_link">
</md-input-container>
</div>
</div>
<br />
<div layout="row" ng-show="showNotes">
<div class="labelPosition">
<md-select-label>Note's</md-select-label>
</div>
<div id="containerNotes">
<md-input-container md-no-float="">
<textarea ng-model="task_notes" ng-model="task_notes" placeholder="Note's" columns="1" md-maxlength="150"></textarea>
</md-input-container>
</div>
</div>
<div layout="row">
<input type="text" id="coord_x" name="coordinate_x" value="" ng-model="task_coordinate_x" >
<input type="text" id="coord_y" name="coordinate_y" value="" ng-model="task_coordinate_y">
</div>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<md-button class="md-primary" ng-click="delete_task(task.id)">Delete</md-button>
<md-button class="md-primary" ng-click="showUrl = ! showUrl">Url</md-button>
<md-button class="md-primary" ng-click="showResourceLink = ! showResourceLink">Resource link</md-button>
<md-button class="md-primary" ng-click="showNotes = ! showNotes">Note's</md-button>
<md-button class="md-primary" ng-click="edit_task()">Edit</md-button>
<md-button ng-click="closeDialog()" class="md-primary">Cancel</md-button>
<md-button ng-click="save_task(); closeDialog()" class="md-primary">Save</md-button>
</div>
</form>
</md-dialog>
<script>
$(document).ready(function()
{
var resultLocalStorageCoordX = document.getElementById("coord_x");
resultLocalStorageCoordX.value = localStorage.getItem("coordinateX");
console.log(resultLocalStorageCoordX);
var coordX = $('#coord_x').val();
console.log('Coord X (inputfield): ' + coordX);
var resultLocalStorageCoordY = document.getElementById("coord_y");
resultLocalStorageCoordY.value = localStorage.getItem("coordinateY");
console.log(resultLocalStorageCoordY);
var coordY= $('#coord_y').val();
console.log('Coord Y (inputfield): ' + coordY);
});
</script>
Code in my app.js file. There is a lot more code in my app.js file for dragging, dropping, resizing, snapping to grid, creating grid lines. But for the purpose of this question I left the code out.
(function() {
var contentEditor = angular.module("DragDrop", ['ngMaterial']);
contentEditor.controller('AppCtrl', function($scope, $mdDialog, $http){
$scope.taskInfo = [];
var getTaskFunction = function(successFn, errorFn)
{
// original implementation of $scope.get_user but with success & error used which as passed in as parameter.
$http.get('db.php?action=get_Task_Info') // call the server
.success(function(data) { // upon success
successFn(data);
console.log("Retrieved task data from server");
})
.error(errorFn || function() {
console.log("Error in retrieving data from server");
}) // process failure
};
this.reloadTaskList = function() {
getTaskFunction(
/* success function */
function(data) {
//debugger;
$scope.taskInfo = data;
},
/* error function */
function()
{
console.log("Server load failed");
}
)
};
// load list on startup
this.reloadTaskList();
/** function to add details for a task in mysql referecing php **/
$scope.save_task = function() {
$http.post('db.php?action=add_task',
{
'task_name' : $scope.task_name,
'id_ProjectType' : $scope.task_project_type,
'id_Location' : $scope.task_location,
'task_estimate_time' : $scope.task_estimate_time,
'task_project_client_name' : $scope.task_project_client_name,
'task_url' : $scope.task_url,
'task_resource_link' : $scope.task_resource_link,
'task_notes' : $scope.task_notes,
'task_coordinate_x' : $scope.task_coordinate_x,
'task_coordinate_y' : $scope.task_coordinate_y
}
)
.success(function (data, status, headers, config) {
//$scope.userInfo.push(data);
//$scope.get_task(); //this will fetch latest record from DB
getTaskFunction(
/* success function */
function(data) {
$scope.taskInfo = data;
console.log("The tasks have been reloaded");
},
/* error function */
function()
{
console.log("Server load failed");
}
);
console.log("The task has been added successfully to the DB");
console.log(data);
})
.error(function(data, status, headers, config) {
console.log("Failed to add the task to DB");
});
}
//Populating select list with data from DB for project type
$scope.getProjectTypeFunction = function() {
$http.get('db.php?action=get_ProjectType_Info').success(function(data)
{
$scope.projectTypeInfo = data;
console.log("Retrieved data (project type) from the server");
//console.log(data);
})
.error(function(data, status, headers, config)
{
console.log("Error in retrieving data from server");
});
}
$scope.getProjectTypeFunction(); //-- call the function that calls $http
//Populating select list with data from DB for location
$scope.getLocationFunction = function() {
$http.get('db.php?action=get_Location_Info').success(function(data)
{
$scope.locationInfo = data;
console.log("Retrieved data (location) from the server");
//console.log(data);
})
.error(function(data, status, headers, config)
{
console.log("Error in retrieving data from server");
});
}
$scope.getLocationFunction(); //-- call the function that calls $http
$scope.showPopUp= function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
})
function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
var mainApp = angular.element(document.body).controller();
$mdDialog.hide();
}
}
}
/** function to delete a task from list referencing php **/
$scope.delete_task = function(index) {
$http.post('db.php?action=delete_task',
{
'task_index' : index
}
)
.success(function (data, status, headers, config) {
// here we also replace how to get the user
getTaskFunction(
/* success function */
function(data) {
$scope.taskInfo = data;
console.log("The tasks have been reloaded (in the delete function)");
},
/* error function */
function()
{
alert("Server load failed (in the delete function)");
}
);
console.log('Deletion was succesfull');
})
.error(function(data, status, headers, config) {
console.log("You were NOT succesfull in deleting a task");
});
}
})
})();
PHP code:
<?php
include('config.php');
switch($_GET['action']) {
case 'get_ProjectType_Info' :
get_ProjectType_Info();
break;
case 'add_task' :
add_task();
break;
case 'get_Location_Info' :
get_Location_Info();
break;
case 'get_Task_Info' :
get_Task_Info();
break;
case 'delete_task' :
delete_task();
break;
}
/** Function to data from tblProjectType **/
function get_ProjectType_Info(){
$qry = mysql_query('SELECT * from tblProjectType');
$data = array();
while($rows = mysql_fetch_array($qry))
{
$data[] = array(
"id_ProjectType" => $rows['id_ProjectType'],
"project_type" => $rows['project_type']
);
}
print_r(json_encode($data));
//return json_encode($data);
}
/** Function to data from tblLocation **/
function get_Location_Info(){
$qry = mysql_query('SELECT * from tblLocation');
$data = array();
while($rows = mysql_fetch_array($qry))
{
$data[] = array(
"id_Location" => $rows['id_Location'],
"location" => $rows['location']
);
}
print_r(json_encode($data));
//return json_encode($data);
}
/** Function to add a task to db **/
function add_task() {
$data = json_decode(file_get_contents("php://input"));
$task_name = $data->task_name;
$task_project_type = $data->id_ProjectType;
$task_location = $data->id_Location;
$task_estimate_time = $data->task_estimate_time;
$task_project_client_name = $data->task_project_client_name;
$task_url = $data->task_url;
$task_resource_link = $data->task_resource_link;
$task_notes = $data->task_notes;
$task_coordinate_x = $data->task_coordinate_x;
$task_coordinate_y = $data->task_coordinate_y;
print_r($data);
$qry = 'INSERT INTO tblTask(task_name, id_ProjectType, id_Location, task_estimate_time, task_project_client_name, task_url, task_resource_link, task_notes, task_coordinate_x, task_coordinate_y)
VALUES ("'
. $task_name . '","'
. $task_project_type . '","'
. $task_location . '","'
. $task_estimate_time . '","'
. $task_project_client_name . '","'
. $task_url . '","'
. $task_resource_link . '","'
. $task_notes . '","'
. $task_coordinate_x . '","'
. $task_coordinate_y .'")';
/*$qry = 'INSERT INTO tblTask(task_coordinate_x, task_coordinate_y)
VALUES ("' . $task_coordinate_x . '","' . $task_coordinate_y .'")';
*/
echo ($qry);
$qry_res = mysql_query($qry);
if ($qry_res) {
$arr = array('msg' => "Task added successfully!!!", 'error' => '');
$jsn = json_encode($arr);
// print_r($jsn);
}
else {
$arr = array('msg' => "", 'error' => 'Error in inserting record');
$jsn = json_encode($arr);
// print_r($jsn);
}
}
/** Function to get a task info **/
function get_Task_Info() {
/*$qryGet = mysql_query('SELECT * from tblTask');*/
$qryGet = mysql_query('Select *, tblLocation.location from tblTask INNER JOIN tblLocation on tblTask.id_Location=tblLocation.id_Location');
/*echo ($qryGet);*/
$data = array();
while($rows = mysql_fetch_array($qryGet))
{
$data[] = array(
"id" => $rows['id'],
"task_name" => $rows['task_name'],
"task_project_type" => $rows['id_ProjectType'],
"task_location" => $rows['id_Location'],
"task_estimate_time" => $rows['task_estimate_time'],
"task_project_client_name" => $rows['task_project_client_name'],
"task_url" => $rows['task_url'],
"task_resource_link" => $rows['task_resource_link'],
"task_notes" => $rows['task_notes']
);
}
print_r(json_encode($data));
//return json_encode($data);
}
/** Function to delete a task **/
function delete_task() {
$data = json_decode(file_get_contents("php://input"));
$index = $data->task_index;
//print_r($data);
$del = mysql_query("DELETE FROM tblTask WHERE id = ".$index);
if($del)
return true;
return false;
}
?>
So basically i need help with:
I hope someone can really help me out.