API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 14th, 2016
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.21 KB | None | 0 0
raw download clone embed print report
  1. const Tasks = React.createClass({
  2. getInitialState() {
  3. return {
  4. title: "",
  5. tasklists: [{
  6. id: "0",
  7. description: "",
  8. supervisor: "",
  9. tasks: []
  10. }
  11. ]
  12. }
  13. },
  14.  
  15. componentDidMount() {
  16. const projectId = this.props.params.id;
  17. this.serverRequest = $.get('/nirs/project/tasks/' + projectId, function (result) {
  18. var title = result.title;
  19. var tasklists = result.tasklists;
  20. this.setState({
  21. title: title,
  22. tasklists: tasklists
  23. });
  24. }.bind(this));
  25. },
  26.  
  27. render() {
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40. return (
  41. <div className="container-fluid main-content">
  42. <div className="col-md-12">
  43. <div className="page-header" style={{marginTop: '-15px'}}>
  44. <h1>$language['tasks']</h1>
  45. </div>
  46. </div>
  47.  
  48. <div className="dropdown">
  49. <button type="button" className="btn btn-primary btn-sm" data-toggle="dropdown">
  50. $language['add'] <i className="fa fa-pencil-square-o"></i><span className="caret"></span>
  51. </button>
  52. <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
  53. <li><a href="#" data-toggle="modal" data-target="#addtask">$language['newtask']</a></li>
  54. <li><a href="#" data-toggle="modal" data-target="#addtasklist">$language['newtasklist']</a></li>
  55. </ul>
  56. </div>
  57. <div style={{display: 'none'}} className="modal fade" id="addtask" tabIndex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  58. <div className="modal-dialog ">
  59. <div className="modal-content">
  60. <div className="modal-header">
  61. <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">?</span>
  62. </button>
  63. <h4 className="modal-title" id="myModalLabel">$language['addtask']?></h4>
  64. </div>
  65.  
  66. <form id="addtaskform" method="POST" onsubmit="addTask($project_id ?>)">
  67. <div className="modal-body">
  68. <h4>$language['taskdescription']?></h4>
  69. <div className="input-group">
  70. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-pencil-square-o"></i></span>
  71. <input name="task_desc" className="form-control" placeholder="$language['taskdescription']?>" aria-describedby="basic-addon1" type="text"/>
  72. </div>
  73. <h4>$language['tasklist']?></h4>
  74. <div className="input-group">
  75. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-tasks"></i></span>
  76. <select name="tasklist" className="form-control">
  77. {/* "<option value=\"" . $tasklist['tasklist']['id'] . "\">" . $tasklist['tasklist']['description'] . "</option>"; */}
  78. </select>
  79. </div>
  80.  
  81. <h4>$language['terms']?></h4>
  82. <div className="row">
  83. <div className="datepicker col-md-6" id="myDatepicker1">
  84. <div className="input-group">
  85. <input className="form-control" name="timestart" id="natural_fecha_nacimiento" type="text"/>
  86. <div className="input-group-btn">
  87. <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
  88. <span className="fa fa-calendar"></span>
  89. <span className="sr-only">Toggle Calendar</span>
  90. </button>
  91. <div className="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
  92. <div className="datepicker-calendar">
  93. <div className="datepicker-calendar-header">
  94. <button type="button" className="prev"><span className="glyphicon glyphicon-chevron-left"></span><span className="sr-only">Previous Month</span>
  95.  
  96. </button>
  97. <button type="button" className="next"><span className="glyphicon glyphicon-chevron-right"></span><span className="sr-only">Next Month</span>
  98.  
  99. </button>
  100. <button type="button" className="title">
  101. <span className="month">
  102. <span data-month="0">January</span>
  103. <span data-month="1">February</span>
  104. <span data-month="2">March</span>
  105. <span data-month="3">April</span>
  106. <span data-month="4">May</span>
  107. <span data-month="5">June</span>
  108. <span data-month="6">July</span>
  109. <span data-month="7">August</span>
  110. <span data-month="8">September</span>
  111. <span data-month="9">October</span>
  112. <span data-month="10">November</span>
  113. <span data-month="11">December</span>
  114. </span> <span className="year">
  115. </span>
  116. </button>
  117. </div>
  118. <table className="datepicker-calendar-days">
  119. <thead>
  120. <tr>
  121. <th>Su</th>
  122. <th>Mo</th>
  123. <th>Tu</th>
  124. <th>We</th>
  125. <th>Th</th>
  126. <th>Fr</th>
  127. <th>Sa</th>
  128. </tr>
  129. </thead>
  130. <tbody></tbody>
  131. </table>
  132. <div className="datepicker-calendar-footer">
  133. <button type="button" className="datepicker-today">Today</button>
  134. </div>
  135. </div>
  136. <div className="datepicker-wheels" aria-hidden="true">
  137. <div className="datepicker-wheels-month">
  138. <h2 className="header">Month</h2>
  139.  
  140. <ul>
  141. <li data-month="0">
  142. <button type="button">Jan</button>
  143. </li>
  144. <li data-month="1">
  145. <button type="button">Feb</button>
  146. </li>
  147. <li data-month="2">
  148. <button type="button">Mar</button>
  149. </li>
  150. <li data-month="3">
  151. <button type="button">Apr</button>
  152. </li>
  153. <li data-month="4">
  154. <button type="button">May</button>
  155. </li>
  156. <li data-month="5">
  157. <button type="button">Jun</button>
  158. </li>
  159. <li data-month="6">
  160. <button type="button">Jul</button>
  161. </li>
  162. <li data-month="7">
  163. <button type="button">Aug</button>
  164. </li>
  165. <li data-month="8">
  166. <button type="button">Sep</button>
  167. </li>
  168. <li data-month="9">
  169. <button type="button">Oct</button>
  170. </li>
  171. <li data-month="10">
  172. <button type="button">Nov</button>
  173. </li>
  174. <li data-month="11">
  175. <button type="button">Dec</button>
  176. </li>
  177. </ul>
  178. </div>
  179. <div className="datepicker-wheels-year">
  180. <h2 className="header">Year</h2>
  181.  
  182. <ul></ul>
  183. </div>
  184. <div className="datepicker-wheels-footer clearfix">
  185. <button type="button" className="btn datepicker-wheels-back"><span className="glyphicon glyphicon-arrow-left"></span><span className="sr-only">Return to Calendar</span>
  186.  
  187. </button>
  188. <button type="button" className="btn datepicker-wheels-select">Select <span className="sr-only">Month and Year</span>
  189.  
  190. </button>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. <div className="datepicker col-md-6" id="myDatepicker2">
  198. <div className="input-group">
  199. <input className="form-control" name="timedue" id="natural_fecha_nacimiento" type="text"/>
  200. <div className="input-group-btn">
  201. <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
  202. <span className="fa fa-calendar"></span>
  203. <span className="sr-only">Toggle Calendar</span>
  204. </button>
  205. <div className="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
  206. <div className="datepicker-calendar">
  207. <div className="datepicker-calendar-header">
  208. <button type="button" className="prev"><span className="glyphicon glyphicon-chevron-left"></span><span className="sr-only">Previous Month</span>
  209.  
  210. </button>
  211. <button type="button" className="next"><span className="glyphicon glyphicon-chevron-right"></span><span className="sr-only">Next Month</span>
  212.  
  213. </button>
  214. <button type="button" className="title">
  215. <span className="month">
  216. <span data-month="0">January</span>
  217. <span data-month="1">February</span>
  218. <span data-month="2">March</span>
  219. <span data-month="3">April</span>
  220. <span data-month="4">May</span>
  221. <span data-month="5">June</span>
  222. <span data-month="6">July</span>
  223. <span data-month="7">August</span>
  224. <span data-month="8">September</span>
  225. <span data-month="9">October</span>
  226. <span data-month="10">November</span>
  227. <span data-month="11">December</span>
  228. </span> <span className="year">
  229. </span>
  230. </button>
  231. </div>
  232. <table className="datepicker-calendar-days">
  233. <thead>
  234. <tr>
  235. <th>Su</th>
  236. <th>Mo</th>
  237. <th>Tu</th>
  238. <th>We</th>
  239. <th>Th</th>
  240. <th>Fr</th>
  241. <th>Sa</th>
  242. </tr>
  243. </thead>
  244. <tbody></tbody>
  245. </table>
  246. <div className="datepicker-calendar-footer">
  247. <button type="button" className="datepicker-today">Today</button>
  248. </div>
  249. </div>
  250. <div className="datepicker-wheels" aria-hidden="true">
  251. <div className="datepicker-wheels-month">
  252. <h2 className="header">Month</h2>
  253.  
  254. <ul>
  255. <li data-month="0">
  256. <button type="button">Jan</button>
  257. </li>
  258. <li data-month="1">
  259. <button type="button">Feb</button>
  260. </li>
  261. <li data-month="2">
  262. <button type="button">Mar</button>
  263. </li>
  264. <li data-month="3">
  265. <button type="button">Apr</button>
  266. </li>
  267. <li data-month="4">
  268. <button type="button">May</button>
  269. </li>
  270. <li data-month="5">
  271. <button type="button">Jun</button>
  272. </li>
  273. <li data-month="6">
  274. <button type="button">Jul</button>
  275. </li>
  276. <li data-month="7">
  277. <button type="button">Aug</button>
  278. </li>
  279. <li data-month="8">
  280. <button type="button">Sep</button>
  281. </li>
  282. <li data-month="9">
  283. <button type="button">Oct</button>
  284. </li>
  285. <li data-month="10">
  286. <button type="button">Nov</button>
  287. </li>
  288. <li data-month="11">
  289. <button type="button">Dec</button>
  290. </li>
  291. </ul>
  292. </div>
  293. <div className="datepicker-wheels-year">
  294. <h2 className="header">Year</h2>
  295.  
  296. <ul></ul>
  297. </div>
  298. <div className="datepicker-wheels-footer clearfix">
  299. <button type="button" className="btn datepicker-wheels-back"><span className="glyphicon glyphicon-arrow-left"></span><span className="sr-only">Return to Calendar</span>
  300.  
  301. </button>
  302. <button type="button" className="btn datepicker-wheels-select">Select <span className="sr-only">Month and Year</span>
  303.  
  304. </button>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. <h4>$language['supervisor']?></h4>
  313. <div className="input-group">
  314. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-user"></i></span>
  315. <input name="supervisor" className="form-control" placeholder="$language['egbobblob']?>" aria-describedby="basic-addon1" type="text"/>
  316. </div>
  317. <h4>$language['implementer']?></h4>
  318. <div className="input-group">
  319. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-user"></i></span>
  320. <input name="implementer" className="form-control" placeholder="" aria-describedby="basic-addon1" type="text"/>
  321. </div>
  322. <h4>$language['status']?></h4>
  323. <div className="input-group">
  324. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-check-square-o"></i></span>
  325. {/* <input name="status_id" className="form-control" placeholder="" aria-describedby="basic-addon1" type="text"> */}
  326. <select name="status_id" className="form-control">
  327. <option value="1">$language['pending'] ?></option>
  328. <option value="2">$language['postponed'] ?></option>
  329. <option value="3">$language['processing'] ?></option>
  330. <option value="4">$language['validating']?></option>
  331. <option value="5">$language['accomplished']?></option>
  332. <option value="6">$language['cancelled']?></option>
  333. </select>
  334. </div>
  335. </div>
  336. <div className="modal-footer">
  337. <button type="button" className="btn btn-default" data-dismiss="modal">$language['close']?></button>
  338. <input className="btn btn-primary" value="$language['submit']?>" type="submit"/>
  339. </div>
  340. </form>
  341. </div>
  342. </div>
  343. </div>
  344. <div style={{display: 'none'}} className="modal fade" id="addtasklist" tabIndex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  345. <div className="modal-dialog ">
  346. <div className="modal-content">
  347. <div className="modal-header">
  348. <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">?</span>
  349. </button>
  350. <h4 className="modal-title" id="myModalLabel">$language['addtasklist']?></h4>
  351. </div>
  352. <form id="addtasklistform" method="POST" onsubmit="addTaskList($project_id ?>)">
  353. <div className="modal-body">
  354. <h4>$language['tasklistdescription']?></h4>
  355. <div className="input-group">
  356. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-pencil-square-o"></i></span>
  357. <input name="tasklist_desc" className="form-control" placeholder="$language['tasklistdescription']?>" aria-describedby="basic-addon1" type="text"/>
  358. </div>
  359. <h4>$language['supervisor']?></h4>
  360. <div className="input-group">
  361. <span className="input-group-addon" id="basic-addon1"><i className="fa fa-user"></i></span>
  362. <input name="tasklist_supervisor" className="form-control" placeholder="$language['egbobblob']?>" aria-describedby="basic-addon1" type="text"/>
  363. </div>
  364. </div>
  365. <div className="modal-footer">
  366. <button type="button" className="btn btn-default" data-dismiss="modal">$language['close']?></button>
  367. <input className="btn btn-primary" value="$language['submit']?>" type="submit"/>
  368. </div>
  369. </form>
  370. </div>
  371. </div>
  372. </div>
  373. <div className="row" style={{marginTop: '15px'}}>
  374. <div className="col-md-12">
  375. <table width="100%">
  376. <tbody>
  377. <tr className="table-header">
  378. <td className="col-md-5">$language['task'] ?></td>
  379. <td className="col-md-1">$language['start'] ?></td>
  380. <td className="col-md-1">$language['due'] ?></td>
  381. <td className="col-md-1">$language['supervisor'] ?></td>
  382. <td className="col-md-1">$language['implementer'] ?></td>
  383. <td className="col-md-1">$language['status'] ?></td>
  384. </tr>
  385. {
  386. this.state.tasklists.map(function(tasklist, index) {
  387.  
  388. var tasks = tasklist.tasks.map(function(task, task_index) {
  389. <tr className={"\"" + "task collapse out accord" + (index + 1) + "\""}>
  390. <td className="col-md-5"><div className="invis delete-button" >×</div>{task.description}</td> {/*onclick delete*/}
  391. <td className="col-md-1">{task.timestart}</td>
  392. <td className="col-md-1">{task.timedue}</td>
  393. <td className="col-md-1">{task.supervisor}</td>
  394. <td className="col-md-1">{task.implementer}</td>
  395. <td className="col-md-1">
  396. <div className="dropdown task-status">
  397. <div href="#" className="dropdown-toggle" data-toggle="dropdown" data-taskid={"\"" + task.id + "\""}>{task.status_id}<span className="caret"></span></div>
  398. <ul className="dropdown-menu">
  399. <li><a className="status-changer" href="#">$language['pending'] ?></a>
  400. </li>
  401. <li><a className="status-changer" href="#">$language['postponed'] ?></a>
  402. </li>
  403. <li><a className="status-changer" href="#">$language['processing'] ?></a>
  404. </li>
  405. <li><a className="status-changer" href="#">$language['validating']?></a>
  406. </li>
  407. <li><a className="status-changer" href="#">$language['accomplished'] ?></a>
  408. </li>
  409. <li><a className="status-changer" href="#">$language['cancelled']?></a>
  410. </li>
  411. </ul>
  412. </div>
  413. </td>
  414. </tr>
  415. });
  416. return (
  417. <tr className="tasklist-header " data-toggle="collapse" data-target={"\"" + ".accord" + (index + 1) + "\""} >
  418. <td><strong>{tasklist.description + " (" . $language['supervisedby'] + " " + tasklist.supervisor + ")" }</strong></td>
  419. </tr>
  420.  
  421. )
  422. })
  423. }
  424. </tbody>
  425. </table>
  426. </div>
  427. </div>
  428. </div>
  429. );
  430. }
  431. });
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!