node.js - Saving sorted order to mongo using ui-sortable -
i'm teaching myself ins , outs of building mean app. started basic todo app , modified pretty heavily back upwards multiple key value pairs , have updated ui using bootstrap.
it's hosted here: http://surveymanager-30817.onmodulus.net/
i've implemented ui-sortable, , works itself.
the challenge i'm having, cannot seem find relevant documentation or tutorials - how communicate updated sort order mongo when refresh page, ng-repeat repeat question in questions order had created.
here html
<!-- index.html --> <!doctype html> <!-- assign our angular module --> <html ng-app="questionmanager"> <head> <!-- meta --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- optimize mobile viewport --> <title>question manager</title> <!-- scrolls --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/question-bootstrap.css" rel="stylesheet"> <style> html { overflow-y:scroll; } body { padding-top:30px; } #todo-list { margin-bottom:30px; } </style> <!-- spells --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery --> <script src="//code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular --> <script src="js/sortable.js"></script> <script src="core.js"></script> </head> <!-- set controller , todos --> <body ng-controller="maincontroller"> <div class="container sm_head"> <div class="col-sm-6"> </div> <div class="col-sm-6"> <h2 class="pull-right">survey manager</h2> </div> </div> <div class="container"> <!-- nav tabs --> <ul id="navtabs" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#manage" role="tab" data-toggle="tab">manage</a></li> <li><a href="#create" role="tab" data-toggle="tab">create</a></li> <li><a href="#render" role="tab" data-toggle="tab">render code</a></li> <li><a href="#abouts" role="tab" data-toggle="tab">about</a></li> </ul> <!-- tab panes --> <div class="tab-content"> <div class="tab-pane active" id="manage"> <div class="panel panel-default"> <!-- default panel contents --> <div class="panel-heading">manage question order<span class="badge pull-right">{{ questions.length }} questions</span></div> <!-- table --> <table class="table"> <thead> <tr> <th>order</th> <th>question name</th> <th>evergage field</th> <th>username</th> <th>options</th> </tr> </thead> <tbody ui-sortable="sortableoptions" ng-model="questions"> <tr ng-repeat="question in questions"> <td>{{ question.order }}</td> <td>{{ question.meanname }}</td> <td>{{ question.fieldname }}</td> <td>@mdo</td> <td> <button type="button" class="btn btn-default btn-sm" ng-click="deletequestion(question._id)"> <span class="ques-list glyphicon glyphicon-remove"></span> delete </button> </td> </tr> </tbody> </table> </div> <div class="col-md-8"> <form class="form-horizontal"> <fieldset> <!-- form name --> <legend>question details</legend> <!-- text input--> <div class="form-group"> <label class="col-md-4 control-label" for="question name">question order</label> <div class="col-md-8"> <input id="question order" name="question order" type="text" placeholder="question order" class="form-control input-md" ng-model="formdata.order"> </div> </div> <!-- text input--> <div class="form-group"> <label class="col-md-4 control-label" for="question name">question name</label> <div class="col-md-8"> <input id="question name" name="question name" type="text" placeholder="write meaningful" class="form-control input-md" ng-model="formdata.meanname"> </div> </div> <!-- text input--> <div class="form-group"> <label class="col-md-4 control-label" for="custom field name">custom field</label> <div class="col-md-8"> <input id="custom field name" name="custom field name" type="text" placeholder="format: user.profile.xx.xx.xx ( 1 or 3 additional words)" class="form-control input-md" ng-model="formdata.fieldname"> </div> </div> <!-- button --> <div class="form-group"> <label class="col-md-4 control-label" for="create"></label> <div class="col-md-4"> <button id="create" name="create" class="btn btn-primary" ng-click="createquestion()">create</button> </div> </div> </fieldset> </form> </div> </div> <div class="tab-pane" id="create"> </div> <div class="tab-pane" id="render">...</div> <div class="tab-pane" id="about">...</div> </div> </div> <script src="js/bootstrap.min.js"></script> </body> </html> here client side:
// public/core.js var questionmanager = angular.module('questionmanager', ['ui.sortable']); function maincontroller($scope, $http) { $scope.formdata = {}; // when landing on page, questions , show them $http.get('/api/questions') .success(function(data) { $scope.questions = data; console.log(data); }) .error(function(data) { console.log('error: ' + data); }); // when submitting add together form, send text node api $scope.createquestion = function() { $http.post('/api/questions', $scope.formdata) .success(function(data) { $scope.formdata = {}; console.log('fuck you!'); $scope.questions = data; console.log(data); }) .error(function(data) { console.log('error: ' + data); }); }; // delete question after checking $scope.deletequestion = function(id) { $http.delete('/api/questions/' + id) .success(function(data) { $scope.questions = data; console.log(data); }) .error(function(data) { console.log('error: ' + data); }); }; $scope.$watch("questions", function(newval, oldval) { console.log("oldval", oldval); console.log("newval", newval); }); $scope.sortableoptions = { update: function(e, ui) { $http.put('/api/questions', $scope.questions) console.log($scope.questions); }, axis: 'y' }; } // bootstrap initializers $('#navtabs>li a').click(function (e) { e.preventdefault() $(this).tab('show') }) and here server side random test , console logs starting @ line 44
// server.js var express = require('express'); var app = express(); // create our app w/ express var mongoose = require('mongoose'); // mongoose mongodb var morgan = require('morgan'); // log requests console (express4) var bodyparser = require('body-parser'); // pull info html post (express4) var methodoverride = require('method-override'); // simulate delete , set (express4) mongoose.connect('mongodb://ewill3532:12qwaszx@proximus.modulusmongo.net:27017/puxo2hir'); // connect mongodb database locally app.use(express.static(__dirname + '/public')); // set static files location /public/img /img users app.use(morgan('dev')); // log every request console app.use(bodyparser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded app.use(bodyparser.json()); // parse application/json app.use(bodyparser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json json app.use(methodoverride()); var question = mongoose.model('question', { order : string, fieldname : string, meanname : string }); app.get('/api/questions', function(req, res) { // utilize mongoose questions in database question.find(function(err, questions) { // if there error retrieving, send error. nil after res.send(err) execute if (err) res.send(err) res.json(questions); // homecoming questions in json format }); }); // create todo , send questions after creation app.post('/api/questions', function(req, res) { // create todo, info comes ajax request angular question.create({ order : req.body.order, fieldname : req.body.fieldname, meanname : req.body.meanname, done : false }, function(err, todo) { if (err) res.send(err); // , homecoming questions after create question.find(function(err, questions) { if (err) res.send(err) res.json(questions); }); }); }); // delete todo app.delete('/api/questions/:todo_id', function(req, res) { question.remove({ _id : req.params.todo_id }, function(err, todo) { if (err) res.send(err); // , homecoming questions after create question.find(function(err, questions) { if (err) res.send(err) res.json(questions); }); }); }); // let's set here comes found app.put('/api/questions', function(req, res) { }); app.get('*', function(req, res) { res.sendfile('./public/index.html'); // load single view file (angular handle page changes on front-end) }); // hear (start app node server.js) ====================================== app.listen(8080); console.log("app listening on port 8080"); any help here, or if can point me documentation or tutorials - either way helpful!'
thanks!
node.js angularjs mongodb express mongoose
No comments:
Post a Comment