Trang chủ Khám phá Trợ giúp
Đăng nhập
sv1313
/
SeleznevDoIT
Xem 1
Star 0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

beta 2

Vlad Seleznev 6 năm trước cách đây
commit
80bff5b281
15 tập tin đã thay đổi với 15865 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  1. 21 0
      MyToDo/.gitignore
  2. 2444 0
      MyToDo/README.md
  3. 11672 0
      MyToDo/package-lock.json
  4. 23 0
      MyToDo/package.json
  5. BIN
      MyToDo/public/favicon.ico
  6. 18 0
      MyToDo/public/index.html
  7. 15 0
      MyToDo/public/manifest.json
  8. 118 0
      MyToDo/src/SideBar.js
  9. 1126 0
      MyToDo/src/ToDo.js
  10. 13 0
      MyToDo/src/TopBar.js
  11. 219 0
      MyToDo/src/class.js
  12. 63 0
      MyToDo/src/index.js
  13. 36 0
      MyToDo/src/style/SideBar.css
  14. 52 0
      MyToDo/src/style/ToDo.css
  15. 45 0
      MyToDo/src/style/index.css

+ 21 - 0
MyToDo/.gitignore
Xem Tập Tin 

@@ -0,0 +1,21 @@
 
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
+
 
+# dependencies
 
+/node_modules
 
+
 
+# testing
 
+/coverage
 
+
 
+# production
 
+/build
 
+
 
+# misc
 
+.DS_Store
 
+.env.local
 
+.env.development.local
 
+.env.test.local
 
+.env.production.local
 
+
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 2444 - 0
MyToDo/README.md


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 11672 - 0
MyToDo/package-lock.json


+ 23 - 0
MyToDo/package.json
Xem Tập Tin 

@@ -0,0 +1,23 @@
 
+{
 
+  "name": "test",
 
+  "version": "0.1.0",
 
+  "private": true,
 
+  "dependencies": {
 
+    "react": "^16.3.2",
 
+    "react-datepicker": "^1.4.1",
 
+    "react-dom": "^16.3.2",
 
+    "react-google-maps": "^9.4.5",
 
+    "react-redux": "^5.0.7",
 
+    "react-router": "^4.2.0",
 
+    "react-router-dom": "^4.2.2",
 
+    "react-router-link": "^2.0.2",
 
+    "react-scripts": "1.1.4",
 
+    "redux": "^4.0.0"
 
+  },
 
+  "scripts": {
 
+    "start": "react-scripts start",
 
+    "build": "react-scripts build",
 
+    "test": "react-scripts test --env=jsdom",
 
+    "eject": "react-scripts eject"
 
+  }
 
+}

BIN
MyToDo/public/favicon.ico
Xem Tập Tin


+ 18 - 0
MyToDo/public/index.html
Xem Tập Tin 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Seleznev Do It</title>
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
+    <link href="https://fonts.googleapis.com/css?family=Raleway:300i" rel="stylesheet">
 
+      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmd0hkfaZUHHR9N0g7Ilphr8W7nUdDKSs&libraries=places" type="text/javascript"></script>
 
+  </head>
 
+  <body>
 
+  	<header id="TopBar">
 
+  		<div>Seleznev Do It</div>
 
+  	</header>
 
+  	<section id="x">
 
+	
+    </section>
 
+  </body>
 
+</html>

+ 15 - 0
MyToDo/public/manifest.json
Xem Tập Tin 

@@ -0,0 +1,15 @@
 
+{
 
+  "short_name": "React App",
 
+  "name": "Create React App Sample",
 
+  "icons": [
 
+    {
 
+      "src": "favicon.ico",
 
+      "sizes": "64x64 32x32 24x24 16x16",
 
+      "type": "image/x-icon"
 
+    }
 
+  ],
 
+  "start_url": "./index.html",
 
+  "display": "standalone",
 
+  "theme_color": "#000000",
 
+  "background_color": "#ffffff"
 
+}

+ 118 - 0
MyToDo/src/SideBar.js
Xem Tập Tin 

@@ -0,0 +1,118 @@
 
+import React, {Component} from 'react';
 
+import './style/SideBar.css';
 
+import { connect, Provider } from 'react-redux';
 
+import { createStore, combineReducers } from 'redux';
 
+import {Link} from 'react-router-dom';
 
+
 
+// class Inbox extends Component {
 
+// 	render(){
 
+// 		return(
 
+
 
