1
0
Fork 0

added addEntry page with skeletal functionality.

This commit is contained in:
Paul V Moreau 2016-02-03 08:16:48 -06:00
parent 9880dcac6e
commit 5803cfc798
9 changed files with 161 additions and 15 deletions

View file

@ -18,13 +18,13 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Brand</a> <a class="navbar-brand" href="#">Cauldron 0.1 </a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse"> <div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#/">Index <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li> <li><a href="#/addEntry">AddEntry</a></li>
</ul> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</nav> </nav>
@ -38,5 +38,9 @@
<script src='bower_components/angular/angular.min.js'></script> <script src='bower_components/angular/angular.min.js'></script>
<script src='bower_components/angular-route/angular-route.min.js'></script> <script src='bower_components/angular-route/angular-route.min.js'></script>
<script src='js/module.js'></script> <script src='js/module.js'></script>
<script src='js/directives/brewEntry.js'></script>
<script src='js/services/cauldronAPI.js'></script>
<script src='js/controllers/indexView.js'></script>
<script src='js/controllers/addEntry.js'></script>
</body> </body>
</html> </html>

View file

@ -0,0 +1,23 @@
angular.module('cauldron')
.controller('addEntry', ['cauldronAPI','$scope','$q', function(cauldronAPI, $scope, $q){
var tagsList = cauldronAPI.getTags();
var submitEntry = function(){
var newEntry = $scope.entryData;
newEntry.author = {
username: 'Megaman '+ Math.random(),
display_name: 'The_dude' + Math.random(),
email:'Mega' + Math.random() + '@fakemeail.com'
};
newEntry.version = '1.0';
newEntry.links = ['megaLinks.com', 'UltimateLink.org'];
var promise = cauldronAPI.addEntry(newEntry);
promise.then(function(response){
console.log('Entry Added, redirecting back to index');
},
function(response) {
console.log('something went wrong', response);
});
}
}]);

View file

@ -0,0 +1,26 @@
angular.module('cauldron')
.controller('indexView', ['cauldronAPI','$scope','$q', function(cauldronAPI, $scope, $q){
console.log('indexView controller checking in');
var setIndexEntries = function(){
var promise = cauldronAPI.getEntries();
promise.then(function(response){
$scope.indexEntries = response;
},
function(response) {
console.log('something went wrong', response);
});
}
setIndexEntries();
$scope.addNew = function(){
var promise = cauldronAPI.addEntry();
promise.then(function(response){
setIndexEntries();
},
function(response) {
console.log('something went wrong', response);
});
}
}]);

View file

@ -0,0 +1,9 @@
angular.module('cauldron').directive('brewEntry', function() {
return {
templateUrl: '/views/directives/brewEntry.html',
scope: {
entryData: '=brew',
}
};
});

View file

@ -3,14 +3,14 @@ angular.module("cauldron", ['ngRoute'])
function($routeProvider){ function($routeProvider){
$routeProvider.when('/',{ $routeProvider.when('/',{
templateUrl:'/views/indexView.html', templateUrl:'/views/indexView.html',
controller:'indexView'
})
.when('/addEntry',{
templateUrl:'/views/addEntry.html',
controller:'addEntry'
}) })
.otherwise({ .otherwise({
redirectTo: '/', redirectTo: '/',
}); });
} }
]) ])
.directive('brewEntry', function() {
return {
templateUrl: '/js/directives/brewEntry.html'
};
});

View file

@ -0,0 +1,63 @@
angular.module('cauldron')
.service('cauldronAPI',[ '$http','$q', function($http, $q){
var backendURL = 'http://localhost:1337';
var connect = function(){
console.log("Connected!");
};
var getTags = function(){
console.log('Tags backend not implemented');
}
var addEntry = function(params){
if(typeof params === 'undefined'){
var params = {
title: 'Test Title ' + Math.random(),
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
author: {
username: 'Jim Beam '+ Math.random(),
display_name: 'Jimmy' + Math.random(),
email:'Jim' + Math.random() + '@fakemeail.com'
},
version: '1.0',
links: ['fakelink.com'],
//system: ['Pathfinder'],
//tags: ['Scenario'],
};
}
return $http({
method: 'POST',
url: backendURL +'/brew',
data: {
title: params.title,
description: params.description,
author: params.author,
version: params.version,
links: params.links,
system: params.system,
tags: params.tags
}
}).then(function successCallback(response) {
return response.data;
}, function errorCallback(response) {
console.log('FAIL!', response);
});
};
var getEntries = function(){
return $http({
method: 'GET',
url: backendURL+'/brew',
}).then(function(response){
return response.data;
});
};
return {
connect: connect,
addEntry:addEntry,
getEntries:getEntries,
}
}]);

23
views/addEntry.html Normal file
View file

@ -0,0 +1,23 @@
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="entryData.title" class="control-label">Title: </label>
<input type="text" class="form-control" id="entryData.title" placeholder="Title" required>
</div>
<div class="form-group">
<label for="entryData.email" class="control-label">Email</label>
<input type="email" class="form-control" id="entryData.email" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="entryData.imageURL" class="control-label">Image URL</label>
<input type="url" class="form-control" id="entryData.imageURL" placeholder="Image URL">
<div class="help-block with-errors">We ain't goin' to host your shit</div>
</div>
<div class="form-group">
<label for="entryData.description" class="control-label">Description: </label>
<textarea class="form-control" rows ='5' id="entryData.description" placeholder="Description" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" data-disable='true'>Submit</button>
</div>
</form>

View file

@ -4,9 +4,9 @@
</div> </div>
<div class="col-md-10"> <div class="col-md-10">
<div class="pull-right panel panel-warning">This Is the System</div> <div class="pull-right panel panel-warning">This Is the System</div>
<h3>This is H3 Title</h3> <h3>{{entryData.title}}</h3>
<h6>h6 author</h6> <h6>{{entryData.author[0].username}}</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>{{entryData.description}}</p>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li role="presentation"><a href="#">Filter Item 1</a></li> <li role="presentation"><a href="#">Filter Item 1</a></li>
<li role="presentation"><a href="#">Filter Item 2</a></li> <li role="presentation"><a href="#">Filter Item 2</a></li>

View file

@ -1,6 +1,4 @@
<div class="mainContainer"> <div class="mainContainer">
<brew-entry></brew-entry> <button ng-click='addNew()'> Click here for adding</button>
<brew-entry></brew-entry> <brew-entry ng-repeat='entry in indexEntries' brew='entry'></brew-entry>
<brew-entry></brew-entry>
<brew-entry></brew-entry>
</div> </div>