API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 2nd, 2016
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ng-app="Bordr">
  4.  
  5. <head>
  6.  
  7. <!-- Title and icon -->
  8. <title>Bordr</title>
  9. <link rel="icon" href="images/raccoon_icon.png">
  10.  
  11. <!-- Bootstrap core CSS -->
  12. <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
  13.  
  14. <!-- Custom styles -->
  15. <link href="style.css" rel="stylesheet">
  16.  
  17. <!-- Custom JS -->
  18. <script src="jquery-2.1.4.min.js"></script>
  19.  
  20. <script src="js/transitions.js"></script>
  21. <script src="js/index.js" type="text/javascript"></script>
  22.  
  23. </head>
  24.  
  25. <body>
  26.  
  27. <div id="header" class="container-fluid">
  28. <img id="logo" src="images/raccoon_small.png"> </img>
  29. </div>
  30.  
  31. <div id="content" class="container-fluid">
  32.  
  33. <!-- Page 0: Login -->
  34. <div id="login" class="page" value="0">
  35.  
  36. <div class="form-group row">
  37. <label for="user">Username:</label>
  38. <input type="text" class="form-control input-sm" id="user"> </input>
  39. <label for="password">Password:</label>
  40. <input type="password" class="form-control input-sm" id="password"> </input>
  41. </div>
  42.  
  43. <div class="row">
  44. <div class="col-sm-6">
  45. <button id="loginBTN" type="button" value=1 class="pageButtonWait btn btn-block btn-primary">Log In</button>
  46. </div>
  47. <div class="col-sm-6">
  48. <button id="signupBTN" type="button" value=1 class="pageButtonWait btn btn-block btn-primary">Sign Up</button>
  49. </div>
  50. </div>
  51.  
  52. </div>
  53.  
  54. <!-- Page 1: Main Menu -->
  55. <div id="mainmenu" hidden="true" class="page" value="1">
  56.  
  57. <div class="row">
  58. <div class="col-sm-12">
  59. <h1>Welcome to Bordr!</h1>
  60. </div>
  61. </div>
  62.  
  63. <div class="row">
  64. <div class="col-sm-6">
  65. <button id="eventsBTN" type="button" value=2 class="pageButton btn btn-block btn-primary">Event Listing</button>
  66. </div>
  67. <div class="col-sm-6">
  68. <button id="makeBTN" type="button" value=3 class="pageButton btn btn-block btn-primary">Create Event</button>
  69. </div>
  70. </div>
  71.  
  72. <div class="row" ng-controller="rootController">
  73. <div class="col-sm-6">
  74. <button id="friendsBTN" type="button" value=4 class="pageButton btn btn-block btn-primary" ng-click="$broadcast('loadEvents')">My Events</button>
  75. </div>
  76. <div class="col-sm-6">
  77. <button id="settingsBTN" type="button" value=5 class="pageButton btn btn-block btn-primary">Friends</button>
  78. </div>
  79. </div>
  80.  
  81. <div class="row">
  82. <div class="col-sm-6">
  83. <button id="profileBTN" type="button" value=6 class="pageButton btn btn-block btn-primary">Profile</button>
  84. </div>
  85. <div class="col-sm-6">
  86. <button id="logoutBTN" type="button" value=0 class="pageButton btn btn-block btn-primary">Logout</button>
  87. </div>
  88. </div>
  89.  
  90. </div>
  91.  
  92. <!-- Page 2: Event List -->
  93. <div id="eventlist" hidden="true" class="page" value="2" ng-controller="Controller2">
  94.  
  95. <div class="infoArea" hidden="true" value="2">
  96. <p>Bored? Here's where you find something to do, close or far!</p>
  97. <p>Browse through your friends' events, or search for all users' events.</p>
  98. <p>You can also talk to event attendees via group chat!</p>
  99. </div>
  100.  
  101. <div class="row">
  102. <div class="col-sm-12">
  103. <h1>Event Listing</h1>
  104. </div>
  105. </div>
  106.  
  107. <div class="row">
  108. <div class="col-sm-6">
  109. <button id="homeBTN" type="button" value=1 class="pageButton btn btn-block btn-primary">Back</button>
  110. </div>
  111. <div class="col-sm-6">
  112. <button id="helpBTN" type="button" value=2 class="infoButton btn btn-block btn-primary">Info</button>
  113. </div>
  114. </div>
  115.  
  116. <div id="eventSearcher" class="space row container">
  117. <div class="row">
  118. <div class="col-sm-2">
  119. <p class="bg-1">Search tags:</p>
  120. </div>
  121. <div class="form-group col-sm-10">
  122. <input id="searchEvents" type="text" class="form-control" ng-model="searchEvents"></input>
  123. </div>
  124. </div>
  125. <div class="row">
  126. <div class="col-sm-6 form-group">
  127. <select id="distanceSelect" class="form-control" ng-model="distance">
  128. <option>1 mile</option>
  129. <option>10 miles</option>
  130. <option>100 miles</option>
  131. <option selected>anywhere</option>
  132. </select>
  133. </div>
  134. <div class="col-sm-6 form-group">
  135. <select id="friendSelect" class="form-control" ng-model="friends">
  136. <option selected>friends only</option>
  137. <option>all users</option>
  138. </select>
  139. </div>
  140. </div>
  141. </div>
  142.  
  143. <div id="searchSubmit" class="row">
  144. <div class="col-sm-3"></div>
  145. <button id="searchEventsBTN" class="btn btn-success col-sm-6">Search Events!</button>
  146. <div class="col-sm-3"></div>
  147. </div>
  148.  
  149. <hr>
  150. <h2 class="row">No results found.</h2>
  151. <div id="eventsResultsArea" class="row container">
  152.  
  153. </div>
  154.  
  155. </div>
  156.  
  157. <!-- Page 3: Create Event -->
  158. <div id="createEvent" hidden="true" class="page" value="3" ng-controller="Controller3">
  159.  
  160. <div class="infoArea" hidden="true" value="3">
  161. <p>Create an event for others to join! Your event will show up in your friends' Event Listings.</p>
  162. <p>If "private" is selected, only friend members can find your event via search.</p>
  163. <p>Events expire at 5:00 AM or in 24 hours, whichever comes first.</p>
  164. </div>
  165.  
  166. <div class="row">
  167. <div class="col-sm-12">
  168. <h1>Create Event</h1>
  169. </div>
  170. </div>
  171.  
  172. <div class="row">
  173. <div class="col-sm-6">
  174. <button id="homeBTN" type="button" value=1 class="pageButton btn btn-block btn-primary">Back</button>
  175. </div>
  176. <div class="col-sm-6">
  177. <button id="helpBTN" type="button" value=3 class="infoButton btn btn-block btn-primary">Info</button>
  178. </div>
  179. </div>
  180.  
  181. <div id="eventArea">
  182. <div id="eventMaker" class="space row container">
  183. <div class="row">
  184. <div class="col-sm-2">
  185. <p class="bg-1">Name:</p>
  186. </div>
  187. <div class="form-group col-sm-10">
  188. <input id="eventNameInput" type="text" class="form-control" ng-model="eventName"></input>
  189. </div>
  190. </div>
  191. <div class="row">
  192. <div class="col-sm-2">
  193. <p class="bg-1">Tags:</p>
  194. </div>
  195. <div class="form-group col-sm-10">
  196. <input id="eventTagsInput" type="text" class="form-control" ng-model="eventTags"></input>
  197. </div>
  198. </div>
  199. <div class="row">
  200. <div class="col-sm-2">
  201. <p class="bg-1">Description:</p>
  202. </div>
  203. <div class="form-group col-sm-10">
  204. <textarea id="eventDescriptionInput" type="text" class="form-control" ng-model="eventDesc"></textarea>
  205. </div>
  206. </div>
  207. <div class="row">
  208. <div class="col-sm-2">
  209. <p class="bg-1">Private?</p>
  210. </div>
  211. <div class="form-group col-sm-1">
  212. <input id="eventFriendsInput" type="checkbox" checked class="form-control" ng-model="eventFriends"></input>
  213. </div>
  214. <div class="col-sm-9"></div>
  215. </div>
  216. </div>
  217.  
  218. <div id="eventSubmit" class="row">
  219. <div class="col-sm-3"></div>
  220. <button id="eventBTN" class="btn btn-success col-sm-6" ng-click="createEvent()">Create Event!</button>
  221. <div class="col-sm-3"></div>
  222. </div>
  223. </div>
  224.  
  225. <div id="resultsArea">
  226. <div id="results" class="infoArea">
  227. </div>
  228. <button id="eventBTN" class="btn btn-success col-sm-12" ng-click="showCreateEvent()">Create Another Event!</button>
  229. </div>
  230.  
  231. </div>
  232.  
  233. <!-- Page 4: My Events -->
  234. <div id="myEvents" hidden="true" class="page" value="4" ng-controller="Controller1">
  235.  
  236. <div class="infoArea" hidden="true" value="4">
  237. <p>Here are all of the events you have created!</p>
  238. <p>You can edit your events or invite friends to them.</p>
  239. <p>Events expire at 5:00 AM or in 24 hours, whichever comes first.</p>
  240. </div>
  241.  
  242. <div class="row">
  243. <div class="col-sm-12">
  244. <h1>My Events</h1>
  245. </div>
  246. </div>
  247.  
  248. <div class="row">
  249. <div class="col-sm-6">
  250. <button id="homeBTN" type="button" value=1 class="pageButton btn btn-block btn-primary">Back</button>
  251. </div>
  252. <div class="col-sm-6">
  253. <button id="helpBTN" type="button" value=4 class="infoButton btn btn-block btn-primary">Info</button>
  254. </div>
  255. </div>
  256.  
  257. <div id="events" class="rowEvent" ng-controller="rootController">
  258. <h1>Your Events</h1>
  259. <section id="event-feed">
  260. </section>
  261. </div>
  262.  
  263. <div id="eventsArea">
  264. </div>
  265.  
  266. </div>
  267.  
  268. <!-- Page 5: Friends -->
  269. <div id="friends" hidden="true" class="page" value="5">
  270.  
  271. <div class="infoArea" hidden="true" value="5">
  272. <p>View, add, or delete your friends!</p>
  273. <p>Click on a friends profile to see all their events.</p>
  274. <p>To add a new friend, search their username and visit their profile.</p>
  275. </div>
  276.  
  277. <div class="row">
  278. <div class="col-sm-12">
  279. <h1>Friends!</h1>
  280. </div>
  281. </div>
  282.  
  283. <div class="row">
  284. <div class="col-sm-6">
  285. <button id="homeBTN" type="button" value=1 class="pageButton btn btn-block btn-primary">Back</button>
  286. </div>
  287. <div class="col-sm-6">
  288. <button id="helpBTN" type="button" value=5 class="infoButton btn btn-block btn-primary">Info</button>
  289. </div>
  290. </div>
  291.  
  292. <h1>Friends currently online:</h1>
  293. <div id="friendsOnline">
  294. </div>
  295.  
  296. <h1>Add a friend:</h1>
  297. <input id="friendsInput" class="form-control"></input>
  298.  
  299. </div>
  300.  
  301. <!-- Page 6: Profile -->
  302. <div id="profile" hidden="true" class="page" value="6">
  303.  
  304. <div class="infoArea" hidden="true" value="6">
  305. <p>Edit your user information here!</p>
  306. <p>Add interests so your friends know what you like doing.</p>
  307. </div>
  308.  
  309. <h1>My profile</h1>
  310.  
  311. <div class="row">
  312. <div class="col-sm-6">
  313. <button id="homeBTN" type="button" value=1 class="pageButton btn btn-block btn-primary">Back</button>
  314. </div>
  315. <div class="col-sm-6">
  316. <button id="helpBTN" type="button" value=6 class="infoButton btn btn-block btn-primary">Info</button>
  317. </div>
  318. </div>
  319.  
  320. <div id="loginInfo">
  321.  
  322. <div class="row">
  323. <div class="col-sm-2">
  324. <p class="bg-1">User name:</p>
  325. </div>
  326. <div class="col-sm-8">
  327. <div id="changeUsername">My Username</div>
  328. </div>
  329. <div class="col-sm-2">
  330. </div>
  331. </div>
  332.  
  333.  
  334. <div class="row">
  335. <div class="col-sm-2">
  336. <p class="bg-1">Password:</p>
  337. </div>
  338. <div class="col-sm-8">
  339. <input id="changePassword" type="password" class="form-control" value="My Username"></input>
  340. </div>
  341. <div class="col-sm-2">
  342. <button id="saveChangePassword" type="button" class="btn btn-primary btn-block">Save</button>
  343. </div>
  344. </div>
  345.  
  346. <div class="row">
  347. <div class="col-sm-2">
  348. <p class="bg-1">Email:</p>
  349. </div>
  350. <div class="col-sm-8">
  351. <input id="changeEmail" type="email" class="form-control" value="myemail@gmail.com"></input>
  352. </div>
  353. <div class="col-sm-2">
  354. <button id="saveChangeEmail" type="button" class="btn btn-primary btn-block">Save</button>
  355. </div>
  356. </div>
  357.  
  358. </div>
  359.  
  360. <h1>My interests</h1>
  361.  
  362. <div id="interestsArea" class="row">
  363. <div class="interest"><p>Hockey</p><div></div></div>
  364. <div class="interest"><p>Dancing</p><div></div></div>
  365. <div class="interest"><p>Super Monkey Ball</p><div></div></div>
  366. </div>
  367.  
  368. <h1>Add interests</h1>
  369.  
  370. </div>
  371.  
  372. </div>
  373. <!-- oooooooooooooooooooooooooo -->
  374. </div>
  375.  
  376. <!-- Bootstrap core JavaScript
  377. ================================================== -->
  378. <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
  379. <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
  380. <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
  381. <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-resource.min.js"></script>
  382. <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
  383. <script src="js/communication.js"></script>
  384. <script>
  385. var app = angular.module('Bordr', []);
  386.  
  387. app.controller('Controller1', function($rootScope){
  388. $rootScope.loadEvents = function() {
  389. $rootScope.$broadcast('loadEvents', myEvents());
  390. }
  391. });
  392.  
  393. app.controller('Controller2', function($scope, $http){
  394. $scope.searchEvent = function() {
  395. http({
  396. method: 'GET',
  397. url: '/searchEvent',
  398. params: {t: $scope.searchEvents, d: $scope.distance, f: $scope.friends}
  399. }).then(function successCallback(response){
  400.  
  401. })
  402. }
  403. });
  404.  
  405. app.controller('Controller3', function($scope, $http){
  406. $scope.createEvent = function(){
  407. $http({
  408. method: 'POST',
  409. url: '/createEvent',
  410. params: {n: $scope.eventName, t: $scope.eventTags, d: $scope.eventDesc, p: $scope.eventFriends}
  411. }).then(function successCallback(response) {
  412. $('#eventArea').hide();
  413. $('#resultsArea').show();
  414. document.getElementById('results').innerHTML = '<p>' + response.data + '</p>';
  415. })
  416. }
  417. $scope.showCreateEvent = function(){
  418. document.getElementById('results').innerHTML = '';
  419. $('#resultsArea').hide();
  420. document.getElementById('eventNameInput').value = '';
  421. document.getElementById('eventTagsInput').value = '';
  422. document.getElementById('eventDescriptionInput').value = '';
  423. document.getElementById('eventFriendsInput').checked = false;
  424. $('#eventArea').show();
  425. }
  426. });
  427.  
  428. app.controller('rootController', function($scope, $http, $compile){
  429. $scope.eventsFeed = [];
  430. $scope.$on('loadEvents', function() {
  431. document.getElementById('event-feed').innerHTML = '';
  432. $http({
  433. method: 'GET',
  434. url: '/getEvents'
  435. }).then(function successCallback(response) {
  436. var checkboxVal = '';
  437. for (var i=0; i < response.data.length; i++)
  438. {
  439. if (response.data[i].isPrivate == true)
  440. {
  441. var checkboxVal = "checked";
  442. }
  443.  
  444. var $string = $(
  445. ' <div class="eventObject space">'
  446. + ' <div class="form-group row">'
  447. + ' <input type="text" class="eventId" value="'+ response.data[i]._id + '" readonly><br>'
  448. + ' <div class="col-sm-2">'
  449. + ' <p class="bg-1">Name:</p>'
  450. + ' </div>'
  451. + ' <div class="col-sm-7">'
  452. + ' <input type="text" class="eventName form-control" value="' + response.data[i].name + '"></input>'
  453. + ' </div>'
  454. + ' <div class="col-sm-2">'
  455. + ' <p class="bg-1">Public:</p>'
  456. + ' </div>'
  457. + ' <div class="col-sm-1">'
  458. + ' <input id="eP" type="checkbox" class="eventFriends form-control col-sm-1"' + checkboxVal + '></input>'
  459. + ' </div>'
  460. + ' </div>'
  461. + ' <div class="form-group row">'
  462. + ' <div class="col-sm-2">'
  463. + ' <p class="bg-1">Tags:</p>'
  464. + ' </div>'
  465. + ' <div class="col-sm-10">'
  466. + ' <input id="eventTags" type="text" class="eventTags form-control" value="' + response.data[i].tags + '"></input>'
  467. + ' </div>'
  468. + ' </div>'
  469. + ' <div class="form-group row">'
  470. + ' <div class="col-sm-12">'
  471. + ' <textarea id="eventDesc" class="eventDescription form-control">' + response.data[i].description + '</textarea>'
  472. + ' </div>'
  473. + ' </div>'
  474. + ' <div class="form-group row">'
  475. + ' <div class="col-sm-4">'
  476. + ' <button type="button" class="btn btn-success btn-block groupChat ng-click="groupChat">Group Chat</button>'
  477. + ' </div>'
  478. + ' <div class="col-sm-4">'
  479. + ' <button type="button" class="btn btn-success btn-block attendees" ng-click="viewAttendees">View Attendees</button>'
  480. + ' </div>'
  481. + ' <div class="col-sm-4">'
  482. + ' <button type="button" class="btn btn-primary btn-block submit" onclick="saveChanges(this);">Save Changes</button>'
  483. + ' </form>'
  484. + ' </div>'
  485. + ' </div>'
  486. + ' </div>').appendTo('#event-feed');
  487. $compile($string)($scope);
  488. }
  489. });
  490. });
  491. });
  492.  
  493. function saveChanges(param) {
  494. var eventObject = $(param).parent().parent().parent();
  495. var eId = eventObject.find(".eventId").val();
  496. var eName = eventObject.find(".eventName").val();
  497. var eTags = eventObject.find(".eventTags").val();
  498. var eDesc = eventObject.find(".eventDescription").val();
  499. var isP = eventObject.find(".eventFriends").val();
  500.  
  501. var url = '/saveChanges';
  502.  
  503. var posting = $.post( url, { id: eId, n: eName, t: eTags, d: eDesc, p: isP } );
  504.  
  505. posting.done(function( data ) {
  506. alert(data);
  507. });
  508. }
  509. </script>
  510. </body>
  511.  
  512. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!