+// 		)
 
+// 	}
 
+// }
 
+
 
+class ListItems extends Component { // элемент списка
 
+	render(){
 
+		let countStyle = {display: 'inline-block'};
 
+		if (this.props.item.count === 0) {
 
+			countStyle = {display: 'none'}
 
+		}
 
+ 		return(
 
+			<li><Link to={`/${this.props.item.type}/${this.props.item.project}`}><div className="projectColor" style={this.props.item.color}></div>{this.props.item.project}<i style={{display: countStyle.display,
 
+																																													paddingLeft: '20px',
 
+																																													color: 'red',
 
+																																													fontSize: '18px',
 
+			}}>{this.props.item.count}</i></Link></li>																																
+		)
 
+	}
 
+}
 
+
 
+class ListBar extends Component {  //компонент списка, в map передача в пропс массива для отдельных элементов списка
 
+	render(){
 
+		return(
 
+			<ul className='listSideBar' style={{padding: 0}}>
 
+				{this.props.items.itemList.map((item, index) => <ListItems item={item} key={index}/>)} 
+			</ul>
 
+		)
 
+	}	
+}
 
+
 
+class SideBarList extends Component{ // компонент оглавления выпадающего списка, в List передача массива обьктов для выпадающего списка
 
+	constructor(props){
 
+		super(props);
 
+		this.click = this.click.bind(this);
 
+		this.state = {
 
+			isOpen: true
 
+		}
 
+	}
 
+	click(){
 
+		this.setState({
 
+			isOpen: !this.state.isOpen
 
+		})
 
+		
+	}
 
+	render(){
 
+		
+		let elem = this.state.isOpen && <ListBar items={this.props.item}/>; 
+		return(
 
+			
+			<div className={this.props.item.text}>
 
+					<svg width="12px" height="6px" viewBox="0 0 12 6" onClick={this.click}>
 
+						<g transform="translate(-396.000000, -235.000000)" fill="#777777">
 
+							<g transform="translate(128.000000, 213.000000)">
 
+								<path  d="M280,22.7581818 L279.1564,22 L273.9922,26.506 L273.4414,26.0254545 L273.4444,26.0281818 L268.8562,22.0245455 L268,22.7712727 C269.2678,23.878 272.8084,26.9674545 273.9922,28 C274.8718,27.2330909 274.0144,27.9809091 280,22.7581818"></path>
 
+							</g>
 
+						</g>
 
+					</svg>				
+				<span onClick={this.click} style={{padding: '10px'}}>{this.props.item.name}</span>
 
+				{elem}
 
+			</div>
 
+			
+		)
 
+	}	
+}
 
+class SideBarElem extends Component { // компонент не изменяемых дивок
 
+	render(){
 
+		let countStyle = {display: 'inline-block'};
 
+		if (this.props.item.count === 0) {
 
+			countStyle = {display: 'none'}
 
+		}
 
+		return(
 
+			<div className={this.props.item.text} >
 
+				<Link to={`/${this.props.item.category}/${this.props.item.project}`}><span className={this.props.item.icon}></span><span>{this.props.item.project}</span><i style={{display: countStyle.display,
 
+																																													paddingLeft: '20px',
 
+																																													color: 'red',
 
+																																													fontSize: '18px',
 
+				}}>{this.props.item.count}</i></Link>
 
+
 
+			</div>
 
+		)
 
+	}
 
+}
 
+
 
+
 
+class SideBar extends Component { // первый элемент не изменяемые дивки , второй элемент выпадающий список в него попадает масив обьктов ключ itemsList еще один массив обьктов для списка
 
+	render(){
 
+		console.log('PROPS',this.props)
 
+		return(
 
+		<aside id="sideBar">	
+			<div className='containerSaidBar'>
 
+				<div>
 
+				<Link to='/Map'><span className='fas fa-map'></span><span>Map</span></Link>
 
+				</div>
 
+				{this.props.store.x.itemsElem.map((item,index)=> <SideBarElem key={index} item={item} />)} 
+				{this.props.store.x.itemsList.map((item,index)=> <SideBarList key={index} item={item} />)} 
+			</div>
 
+		</aside>
 
+		)
 
+	}
 
+}
 
+// const makePropsToToDo = function(store){
 
+// 	return{
 
+// 		itemsToDo: store.todo.items,
 
+// 		itemsList: store.x.itemsList,
 
+// 		itemsElem: store.x.itemsElem
 
