<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/adnenrebai/pen/brGQeV?depth=everything&order=popularity&page=37&q=react&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway');
:focus {
outline: 0;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
html,body{
height:100%;
width:100%;
padding: 0;
margin:0;
overflow-x:hidden;
}
.TodoAR{
padding:25px 15px;
}
.container{
font-family:'Raleway', sans-serif;
sans-serif;
max-width:350px;
margin:auto;
margin-top:25px;
border-radius:15px;
box-shadow:0px 0px 50px 2px rgb(125, 165, 201);
background:url(https://images.pexels.com/photos/388065/pexels-photo-388065.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
}
.header-container{
opacity:0.8;
overflow:hidden;
}
.header{
padding:5px 35px;
border-top-left-radius:15px;
border-top-right-radius:15px;
position:relative;
}
.header::after{
border-top-left-radius:15px;
border-top-right-radius:15px;
content:"";
background:rgb(125, 165, 201);
width:100%;
height:200px;
display:block;
position:absolute;
opacity:0.7;
left:0;
top:0;
z-index: -1;
}
.header img{
margin:20px 0;
width:50px;
height:50px;
border-radius:50%;
border: solid 2px white;
}
.info{
display:inline-block;
position:absolute;
top:30px;
margin-left:10px;
color:white;
}
.info h3{
margin:0;
font-size:20px;
letter-spacing:1.2px;
}
.info span{
font-size:10px;
}
.triangle{
opacity:0.98;
border-bottom:solid 50px white;
border-right:solid 175px transparent;
border-top:solid 50px transparent;
border-left:solid 180px white;
position:relative;
}
.t-text{
position:absolute;
display:block;
width:100px;
left:-150px;
font-size:25px;
top:5px;
font-family: 'Open Sans Condensed', sans-serif;
}
.title{
color:white;
font-size:15px;
}
.activity-container{
font-family: 'Open Sans Condensed', sans-serif;
position:relative;
background:white;
padding:10px 0 15px 25px;
color:#aaa;
transition:300ms;
position:relative;
z-index:100;
transition:300 ms;
border-bottom:solid 1px #ddd;
opacity:0.8
}
.activity-container::before{
content:"";
display:block;
height:78px;
width:5px;
position:absolute;
background:#84aacf;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
left:0;
top:0;
transition:300ms;
z-index:-1;
}
.activity-container:hover{
z-index:200;
transform:scale(1.05);
box-shadow:0px 0px 20px 2px rgba(133, 177, 183, 0.37);
color:white;
opacity:1;
border-radius:10px;
}
.activity-container:hover::before{
width:100%;
background:linear-gradient(45deg,rgb(103, 144, 188),rgba(157, 191, 222, 0.8));
border-radius:10px;
}
.activity-container.active > .activity-data > h3{
text-decoration: line-through;
color:#8BC34A;
}
.activity-container.active > .activity-data > span{
text-decoration: line-through;
color:#8BC34A;
}
.activity-container.active::before{
content: "";
display: block;
height: 78px;
width: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
background: #8BC34A;
left: 0;
top: 0;
transition: 300ms;
z-index: -1;
}
.activity-container.active:hover{
z-index:200;
border-radius:10px;
transform:scale(1.05);
box-shadow:0px 0px 20px 2px rgba(133, 177, 183, 0.37);
color:white;
opacity:1;
}
.activity-container.active:hover::before{
background:linear-gradient(45deg , #7dac3a,#CDDC39);
}
.activity-container.active:hover > .activity-data > h3{
color:white;
}
.activity-container.active:hover > .activity-data > span{
color:white;
}
.activity-container.active:hover::before{
width:100%;
}
.a-text{
margin:0;
padding:5px 0 0 0;
}
.inline{
display:inline-block;
}
.controle{
position:absolute;
right:20px;
top:12px;
padding:15px;
height:50px;
box-sizing:border-box;
}
.c-icon{
display:block;
position:absolute;
right:0;
top:5px;
color:rgb(125, 165, 201);
cursor:pointer;
background:white;
padding:10px;
border-radius:50%;
outline:none;
box-shadow:0px 0px 20px 2px rgba(133, 177, 183, 0.37);
border:solid 2px transparent;
}
.operator{
position:absolute;
right:50px;
top:-18px;
display:none;
}
.c-icon-op{
display: block;
background: white;
color: rgb(125, 165, 201);
width: 30px;
border: none;
outline: none;
height: 30px;
padding:5px;
cursor:pointer;
border-radius: 50%;
box-shadow: 0px 0px 20px 2px rgba(133, 177, 183, 0.37);
}
.c-icon-op.tl {
margin-left: 25px;
}
.c-icon-op.delete:hover
{
background:#f44336;
color:white;
}
.c-icon-op.check:hover
{
background:#8BC34A;
color:white;
}
.c-icon-op.edit:hover
{
background:orange;
color:white;
}
.c-icon:hover{
animation:wave 1s ease-in-out infinite;
}
@keyframes wave{
0%{ box-shadow:0px 0px 20px 2px white }
100%{p box-shadow:0px 0px 80px 2px white}
}
.footer{
padding:5px 35px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background: rgba(122, 149, 171, 0.85);
}
.add-btn-container{
position: relative;
left: 170px;
top: -80px;
z-index:9999;
}
.addButton{
width: 70px;
height: 70px;
border: none;
color: white;
background: #CDDC39;
border-radius: 50%;
position: absolute;
z-index: 1000;
cursor: pointer;
overflow: hidden;
transition:200 ms;
}
.addButton::before{
content:"";
display:block;
width:10px;
height:10px;
left:50%;
top:50%;
border-radius:50%;
position:absolute;
z-index: 0;
transition:300ms;
}
.addButton:hover{
color:white;
}
.addButton:hover::before{
position:absolute;
top: 0px;
left: 0PX;
background: orange;
width: 70PX;
height: 70px;
z-index: -1;
}
.AddTaskContainer{
background:#aaa;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index: 9999;
opacity:0.8;
}
.AddTaskControle{
position:relative;
top:10%;
background:white;
border-radius:10px;
width:150px;
padding:50px;
padding-bottom:0;
margin:0 auto;
animation:show 500ms;
}
@keyframes show {
0%{ opacity:0.1; padding:30px}
100%{ opacity:1; padding:50px ;
}
}
.close-w{
border:none;
background:#f44336;
color:white;
padding:5px;
border-radius:50%;
position:absolute;
top:-5px;
right:-5px;
cursor:pointer;
}
.btn-save{
outline: none;
margin-left: 30px;
margin: 15px auto -30px 35px;
border-radius: 50%;
width: 70px;
height: 70px;
background: #8BC34A;
color: white;
border: none;
cursor: pointer;
}
.containerTime{
text-align:center;
}
.containerInput {
width: 30px;
text-align: center;
display: inline-block;
margin: 0 10px;
background: #8BC34A;
color: white;
border-radius: 15px;
}
.containerInput:nth-child(1){
position:relative;
}
.containerInput:nth-child(1)::after {
content: ':';
font-size: 25px;
display: block;
position: absolute;
right: -14px;
top: 25px;
}
.containerInput > button{
padding:10px;
cursor:pointer;
outline:none;
border: none;
background: none;
color: white;
}
.timeInput{
width: 25px;
display: inline;
text-align: center;
outline: none;
background: #8BC34A;
color: white;
border: none;
padding: 15px 0;
}
label {
text-align: center;
display: block;
padding: 25px;
color: #333333;
}
.InputTaskName {
border: none;
border: solid 2px #4CAF50;
border-radius: 25px;
color: #000;
padding: 10px;
text-align: center;
margin-left: -20px;
outline: none;
}
.InputTaskName.required {
border-color: red;
}
.notifiy{
background:#4CAF50;
color:white;
padding: 10px 5px;
border-radius: 15px;
z-index:100;
position:absolute;
top:0;
-webkit-animation: blink 1s linear infinite;
animation:blink 5s cubic-bezier(0.18, 0.89, 0.32, 1.28) ;
}
@keyframes blink{
0%{top:-10px;opacity:0.8}
50%{top:-20px;opacity:1}
100%{top:-30px;opacity:0 }
}
@-webkit-keyframes notifi{
0%{opacity:1}
50%{opacity:0.5;top:-10px}
100%{opacity:0;top:-20px}
}
.notifiy-icon{
color: #4CAF50;
background: white;
padding: 5px;
border-radius: 50%;
}
.notifiy-text{
padding:5px;
}
.notifiy-task{
margin:5px;
margin-left:30px;
}
.tCompleted {
color: white;
font-size: 12px;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script >"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var author = {
name: "Rebai",
lastName: "Adnen",
job: "Frontend Web developer",
img: "https://adnenre.github.io/images/adnen.jpg"
};
var activities = [{
id: 1,
time: "08:35 am",
title: "Teamwork",
state: "none"
}, {
id: 2,
time: "14:00 am",
title: "Meeting",
state: "active"
}, {
id: 3,
time: "16:00 am",
title: "Testing application",
state: "none"
}, {
id: 4,
time: "16:00 pm",
title: "Play with React",
state: "none"
}, {
id: 5,
time: "18:00 am",
title: "Time for coffe",
state: "active"
}];
var Header = function (_React$Component) {
_inherits(Header, _React$Component);
function Header() {
_classCallCheck(this, Header);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Header.prototype.render = function render() {
return React.createElement(
"div",
{ className: "header-container" },
React.createElement(Author, { aut: author }),
React.createElement(
"div",
{ className: "triangle" },
React.createElement(
"span",
{ className: "t-text" },
"My Tasks"
)
)
);
};
return Header;
}(React.Component);
var Author = function (_React$Component2) {
_inherits(Author, _React$Component2);
function Author() {
_classCallCheck(this, Author);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
Author.prototype.render = function render() {
var aut = this.props.aut;
return React.createElement(
"div",
{ className: "header" },
React.createElement("img", { src: aut.img, alt: "" }),
React.createElement(
"div",
{ className: "info" },
React.createElement(
"h3",
null,
aut.name,
" ",
aut.lastName
),
React.createElement(
"span",
null,
aut.job
)
)
);
};
return Author;
}(React.Component);
var BtnAddTask = function (_React$Component3) {
_inherits(BtnAddTask, _React$Component3);
function BtnAddTask() {
_classCallCheck(this, BtnAddTask);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
BtnAddTask.prototype.render = function render() {
return React.createElement(
"div",
{ onClick: this.props.openAddView, className: "add-btn-container" },
" ",
React.createElement(
"button",
{ className: "addButton" },
React.createElement("i", { className: "fa fa-plus", "aria-hidden": "true" })
)
);
};
return BtnAddTask;
}(React.Component);
var Activity = function (_React$Component4) {
_inherits(Activity, _React$Component4);
function Activity(props) {
_classCallCheck(this, Activity);
var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props));
_this4.hideControle = function () {
_this4.setState({
display: "none"
});
};
_this4.state = {
display: "none",
active: false,
activity_id: _this4.props.taskId
};
return _this4;
}
Activity.prototype.showControle = function showControle() {
this.setState({
display: this.state.display == "block" ? "none" : "block"
});
};
Activity.prototype.validate = function validate() {
this.props.sendId(this.props.taskId);
};
Activity.prototype.edit = function edit() {
this.props.edit(this.props.act);
};
Activity.prototype.render = function render() {
var activityClass = ["activity-container"];
if (this.props.act.state === "active") {
activityClass.push('active');
}
var act = this.props.act;
return React.createElement(
"div",
{ onMouseLeave: this.hideControle, className: activityClass.join(' ') },
React.createElement(
"div",
{ className: "activity-data inline" },
React.createElement(
"span",
null,
act.time
),
React.createElement(
"h3",
{ className: "a-text" },
act.title,
" "
)
),
React.createElement(
"div",
{ className: "activity-controle inline" },
React.createElement(
"div",
{ className: "controle" },
React.createElement(
"div",
{ style: { display: this.state.display }, className: "operator" },
React.createElement(
"button",
{ id: this.props.taskId, onClick: this.edit.bind(this), className: "c-icon-op tl edit" },
React.createElement("i", { className: "fa fa-pencil" })
),
React.createElement(
"button",
{ onClick: this.validate.bind(this), id: this.props.taskId, className: "c-icon-op check" },
React.createElement("i", { className: "fa fa-check" })
),
React.createElement(
"button",
{ id: this.props.taskId, onClick: this.props.delete, className: "c-icon-op tl delete" },
React.createElement("i", { id: this.props.taskId, className: "fa fa-trash-o" })
)
),
React.createElement(
"button",
{ onClick: this.showControle.bind(this), className: "c-icon" },
React.createElement("i", { className: "fa fa-cog" })
)
)
)
);
};
return Activity;
}(React.Component);
var ViewUpdateTask = function (_React$Component5) {
_inherits(ViewUpdateTask, _React$Component5);
function ViewUpdateTask(props) {
_classCallCheck(this, ViewUpdateTask);
var _this5 = _possibleConstructorReturn(this, _React$Component5.call(this, props));
_this5.update = function () {
if (_this5.state.title != "") {
var t = { id: _this5.state.prevID, time: _this5.state.minutes + ":" + _this5.state.seconds + " " + _this5.state.format, title: _this5.state.title, state: _this5.state.prevState };
_this5.props.update_Data(t);
_this5.setState({
notifieme: true
});
setTimeout(function () {
this.setState({ notifieme: false });
}.bind(_this5), 3000);
} else {
_this5.setState({
inputState: "required"
});
}
};
_this5.state = {
initialState: "none",
title: _this5.props.prevData.title,
minutes: _this5.props.prevData.time.substring(0, 2),
seconds: _this5.props.prevData.time.substring(3, 5),
format: _this5.props.prevData.time.substring(6, 8),
prevID: _this5.props.prevData.id,
prevState: _this5.props.prevData.state,
countm: 0,
counts: 0,
inputState: "",
notifieme: false
};
return _this5;
}
ViewUpdateTask.prototype.updateTitle = function updateTitle(e) {
this.setState({
title: e.target.value,
inputState: ""
});
};
ViewUpdateTask.prototype.updateM = function updateM(e) {
if (e.target.value <= 11 && e.target.value >= 0 && e.target.value.length <= 2) {
this.setState({
minutes: e.target.value
});
}
};
ViewUpdateTask.prototype.updateS = function updateS(e) {
if (e.target.value <= 59 && e.target.value >= 0 && e.target.value.length <= 2) {
this.setState({
seconds: e.target.value
});
}
};
ViewUpdateTask.prototype.updateF = function updateF(e) {
e.preventDefault();
};
ViewUpdateTask.prototype.minuteUp = function minuteUp() {
this.setState({
countm: this.state.countm < 11 ? this.state.countm + 1 : this.state.countm,
minutes: this.state.countm < 10 ? "0" + this.state.countm.toString() : this.state.countm.toString()
});
};
ViewUpdateTask.prototype.minuteDown = function minuteDown() {
this.setState({
countm: this.state.countm > 0 ? this.state.countm - 1 : this.state.countm,
minutes: this.state.countm < 10 ? "0" + this.state.countm.toString() : this.state.countm.toString()
});
};
ViewUpdateTask.prototype.secondUp = function secondUp() {
this.setState({
counts: this.state.counts < 59 ? this.state.counts + 1 : this.state.counts,
seconds: this.state.counts < 10 ? "0" + this.state.counts.toString() : this.state.counts.toString()
});
};
ViewUpdateTask.prototype.secondDown = function secondDown() {
this.setState({
counts: this.state.counts > 0 ? this.state.counts - 1 : this.state.counts, seconds: this.state.counts < 10 ? "0" + this.state.counts.toString() : this.state.counts.toString()
});
};
ViewUpdateTask.prototype.setFormat = function setFormat() {
this.setState({
format: this.state.format == "am" ? "pm" : "am"
});
};
ViewUpdateTask.prototype.render = function render() {
var notification = this.state.title;
return React.createElement(
"div",
{ className: "AddTaskContainer" },
React.createElement(
"div",
{ className: "AddTaskControle" },
this.state.notifieme && React.createElement(
"div",
{ className: "notifiy" },
React.createElement(
"span",
{ className: "notifiy-icon" },
React.createElement("i", { className: "fa fa-check" })
),
React.createElement(
"span",
{ className: "notifiy-text" },
"Success"
),
React.createElement(
"h5",
{ className: "notifiy-task" },
notification.indexOf(" ") == -1 ? notification : notification.substr(0, notification.search(" ")).concat(' ...')
)
),
React.createElement(
"button",
{ onClick: this.props.close, className: "close-w" },
React.createElement("i", { className: "fa fa-times" })
),
React.createElement(
"div",
{ className: "containerTime" },
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.minuteUp.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { type: "text", onChange: this.updateM.bind(this), value: this.state.minutes, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.minuteDown.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
),
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.secondUp.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { onChange: this.updateS.bind(this), value: this.state.seconds, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.secondDown.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
),
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.setFormat.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { onKeyDown: this.updateF.bind(this), value: this.state.format, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.setFormat.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
)
),
React.createElement(
"label",
null,
this.state.minutes + ":" + this.state.seconds + " " + this.state.format
),
React.createElement("input", { className: "InputTaskName" + " " + this.state.inputState,
onChange: this.updateTitle.bind(this),
value: this.state.title, type: "text",
required: true }),
React.createElement(
"button",
{ onClick: this.update, className: "btn-save" },
"Update"
)
)
);
};
return ViewUpdateTask;
}(React.Component);
var ViewAddTask = function (_React$Component6) {
_inherits(ViewAddTask, _React$Component6);
function ViewAddTask(props) {
_classCallCheck(this, ViewAddTask);
var _this6 = _possibleConstructorReturn(this, _React$Component6.call(this, props));
_this6.add = function () {
if (_this6.state.title != "") {
var t = { id: "", time: _this6.state.minutes + ":" + _this6.state.seconds + " " + _this6.state.format, title: _this6.state.title, state: _this6.state.initialState };
_this6.props.sendData(t);
_this6.setState({
notifieme: true
});
setTimeout(function () {
this.setState({ notifieme: false });
}.bind(_this6), 3000);
} else {
_this6.setState({
inputState: "required"
});
}
};
_this6.state = {
initialState: "none",
title: "",
minutes: "00",
seconds: "00",
format: "am",
countm: 0,
counts: 0,
inputState: "",
notifieme: false
};
return _this6;
}
ViewAddTask.prototype.updateTitle = function updateTitle(e) {
this.setState({
title: e.target.value,
inputState: ""
});
};
ViewAddTask.prototype.updateM = function updateM(e) {
if (e.target.value <= 11 && e.target.value >= 0 && e.target.value.length <= 2) {
this.setState({
minutes: e.target.value
});
}
};
ViewAddTask.prototype.updateS = function updateS(e) {
if (e.target.value <= 59 && e.target.value >= 0 && e.target.value.length <= 2) {
this.setState({
seconds: e.target.value
});
}
};
ViewAddTask.prototype.updateF = function updateF(e) {
e.preventDefault();
};
ViewAddTask.prototype.minuteUp = function minuteUp() {
this.setState({
countm: this.state.countm < 11 ? this.state.countm + 1 : this.state.countm,
minutes: this.state.countm < 10 ? "0" + this.state.countm.toString() : this.state.countm.toString(),
fTT: this.state.minutes + ":" + this.state.seconds + " " + this.state.format
});
};
ViewAddTask.prototype.minuteDown = function minuteDown() {
this.setState({
countm: this.state.countm > 0 ? this.state.countm - 1 : this.state.countm,
minutes: this.state.countm < 10 ? "0" + this.state.countm.toString() : this.state.countm.toString()
});
};
ViewAddTask.prototype.secondUp = function secondUp() {
this.setState({
counts: this.state.counts < 59 ? this.state.counts + 1 : this.state.counts,
seconds: this.state.counts < 10 ? "0" + this.state.counts.toString() : this.state.counts.toString()
});
};
ViewAddTask.prototype.secondDown = function secondDown() {
this.setState({
counts: this.state.counts > 0 ? this.state.counts - 1 : this.state.counts, seconds: this.state.counts < 10 ? "0" + this.state.counts.toString() : this.state.counts.toString()
});
};
ViewAddTask.prototype.setFormat = function setFormat() {
this.setState({
format: this.state.format == "am" ? "pm" : "am"
});
};
ViewAddTask.prototype.render = function render() {
var notification = this.state.title;
return React.createElement(
"div",
{ className: "AddTaskContainer" },
React.createElement(
"div",
{ className: "AddTaskControle" },
this.state.notifieme && React.createElement(
"div",
{ className: "notifiy" },
React.createElement(
"span",
{ className: "notifiy-icon" },
React.createElement("i", { className: "fa fa-check" })
),
React.createElement(
"span",
{ className: "notifiy-text" },
"Success"
),
React.createElement(
"h5",
{ className: "notifiy-task" },
notification.indexOf(" ") == -1 ? notification : notification.substr(0, notification.search(" ")).concat(' ...')
)
),
React.createElement(
"button",
{ onClick: this.props.close, className: "close-w" },
React.createElement("i", { className: "fa fa-times" })
),
React.createElement(
"div",
{ className: "containerTime" },
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.minuteUp.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { onChange: this.updateM.bind(this), value: this.state.minutes, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.minuteDown.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
),
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.secondUp.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { onChange: this.updateS.bind(this), value: this.state.seconds, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.secondDown.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
),
React.createElement(
"div",
{ className: "containerInput" },
React.createElement(
"button",
{ onClick: this.setFormat.bind(this) },
React.createElement("i", { className: "fa fa-chevron-up" })
),
React.createElement("input", { onChange: this.updateF.bind(this), value: this.state.format, className: "timeInput" }),
React.createElement(
"button",
{ onClick: this.setFormat.bind(this) },
React.createElement("i", { className: "fa fa-chevron-down" })
)
)
),
React.createElement(
"label",
null,
this.state.minutes + ":" + this.state.seconds + " " + this.state.format
),
React.createElement("input", { className: "InputTaskName" + " " + this.state.inputState, onChange: this.updateTitle.bind(this), value: this.state.title, type: "text", placeholder: "Type your Task name ...", required: true }),
React.createElement(
"button",
{ onClick: this.add, className: "btn-save" },
"save"
)
)
);
};
return ViewAddTask;
}(React.Component);
var Footer = function (_React$Component7) {
_inherits(Footer, _React$Component7);
function Footer() {
_classCallCheck(this, Footer);
return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments));
}
Footer.prototype.render = function render() {
return React.createElement(
"div",
{ className: "footer" },
React.createElement(
"span",
{ className: "tCompleted" },
this.props.tasksCompleted
)
);
};
return Footer;
}(React.Component);
var App = function (_React$Component8) {
_inherits(App, _React$Component8);
function App(props) {
_classCallCheck(this, App);
var _this8 = _possibleConstructorReturn(this, _React$Component8.call(this, props));
_this8.openW = function () {
_this8.setState({
display: true
});
};
_this8.closeW = function () {
_this8.setState({
display: false
});
};
_this8.close_edit = function () {
_this8.setState({
edit_view: false
});
};
_this8.deleteTask = function (e) {
var ID = e.target.id;
var data = _this8.state.a;
data = data.filter(function (el) {
return el.id != ID;
});
_this8.setState({
a: data
});
};
_this8.AddTasks = function (val) {
var data = _this8.state.a;
if (data.length != 0) {
val.id = data[data.length - 1].id + 1;
} else {
val.id = 1;
}
data.push(val);
_this8.setState({
a: data
});
};
_this8.validateTask = function (taskId) {
var data = _this8.state.a;
for (var i in data) {if (window.CP.shouldStopExecution(1)){break;}
if (data[i].id == taskId) {
data[i].state = data[i].state === "active" ? "" : "active";
}
}
window.CP.exitedLoop(1);
_this8.setState({
a: data
});
};
_this8.update_Task = function (up_data) {
var data = _this8.state.a;
data = data.map(function (obj) {
return obj.id == up_data.id ? obj = up_data : obj;
});
_this8.setState({
a: data
});
};
_this8.updateTask = function (data) {
_this8.setState({ edit_view: true, currentData: data });
_this8.props.sended_data = data;
};
_this8.state = {
display: false,
a: activities,
currentID: 0,
currentData: { id: 0, time: "00", title: 'test', state: "active" },
completed: 0,
edit_view: false
};
return _this8;
}
App.prototype.CompletedTask = function CompletedTask() {
var data = this.state.a;
data = data.filter(function (el) {
return el.state == "active";
});
};
App.prototype.render = function render() {
var _this9 = this;
var taskCpt = this.state.a.filter(function (el) {
return el.state == "active";
}).length;
var totalTasks = this.state.a.length;
return React.createElement(
"div",
{ className: "TodoAR" },
React.createElement(
"div",
{ className: "container" },
React.createElement(Header, null),
React.createElement(BtnAddTask, { openAddView: this.openW }),
this.state.a.map(function (x) {
return React.createElement(Activity, {
taskId: x.id,
sendId: _this9.validateTask,
"delete": _this9.deleteTask,
edit: _this9.updateTask,
act: x });
}),
React.createElement(Footer, {
tasksCompleted: function () {
switch (taskCpt) {
case 0:
return "There is no Tasks";
case 1:
return " One Task Completed";
case totalTasks:
return "All Tasks Completed";
default:
return taskCpt + "/" + totalTasks + " Tasks Completed";
}
}()
})
),
this.state.display && React.createElement(ViewAddTask, { close: this.closeW, sendData: this.AddTasks }),
this.state.edit_view && React.createElement(ViewUpdateTask, {
prevData: this.props.sended_data,
close: this.close_edit,
update_Data: this.update_Task })
);
};
return App;
}(React.Component);
var mount = document.querySelector('#app');
ReactDOM.render(React.createElement(App, null), mount);
//# sourceURL=pen.js
</script>
</body></html>
