API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 17th, 2017
554
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
  6. <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  8.  
  9. <meta charset="utf-8">
  10. <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  11. <title>Flat Responsive Dashboard Design - Bootsnipp.com</title>
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  14. <style type="text/css">
  15. /*Main CSS*/
  16.  
  17.  
  18. /*Login Signup Page*/
  19. a:focus,a:hover,a{
  20. outline:none;
  21. text-decoration: none;
  22. }
  23. li,ul{
  24. list-style: none;
  25. padding: 0;
  26. margin: 0;
  27. }
  28. .header-top i {
  29. font-size: 18px;
  30. }
  31. .bg-image {
  32. background: url(../images/background-login.jpg) no-repeat 0 0 / cover;
  33. position: relative;
  34. width: 100%;
  35. height: 100vh;
  36. display: table;
  37. }
  38.  
  39. .login-header {
  40. display: inline-block;
  41. width: 100%;
  42. background: #0e1a35;
  43. }
  44. .login-button{
  45. margin-top: 100px;
  46. width: 35%;
  47. background: #0e1a35;
  48. text-align: center;
  49.  
  50. }
  51.  
  52. .login-signup {
  53. display: table-cell;
  54. vertical-align: middle;
  55. width: 100%;
  56. }
  57.  
  58. .login-logo img {
  59. cursor: pointer;
  60. max-width: 171px;
  61. padding: 23px 15px 22px;
  62. width: 100%;
  63. }
  64.  
  65. .login-header .navbar-right {
  66. margin-right: 0px;
  67. }
  68.  
  69. .login-header .nav-tabs > li.active > a,
  70. .login-header .nav-tabs > li.active > a:focus,
  71. .login-header .nav-tabs > li.active > a:hover {
  72. background-color: transparent;
  73. border: none;
  74. color: #fff;
  75. }
  76.  
  77. .login-header .nav-tabs > li > a {
  78. border: medium none;
  79. border-radius: 0;
  80. font-size: 14px;
  81. font-weight: 500;
  82. line-height: 48px;
  83. padding: 15px 30px;
  84. color: #fff;
  85. }
  86.  
  87. .login-header .nav-tabs {
  88. border-bottom: none;
  89. }
  90.  
  91. .login-header .nav-tabs > li {
  92. margin-bottom: 0px;
  93. }
  94.  
  95. .login-header .nav > li > a:focus,
  96. .login-header .nav > li > a:hover {
  97. background: none;
  98. text-decoration: none;
  99. }
  100.  
  101. .login-header .nav-tabs > li.active {
  102. border-bottom: 6px solid #5584ff;
  103. }
  104.  
  105. .login-inner h1 {
  106. color: #8492af;
  107. font-size: 48px;
  108. font-weight: 300;
  109. text-align: center;
  110. margin-top: 0;
  111. margin-bottom: 20px;
  112. }
  113.  
  114. .login-inner h1 span {
  115. color: #5584ff;
  116. }
  117.  
  118. .login-form {
  119. text-align: center;
  120. }
  121.  
  122. .login-form input {
  123. -moz-border-bottom-colors: none;
  124. -moz-border-left-colors: none;
  125. -moz-border-right-colors: none;
  126. -moz-border-top-colors: none;
  127. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  128. border-color: -moz-use-text-color -moz-use-text-color #d4d9e3;
  129. border-image: none;
  130. border-style: none none solid;
  131. border-width: medium medium 1px;
  132. font-size: 13px;
  133. font-weight: 300;
  134. width: 100%;
  135. color: #8492af;
  136. padding: 15px 50px;
  137. font-size: 17px;
  138. max-width: 550px;
  139. }
  140.  
  141. .login-form label {
  142. margin-bottom: 30px;
  143. width: 100%;
  144. }
  145.  
  146. .user input {
  147. background: rgba(0, 0, 0, 0) url("../images/user.png") no-repeat scroll 7px 12px;
  148. }
  149.  
  150. .pass input {
  151. background: rgba(0, 0, 0, 0) url("../images/password.png") no-repeat scroll 7px 12px;
  152. }
  153.  
  154. .mail input {
  155. background: rgba(0, 0, 0, 0) url("../images/mail.png") no-repeat scroll 4px 12px;
  156. }
  157.  
  158. .login-signup .tab-content {
  159. background: #ffffff none repeat scroll 0 0;
  160. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  161. display: inline-block;
  162. margin-top: -8px;
  163. width: 100%;
  164. }
  165.  
  166. .form-btn {
  167. background: #5584ff none repeat scroll 0 0;
  168. border: medium none;
  169. border-radius: 100px;
  170. color: #ffffff;
  171. font-weight: 400;
  172. max-width: 250px;
  173. padding: 10px 0;
  174. position: relative;
  175. width: 100%;
  176. margin: 40px 0;
  177. box-shadow: 0 2px 8px #d2d2d2;
  178. -moz-box-shadow: 0 2px 8px #d2d2d2;
  179. -webkit-box-shadow: 0 2px 8px #d2d2d2;
  180. }
  181.  
  182. .form-btn::before {
  183. content: "";
  184. font-family: FontAwesome;
  185. position: absolute;
  186. right: 17px;
  187. top: 9px;
  188. }
  189.  
  190. .form-details {
  191. padding: 35px 0;
  192. }
  193.  
  194. .tab-content .tab-pane {
  195. padding: 70px 0;
  196. }
  197.  
  198.  
  199. /*Login Signup Page*/
  200.  
  201.  
  202. /*Home Page*/
  203.  
  204. .home {
  205. background: #f6f7fa;
  206. }
  207.  
  208. #navigation {
  209. background: #0e1a35;
  210. }
  211.  
  212. #navigation {
  213. padding: 0;
  214. }
  215.  
  216. .display-table {
  217. display: table;
  218. padding: 0;
  219. height: 100%;
  220. width: 100%;
  221. }
  222.  
  223. .display-table-row {
  224. display: table-row;
  225. height: 100%;
  226. }
  227.  
  228. .display-table-cell {
  229. display: table-cell;
  230. float: none;
  231. height: 100%;
  232. }
  233.  
  234. .v-align {
  235. vertical-align: top;
  236. }
  237. .logo img {
  238. max-width: 180px;
  239. padding: 16px 0 17px;
  240. width: 100%;
  241. }
  242.  
  243. .header-top {
  244. margin: 0;
  245. padding-top: 2px;
  246. }
  247.  
  248. .header-top img {
  249. border-radius: 50%;
  250. max-width: 48px !important;
  251. width: 100%;
  252. }
  253.  
  254. .add-project {
  255. background: #5584ff none repeat scroll 0 0;
  256. border-radius: 100px;
  257. color: #ffffff;
  258. font-size: 14px;
  259. font-weight: 600;
  260. padding: 10px 27px 10px 45px;
  261. position: relative;
  262. }
  263.  
  264. .header-rightside .nav > li > a:focus,
  265. .header-rightside .nav > li > a:hover {
  266. background: none;
  267. text-decoration: none;
  268. }
  269.  
  270. .add-project::before {
  271. background: rgba(0, 0, 0, 0) url("../images/plus.png") no-repeat scroll 0 0;
  272. content: "";
  273. ;
  274. height: 12px;
  275. left: 17px;
  276. position: absolute;
  277. top: 12px;
  278. width: 12px;
  279. }
  280.  
  281. .add-project:hover {
  282. color: #ffffff;
  283. }
  284.  
  285. .header-top i {
  286. color: #0e1a35;
  287. }
  288.  
  289. .icon-info {
  290. position: relative;
  291. }
  292. .navi i {
  293. font-size: 20px;
  294. }
  295. .label.label-primary {
  296. border-radius: 50%;
  297. font-size: 9px;
  298. left: 8px;
  299. position: absolute;
  300. top: -9px;
  301. }
  302.  
  303. .icon-info .label {
  304. border: 2px solid #ffffff;
  305. font-weight: 500;
  306. padding: 3px 5px;
  307. text-align: center;
  308. }
  309.  
  310. .header-top li {
  311. display: inline-block;
  312. text-align: center;
  313. }
  314.  
  315. .header-top .dropdown-toggle {
  316. color: #0e1a35;
  317. }
  318.  
  319. .header-top .dropdown-menu {
  320. border: medium none;
  321. left: -85px;
  322. padding: 17px;
  323. }
  324. .view {
  325. background: #5584ff none repeat scroll 0 0;
  326. border-radius: 100px;
  327. color: #ffffff;
  328. display: inline-block;
  329. font-size: 14px;
  330. font-weight: 600;
  331. margin-top: 10px;
  332. padding: 10px 15px;
  333. }
  334.  
  335. .navbar-content > span {
  336. font-size: 13px;
  337. font-weight: 700;
  338. }
  339.  
  340. .img-responsive {
  341. width: 100%;
  342. }
  343. #navigation{
  344. -webkit-transition: all 0.5s ease;
  345. -moz-transition: all 0.5s ease;
  346. -o-transition: all 0.5s ease;
  347. transition: all 0.5s ease;
  348. }
  349. .search input {
  350. border: none;
  351. font-size: 15px;
  352. padding: 15px 9px;
  353. width: 100%;
  354. background: rgba(0, 0, 0, 0) url("../images/search.png") no-repeat scroll 99% 12px;
  355. color: #8492af;
  356. }
  357.  
  358. header {
  359. background: #ffffff none repeat scroll 0 0;
  360. box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
  361. display: inline-block !important;
  362. line-height: 23px;
  363. padding: 15px;
  364. transition: all 0.5s ease 0s;
  365. width: 100%;
  366. -webkit-transition: all 0.5s ease;
  367. -moz-transition: all 0.5s ease;
  368. -o-transition: all 0.5s ease;
  369. transition: all 0.5s ease;
  370. }
  371.  
  372. .logo {
  373. text-align: center;
  374. }
  375.  
  376. .navi a {
  377. border-bottom: 1px solid #0d172e;
  378. border-top: 1px solid #0d172e;
  379. color: #ffffff;
  380. display: block;
  381. font-size: 17px;
  382. font-weight: 500;
  383. padding: 28px 20px;
  384. text-decoration: none;
  385. }
  386.  
  387. .navi i {
  388. margin-right: 15px;
  389. color: #5584ff;
  390. }
  391.  
  392. .navi .active a {
  393. background: #122143;
  394. border-left: 5px solid #5584ff;
  395. padding-left: 15px;
  396. }
  397.  
  398. .navi a:hover {
  399. background: #122143 none repeat scroll 0 0;
  400. border-left: 5px solid #5584ff;
  401. display: block;
  402. padding-left: 15px;
  403. }
  404.  
  405. .navbar-default {
  406. background-color: #ffffff;
  407. border-color: #ffffff;
  408. }
  409.  
  410. .navbar-toggle {
  411. border: none;
  412. }
  413.  
  414. .navbar-default .navbar-toggle:focus,
  415. .navbar-default .navbar-toggle:hover {
  416. background-color: rgba(0, 0, 0, 0);
  417. }
  418.  
  419. .navbar-default .navbar-toggle .icon-bar {
  420. background-color: #0e1a35;
  421. }
  422.  
  423. .circle-logo {
  424. margin: 0 auto;
  425. max-width: 30px !important;
  426. text-align: center;
  427. }
  428. .hidden-xs{
  429. -webkit-transition: all 0.5s ease;
  430. -moz-transition: all 0.5s ease;
  431. -o-transition: all 0.5s ease;
  432. transition: all 0.5s ease;
  433. }
  434.  
  435. .user-dashboard {
  436. padding: 0 20px;
  437. }
  438.  
  439. .user-dashboard h1 {
  440. color: #0e1a35;
  441. font-size: 30px;
  442. font-weight: 500;
  443. margin: 0;
  444. padding: 21px 0;
  445. }
  446. .sales {
  447. background: #ffffff none repeat scroll 0 0;
  448. border: 1px solid #d4d9e3;
  449. display: inline-block;
  450. padding: 15px;
  451. width: 100%;
  452. }
  453. .sales button {
  454. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  455. border: 1px solid #dadee7;
  456. border-radius: 100px;
  457. font-size: 15px;
  458. letter-spacing: 0.5px;
  459. padding-right: 32px;
  460. color: #0e1a35;
  461. }
  462.  
  463. .sales button::before {
  464. content: "";
  465. font-family: FontAwesome;
  466. position: absolute;
  467. right: 12px;
  468. top: 11px;
  469. }
  470. .sales .btn-group {
  471. float: right;
  472. }
  473. .sales h2 {
  474. color: #8492af;
  475. float: left;
  476. font-size: 21px;
  477. font-weight: 600;
  478. margin: 0;
  479. padding: 9px 0 0;
  480. }
  481. .btn.btn-secondary.btn-lg.dropdown-toggle > span {
  482. font-size: 15px;
  483. font-weight: 600;
  484. letter-spacing: 0.5px;
  485. }
  486. .sales .dropdown-menu{
  487. margin: 0px;
  488. padding: 0px;
  489. border: 0px;
  490. border-radius: 8px;
  491. width: 100%;
  492. color: #0e1a35;
  493. }
  494. .sales .btn-group.open .dropdown-toggle, .btn.active, .btn:active{
  495. box-shadow: none;
  496. }
  497. .sales .dropdown-menu > a {
  498. color: #0e1a35;
  499. display: inline-block;
  500. font-weight: 800;
  501. padding: 9px 0;
  502. text-align: center;
  503. width: 100%;
  504. }
  505. #my-cool-chart svg {
  506. width: 100%;
  507. }
  508. .sales .dropdown-menu > a:hover{
  509. color: #5584FF;
  510. }
  511. .shield-buttons {
  512. display: none;
  513. }
  514. .close, .close:focus, .close:hover {
  515. color: #fff;;
  516. opacity: 1;
  517. text-shadow: none;
  518. }
  519. .modal-body input {
  520. border: 1px solid #d4d9e3;
  521. font-size: 14px;
  522. font-weight: 300;
  523. margin: 5px 0;
  524. padding: 14px 10px;
  525. width: 100%;
  526. color: #8492af;
  527. }
  528. .modal-body textarea {
  529. border: 1px solid #d4d9e3;
  530. font-size: 14px;
  531. font-weight: 300;
  532. height: 200px;
  533. margin-top: 5px;
  534. padding: 9px 10px;
  535. width: 100%;
  536. color: #8492af;
  537. }
  538. .modal-header.login-header h4 {
  539. color: #ffffff;
  540. }
  541. .modal-footer .add-project {
  542. background: #5584ff none repeat scroll 0 0;
  543. border: medium none;
  544. border-radius: 100px;
  545. color: #ffffff;
  546. font-size: 14px;
  547. font-weight: 600;
  548. padding: 10px 30px;
  549. position: relative;
  550. }
  551. .modal-footer .add-project::before{display: none;}
  552. .modal-footer {
  553. border: 0 none;
  554. padding: 10px 15px 26px;
  555. text-align: right;
  556. }
  557. .cancel {
  558. background: #0E1A35 ;
  559. border: medium none;
  560. border-radius: 100px;
  561. color: #ffffff;
  562. font-size: 14px;
  563. font-weight: 600;
  564. padding: 10px 30px;
  565. position: relative;
  566.  
  567. }
  568. .modal{
  569. top: 20%;
  570. }
  571. .modal-header .close {
  572. margin-top: 2px;
  573. }
  574. .search input:focus{
  575. border-bottom: 1px solid #BDC4D4;
  576. line-height:22px;
  577. transition: 0.1s all;
  578. }
  579. .modal-header.login-header {
  580. border-top-left-radius: 5px;
  581. border-top-right-radius: 5px;
  582. /*Main CSS*/
  583.  
  584.  
  585.  
  586.  
  587.  
  588.  
  589. @media only screen and (max-device-width: 767px) {
  590. .login-logo img {
  591. margin: 0 auto;
  592. }
  593. .login-details .nav-tabs > li {
  594. text-align: center;
  595. width: 50%;
  596. }
  597. .login-signup .login-inner h1 {
  598. font-size: 26px;
  599. margin-bottom: 0;
  600. margin-top: 10px;
  601. }
  602. .login-inner .login-form input {
  603. font-size: 15px;
  604. max-width: 100%;
  605. padding: 15px 45px;
  606. }
  607. .login-inner .form-details {
  608. padding: 25px;
  609. }
  610. .login-inner .login-form label {
  611. margin-bottom: 20px;
  612. width: 100%;
  613. }
  614. .login-inner .form-btn {
  615. margin: 0;
  616. max-width: 180px;
  617. }
  618. .tab-content .tab-pane {
  619. padding: 20px 0;
  620. }
  621. #navigation .navi a {
  622. font-size: 14px;
  623. padding: 20px;
  624. text-align: center;
  625. }
  626. #navigation .navi i {
  627. margin-right: 0px;
  628. }
  629. #navigation .navi a:hover,
  630. #navigation .navi .active a {
  631. background: #122143 none repeat scroll 0 0;
  632. border-left: none;
  633. display: block;
  634. padding-left: 20px;
  635. }
  636. header .header-top img {
  637. max-width: 38px !important;
  638. }
  639. .v-align header {
  640. padding: 12px 15px;
  641. }
  642. header .header-top li {
  643. padding-left: 13px;
  644. padding-right: 6px;
  645. }
  646. .navbar-default .navbar-toggle {
  647. border-color: rgba(0, 0, 0, 0);
  648. }
  649. .navbar-header .navbar-toggle {
  650. float: left;
  651. margin: 0;
  652. padding: 0;
  653. top: 12px;
  654. }
  655. button,
  656. html [type="button"],
  657. [type="reset"],
  658. [type="submit"] {
  659. outline: medium none;
  660. }
  661. .user-dashboard .sales h2 {
  662. color: #8492af;
  663. float: left;
  664. font-size: 14px;
  665. font-weight: 600;
  666. margin: 0;
  667. padding: 13px 0 0;
  668. }
  669. .user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
  670. font-size: 11px;
  671. }
  672. .user-dashboard .sales button {
  673. font-size: 11px;
  674. padding-right: 23px;
  675. }
  676. .user-dashboard .sales h2 {
  677. font-size: 12px;
  678. }
  679. .gutter{
  680. padding: 0;
  681. }
  682. }
  683.  
  684. @media only screen and (max-device-width: 992px) {
  685. header .header-top li {
  686. padding-left: 20px !important;
  687. padding-right: 0;
  688. }
  689. header .logo img {
  690. max-width: 125px !important;
  691. }
  692.  
  693. }
  694.  
  695. @media only screen and (min-device-width: 767px) and (max-device-width: 998px){
  696. .user-dashboard .header-top {
  697. padding-top: 5px;
  698. }
  699. .user-dashboard .header-rightside {
  700. display: inline-block;
  701. float: left;
  702. width: 100%;
  703. }
  704. .user-dashboard .header-rightside .header-top img {
  705. max-width: 41px !important;
  706. }
  707. .user-dashboard .sales button {
  708. font-size: 10px;
  709. }
  710. .user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
  711. font-size: 12px;
  712. }
  713. .user-dashboard .sales h2 {
  714. font-size: 15px;
  715. }
  716. }
  717. @media only screen and (min-device-width:998px) and (max-device-width: 1350px){
  718. #navigation .logo img {
  719. max-width: 130px;
  720. padding: 16px 0 17px;
  721. width: 100%;
  722. }
  723. }
  724. </style>
  725. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  726. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  727. </head>
  728. <body>
  729. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  730. <body class="home">
  731.  
  732. <div id="reactcomps"></div>
  733.  
  734.  
  735.  
  736.  
  737. </body>
  738. <script type="text/javascript">
  739. $(document).ready(function(){
  740. $('[data-toggle="offcanvas"]').click(function(){
  741. $("#navigation").toggleclassName("hidden-xs");
  742. });
  743. });
  744.  
  745. </script>
  746.  
  747. <script type="text/babel">
  748.  
  749. class MainComponent extends React.Component{
  750. constructor(props){
  751. super(props);
  752. this.state={active:'home',sidebar:<SideBar parent={this}/>};
  753.  
  754. }
  755.  
  756.  
  757. render(){
  758. var active=this.state.active;
  759.  
  760. var menus={
  761. 'home':'',
  762. 'settings':<SaveSettings/>,
  763. 'musics':'musics',
  764. 'playlists':'playlists'
  765. };
  766.  
  767.  
  768. console.log('entra no render');
  769.  
  770. return(
  771. <div className="container-fluid display-table">
  772. <div className="row display-table-row">
  773. <div className="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation">
  774. {this.state.sidebar}
  775. </div>
  776. <div className="col-md-10 col-sm-11 display-table-cell v-align">
  777.  
  778. <div className="row">
  779. <header>
  780. <div className="col-md-7">
  781. <nav className="navbar-default pull-left">
  782. <div className="navbar-header">
  783. <button type="button" className="navbar-toggle collapsed" data-toggle="offcanvas" data-target="#side-menu" aria-expanded="false">
  784. <span className="sr-only">Toggle navigation</span>
  785. <span className="icon-bar"></span>
  786. <span className="icon-bar"></span>
  787. <span className="icon-bar"></span>
  788.  
  789. </button>
  790. </div>
  791. </nav>
  792. <div className="search hidden-xs hidden-sm">
  793. <input type="text" placeholder="Search" id="search"></input>
  794. </div>
  795. </div>
  796. <div className="col-md-5">
  797. <div className="header-rightside">
  798. <ul className="list-inline header-top pull-right">
  799. <li className="dropdown">
  800. <a href="#" className="dropdown-toggle" data-toggle="dropdown"><p>user</p>
  801. <b className="caret"></b></a>
  802. <ul className="dropdown-menu">
  803. <li>
  804. <div className="navbar-content">
  805. <span>JS Krishna</span>
  806. <p className="text-muted small">
  807. me@jskrishna.com
  808. </p>
  809. <div className="divider">
  810. </div>
  811. <a href="#" className="view btn-sm active">View Profile</a>
  812. </div>
  813. </li>
  814. </ul>
  815. </li>
  816. </ul>
  817. </div>
  818. </div>
  819. </header>
  820. </div>
  821.  
  822. <div>{menus[active]}</div>
  823. </div>
  824.  
  825. </div>
  826.  
  827. </div>
  828. );
  829.  
  830.  
  831. }
  832.  
  833.  
  834. }
  835.  
  836. class SideBar extends React.Component{
  837. constructor(props){
  838. super(props);
  839. this.state={active:'home'};
  840.  
  841. this.activateHome=this.activateHome.bind(this);
  842. this.activateMusics=this.activateMusics.bind(this);
  843. this.activatePlaylists=this.activatePlaylists.bind(this);
  844. this.activateSettings=this.activateSettings.bind(this);
  845.  
  846. }
  847. activateHome(){
  848. console.log(this.state.active);
  849. this.setState({active:'home'});
  850. this.props.parent.setState({active:'home'});
  851. console.log('1');
  852. }
  853.  
  854. activateMusics(){
  855. this.setState({active:'musics'});
  856. this.props.parent.setState({active:'musics'});
  857. console.log('2');
  858. }
  859.  
  860. activatePlaylists(){
  861. this.setState({active:'playlists'});
  862. this.props.parent.setState({active:'playlists'});
  863. console.log('3');
  864. }
  865.  
  866. activateSettings(){
  867. this.setState({active:'settings'});
  868. this.props.parent.setState({active:'settings'});
  869. console.log('3');
  870. }
  871.  
  872. render(){
  873. return(
  874. <div className="navi">
  875. <ul>
  876. <li className={this.state.active=='home'? 'active' : 'inactive'} onClick={this.activateHome}><a><i className="fa fa-home" aria-hidden="true"></i><span className="hidden-xs hidden-sm">Home</span></a></li>
  877. <li className={this.state.active=='musics'? 'active' : 'inactive'} onClick={this.activateMusics}><a><i className="fa fa-tasks" aria-hidden="true"></i><span className="hidden-xs hidden-sm">Musics</span></a></li>
  878. <li className={this.state.active=='playlists'? 'active' : 'inactive'} onClick={this.activatePlaylists}><a><i className="fa fa-bar-chart" aria-hidden="true"></i><span className="hidden-xs hidden-sm">Playlists</span></a></li>
  879. <li className={this.state.active=='settings'? 'active' : 'inactive'} onClick={this.activateSettings}><a><i className="fa fa-cog" aria-hidden="true"></i><span className="hidden-xs hidden-sm">Account Settings</span></a></li>
  880. </ul>
  881. </div>
  882. );
  883. }
  884.  
  885.  
  886. }
  887.  
  888. class SaveSettings extends React.Component{
  889. clicked(){
  890. var home='http://localhost:8000/account/edit';
  891. var get_username = "teste"
  892. var get_token = "token"
  893. var dat={
  894. username:get_username,
  895. token:get_token,
  896. newname:$('#newname').val(),
  897. newemail:$('#newemail').val(),
  898. newpassword:$('#newname').val(),
  899. }
  900. $.ajax({
  901. type: 'PUT',
  902. url: home,
  903. dataType: 'text',
  904. data: JSON.stringify(dat),
  905. contentType: 'application/json',
  906. success: function(data) {
  907. alert("account edited successfully");
  908.  
  909. }.bind(this),
  910. error: function(xhr, status, err) {
  911. alert("Problem in editing information.");
  912. }.bind(this)
  913. }
  914. );
  915. }
  916. render(){
  917. console.log('entra no render do ss');
  918. return(
  919.  
  920. <div className="SaveSettings">
  921. <div className="user-dashboard">
  922. <h1>Hello, JS</h1>
  923. <div className="row">
  924. <div className="col-md-5 col-sm-5 col-xs-12 gutter">
  925. <div className="sales">
  926. <h2>Current Information</h2>
  927.  
  928. </div>
  929. <div class="form-group">
  930. <label for="name" class="cols-sm-2 control-label">Current Name:</label>
  931. <div class="cols-sm-10">
  932. <label for="name" class="cols-sm-2 control-label">Name</label>
  933. </div>
  934. </div>
  935. <div class="form-group">
  936. <label for="name" class="cols-sm-2 control-label">Current Email:</label>
  937. <div class="cols-sm-10">
  938. <label for="name" class="cols-sm-2 control-label">email@email.com</label>
  939. </div>
  940. </div>
  941. </div>
  942. <div className="col-md-7 col-sm-7 col-xs-12 gutter">
  943. <div className="sales report">
  944. <h2>New Information</h2>
  945.  
  946. </div>
  947. <form class="form-horizontal" >
  948.  
  949. <div class="form-group">
  950. <label for="name" class="cols-sm-2 control-label">Your New Name</label>
  951. <div class="cols-sm-10">
  952. <div class="input-group">
  953. <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
  954. <input type="text" class="form-control" name="name" id="name" placeholder="Enter your new Name"/>
  955. </div>
  956. </div>
  957. </div>
  958.  
  959. <div class="form-group">
  960. <label for="email" class="cols-sm-2 control-label">Your New Email</label>
  961. <div class="cols-sm-10">
  962. <div class="input-group">
  963. <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
  964. <input type="text" class="form-control" name="email" id="email" placeholder="Enter your new Email"/>
  965. </div>
  966. </div>
  967. </div>
  968.  
  969.  
  970.  
  971. <div class="form-group">
  972. <label for="password" class="cols-sm-2 control-label">Your New Password</label>
  973. <div class="cols-sm-10">
  974. <div class="input-group">
  975. <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
  976. <input type="password" class="form-control" name="password" id="password" placeholder="Enter your new Password"/>
  977. </div>
  978. </div>
  979. </div>
  980. </form>
  981.  
  982. </div>
  983.  
  984. </div>
  985.  
  986. </div>
  987. <div className="form-group ">
  988. <button type="button" className="btn btn-primary btn-lg btn-block login-button" onClick={this.clicked} >Save</button>
  989. </div>
  990. </div>
  991. );
  992.  
  993. }
  994.  
  995. }
  996. //ReactDOM.render(<SaveSettings/>, document.getElementById("save_Settings"));
  997.  
  998. ReactDOM.render(<MainComponent/>,document.getElementById("reactcomps"));
  999.  
  1000.  
  1001.  
  1002. </script>
  1003.  
  1004.  
  1005. </body>
  1006. </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!