+// 	}
 
+// }
 
+export default SideBar;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1126 - 0
MyToDo/src/ToDo.js


+ 13 - 0
MyToDo/src/TopBar.js
Xem Tập Tin 

@@ -0,0 +1,13 @@
 
+import React, {Component} from 'react';
 
+import './style/TopBar.css'
 
+
 
+class TopBar extends Component {
 
+	render(){
 
+		return(
 
+			<div className="container">
 
+				<span></span>
 
+				<input paceholder='secreach'/>
 
+			</div>
 
+		)
 
+	}
 
+}

+ 219 - 0
MyToDo/src/class.js
Xem Tập Tin 

@@ -0,0 +1,219 @@
 
+import React, { Component } from 'react';
 
+import logo from './logo.svg';
 
+import './App.css';
 
+import { connect, Provider } from 'react-redux';
 
+import { createStore, combineReducers } from 'redux';
 
+let todoList = [
 
+    {
 
+        title: 'todo one',
 
+        text:  'todo one text',
 
+        timestamp: (new Date()).getTime()
 
+    },
 
+    {
 
+        title: 'todo two',
 
+        text:  'todo two text',
 
+        timestamp: (new Date()).getTime()
 
+    },
 
+    {
 
+        title: 'todo three',
 
+        text:  'todo three text',
 
+        timestamp: (new Date()).getTime()
 
+    }
 
+];
 
+function todoReducer(state, action){
 
+    if (typeof state === 'undefined'){
 
+        return {items: JSON.parse(localStorage.todo)};
 
+    }
 
+    if (action.type == 'NEW_TODO'){
 
+        console.log(state);
 
+        return {items: [...state.items, {title: action.title, text: action.text, timestamp: (new Date()).getTime()}]}
 
+    }
 
+    if (action.type == 'DELETE_TODO'){
 
+        let items = [];
 
+        for (let i=0;i<state.items.length;i++){
 
+            if (state.items[i].timestamp != action.timestamp){
 
+                items.push(state.items[i]);
 
+            }
 
+        }
 
+        return {items};
 
+    }
 
+}
 
+const reducers = combineReducers({
 
+    todo: todoReducer,
 
+})
 
+var store = createStore(reducers)
 
+store.subscribe(() => {
 
+    let state = store.getState();
 
+    localStorage.todo = JSON.stringify(state.todo.items);
 
+})
 
+class ToDoItem extends Component {
 
+    (props){
 
+        super(props);
 
+        this.delete = this.delete.bind(this);
 
+    }
 
+    delete() {
 
+        store.dispatch({type: "DELETE_TODO", timestamp: this.props.item.timestamp})
 
+    }
 
+    render() {
 
+        return (
 
+            <div>
 
+                <h3> { this.props.item.title } </h3>
 
+                <p> { this.props.item.text }</p>
 
+                <span> { (new Date(this.props.item.timestamp)).toLocaleString() } {this.props.item.timestamp} </span>
 
+                <button onClick={this.delete} >x</button>
 
+            </div>
 
+        );
 
+    }
 
+}
 
+class ToDoForm extends Component {
 
+    constructor (props) {
 
+        super(props);
 
+        this.save = this.save.bind(this);
 
+        this.state = {valid: true};
 
+    }
 
+    validator(){
 
+        return this.title.value && this.text.value;
 
+    }
 
+    save() {
 
+        let valid = this.validator();
 
+        this.setState({valid})
 
+        if (valid){
 
+            store.dispatch({type: 'NEW_TODO',
 
+                            title:  this.title.value,
 
+                            text:   this.text.value})
 
+            this.title.value = '';
 
+            this.text.value  = '';
 
+        }
 
+    }
 
+    
+    render (){
 
+        let style = {
 
+            backgroundColor: this.state.valid ? '' : 'red'
 
+        }
 
+        return (
 
+            <div>
 
+                <input style={style} placeholder='title' ref={ c => this.title = c}/>
 
+                <input style={style} placeholder='text' ref={ c => this.text = c} />
 
+                <button onClick = { this.save } >Save</button>
 
+            </div>
 
+        );
 
+    }
 
+}
 
+class ToDoList extends Component {
 
+    render (){
 
+        return (
 
+            <div> <h1>TODO LIST</h1>
 
+                <ToDoForm />
 
+                { this.props.items.map( (item, index) => <ToDoItem key={index} item={item} />) }
 
+            </div>
 
+        );
 
+    }
 
+}
 
+const mapStateToProps = function(store){
 
+    return {
 
+        items: store.todo.items
 
+    };
 
+}
 
+ToDoList = connect(mapStateToProps)(ToDoList);
 
+class App extends Component {
 
+  render() {
 
+    return (
 
+      <div className="App">
 
+        <Provider store={store} >
 
+            <ToDoList />
 
+        </Provider>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+export default App;
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter
 
+
 
+var MainLayout = React.createClass({
 
+  render: function() {
 
+    return (
 
+      <div className="app">
 
+        <header className="primary-header"></header>
 
+        <aside className="primary-aside">
 
+          <ul>
 
+            <li><Link to="/">Home</Link></li>
 
+            <li><Link to="/users">Users</Link></li>
 
+            <li><Link to="/widgets">Widgets</Link></li>
 
+          </ul>
 
+        </aside>
 
+        <main>
 
+          {this.props.children}
 
+        </main>
 
+      </div>
 
+      )
 
+  }
 
+})
 
+
 
+var Home = React.createClass({
 
+  render: function() {
 
+    return (<h1>Home Page</h1>)
 
+  }
 
+})
 
+
 
+var SearchLayout = React.createClass({
 
+  render: function() {
 
+    return (
 
+      <div className="search">
 
+        <header className="search-header"></header>
 
+        <div className="results">
 
+          {this.props.children}
 
+        </div>
 
+        <div className="search-footer pagination"></div>
 
+      </div>
 
+      )
 
+  }
 
+})
 
+
 
+var UserList = React.createClass({
 
+  render: function() {
 
+    return (
 
+      <ul className="user-list">
 
+        <li>Dan</li>
 
+        <li>Ryan</li>
 
+        <li>Michael</li>
 
+      </ul>
 
+      )
 
+  }
 
+})
 
+
 
+var WidgetList = React.createClass({
 
+  render: function() {
 
+    return (
 
+      <ul className="widget-list">
 
+        <li>Widget 1</li>
 
+        <li>Widget 2</li>
 
+        <li>Widget 3</li>
 
+      </ul>
 
+      )
 
+  }
 
+})
 
+
 
+ReactDOM.render((
 
+  <Router>
 
+    <Route path="/" component={MainLayout}>
 
+      <IndexRoute component={Home} />
 
+      <Route component={SearchLayout}>
 
+        <Route path="users" component={UserList} />
 
+        <Route path="widgets" component={WidgetList} />
 
+      </Route> 
+    </Route>
 
+  </Router>
 
+), document.getElementById('root'))
 
+
 
+

+ 63 - 0
MyToDo/src/index.js
Xem Tập Tin 

@@ -0,0 +1,63 @@
 
+import React, {Component} from 'react';
 
+import ReactDOM from 'react-dom';
 
+import './style/index.css';
 
+import ToDoMain from './ToDo'; 
+// import ToDoSide from './ToDo'
 
+
 
+
 
+ReactDOM.render(<ToDoMain />, document.getElementById('x'));
 
+
 
+// let sideBarElem = [
 
+//     {text: 'Inbox',
 
+//      icon: 'fas fa-inbox iconDiv'
 
+//     },
 
+//     {text: 'Today',
 
+//      icon: 'far fa-calendar iconDiv'
 
+//     },
 
+//     {text: 'For next 7 day',
 
+//      icon: 'far fa-calendar-alt iconDiv'
 
+//     },
 
+// ];
 
+// let sideBarList = [
 
+//     {text: 'Project',
 
+//      itemList: [
 
+//         {text: 'Work',
 
+//          color: {background: '#c3124c'},
 
+//          count: 1
 
+//         },
 
+//         {text: 'Trevel',
 
+//          color: {background: '#6107f7'},
 
+//          count: 4
 
+//         },
 
+//         {text: 'Lern',
 
+//          color: {background: '#159a18'},
 
+//          count: 0
 
+//         },
 
+//         {text: 'Familie',
 
+//          color: {background: '#17dee6'},
 
+//          count: 3
 
+//         }
 
+//      ]
 
+//     },
 
+//     {text: 'Filters',
 
+//      itemList: [
 
+//         {text: 'priority1',
 
+//          color: {background: 'red'},
 
+//          count: 1
 
+//         },
 
+//         {text: 'priority2',
 
+//          color: {background: 'red'},
 
+//          count: 4
 
+//         },
 
+//         {text: 'priority3',
 
+//          color: {background: 'red'},
 
+//          count: 0
 
+//         },
 
+//         {text: 'priority4',
 
+//          color: {background: 'red'},
 
+//          count: 3
 
+//         }
 
+//      ]
 
+//     }
 
+// ];
 
+// ReactDOM.render(<SideBar itemsElem={sideBarElem} itemsList={sideBarList}/> , document.getElementById('sideBar'))

+ 36 - 0
MyToDo/src/style/SideBar.css
Xem Tập Tin 

@@ -0,0 +1,36 @@
 
+.containerSaidBar .listSideBar {
 
+	list-style-type: none;
 
+
 
+}
 
+.containerSaidBar div {
 
+	padding-bottom: 15px;
 
+	background: #fafafa;
 
+	transition: background 0,5s;
 
+}
 
+.containerSaidBar div:hover{
 
+	background: #fff;
 
+}
 
+.containerSaidBar div a {
 
+	padding-left: 20px;
 
+}
 
+span.iconDiv{
 
+	font-size: 20px;
 
+}
 
+.sideBar_icon{
 
+	display: inline-block;
 
+}
 
+.containerSaidBar .Project span, .containerSaidBar .Filters span {
 
+	padding: 0 50px 0 20px;
 
+}
 
+ul.listSideBar li {
 
+	padding-bottom: 15px;
 
+}
 
+div.projectColor {
 
+	width: 15px;
 
+	height: 10px;
 
+	border-radius: 8px;
 
+	display: inline-block;
 
+}
 
+.containerSaidBar i {
 
+	color: #d2c9c9; 
+}

+ 52 - 0
MyToDo/src/style/ToDo.css
Xem Tập Tin 

@@ -0,0 +1,52 @@
 
+.form{
 
+}
 
+.option-form{
 
+	padding-top: 10px;
 
+}
 
+.form-icon{
 
+	font-size: 20px;
 
+	padding-right: 10px;
 
+	color: #a1a7a7;
 
+	transition: color 0.5s;
 
+}
 
+.form-icon:hover{
 
+	color: #3767b1;
 
+}
 
+.add-list{
 
+	padding: 30px 0 0 30px;
 
+	font-size: 25px;
 
+	color: #a1a7a7;
 
+	transition: color 0.5s;
 
+	cursor: pointer;
 
+}
 
+.add-list:hover{
 
+	color: #3767b1;
 
+}
 
+.list{
 
+	font-size: 15px;
 
+	font-weight: 700;
 
+	padding-left: 15px;
 
+	color: #444961;
 
+	transition: color 0.5s;
 
+	cursor: pointer;
 
+	padding-right: 50px;
 
+}
 
+.list:hover{
 
+	color: #071142;
 
+}
 
+.list-delete{
 
+	display: inline-block;
 
+	border: 2px solid;
 
+    border-radius: 10px;
 
+    width: 20px;
 
+    height: 20px;
 
+    cursor: pointer;
 
+    transition: background 0,2s
 
+}
 
+.list-delete:hover{
 
+	background: #a1a7a7;
 
+}
 
+.div-list{
 
+	padding-left: 20px;
 
+	padding-top: 20px;
 
+}

+ 45 - 0
MyToDo/src/style/index.css
Xem Tập Tin 

@@ -0,0 +1,45 @@
 
+* {
 
+	box-sizing: border-box;
 
+}
 
+body{
 
+	font-size: 17px;
 
+	background: #fafafa;
 
+	margin: 0;
 
+	font-family: 'Raleway', sans-serif;
 
+}
 
+header {
 
+	height: 50px;
 
+	background: #3767b1;
 
+}
 
+.container {
 
+
 
+	max-width: 1150px;
 
+	margin: 0 auto;
 
+}
 
+aside {
 
+	float: left;
 
+	border-right: 1px solid #f1f1f1;
 
+	width: 250px;
 
+	height: 800px;
 
+}
 
+main {
 
+	margin-left: 100px;
 
+	background: #fff;
 
+	width: 900px;
 
+	text-align: center;
 
+	height: 800px;
 
+}
 
+a {
 
+	text-decoration: none;
 
+	color: #000;
 
+}
 
+header {
 
+	text-align: center;
 
+	font-size: 25px;
 
+	font-weight: 700;
 
+	font-family: 'Great Vibes', cursive;
 
+	color: white;
 
+}
 
+header div{
 
+	padding-top: 8px;
 
+}