checkbox

src/App.js

@@ -19,11 +19,8 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
-<<<<<<< HEAD
         console.log(this.props.app)
-=======
         this.props.getCategories();
->>>>>>> ffc22fefa05d985c41e67b265e33a56a26cd6bfe
 
        if(localStorage.getItem('userId')) this.props.getUser()
 

src/assets/fonts/icomoon.svg

@@ -7,6 +7,7 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
 <glyph unicode="&#xe901;" glyph-name="lens" d="M512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
 <glyph unicode="&#xe903;" glyph-name="dehaze" d="M86 704.667h852v-86h-852v86zM86 490.667h852v-86h-852v86zM86 276.667h852v-84h-852v84z" />
 <glyph unicode="&#xe942;" glyph-name="phone" d="M704 320c-64-64-64-128-128-128s-128 64-192 128-128 128-128 192 64 64 128 128-128 256-192 256-192-192-192-192c0-128 131.5-387.5 256-512s384-256 512-256c0 0 192 128 192 192s-192 256-256 192z" />

src/components/Admin/ChangeServices-Doctors.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Input from './Input'
 import CheckBoxWindow from "./CheckBoxWindow";
+import { CustomSelect } from "../hooks/select";
 
 export default class ChangeServicesDoctors extends React.Component {
     state = {
@@ -52,7 +53,7 @@ export default class ChangeServicesDoctors extends React.Component {
 
     changeId = (e) => {
         this.props.changeId({
-            item: e.target.value,
+            item: e,
             data: this.props.data
         })
     };
@@ -84,12 +85,13 @@ export default class ChangeServicesDoctors extends React.Component {
                                             key={el.id}
                                             id={el.id}
                                             el={el}
+                                            className = {el.className}
                                             changeInputValues={changeInputValues}
                                         />
                                     )
                             })
                         }
-                        {categories && <button onClick={this.changeFlag}>Choose Services</button>}
+                        {categories && <button className = " btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
                         <input className="btn link"
                                type='submit'
                                value={itemId ? 'Изменить'  : 'Добавить'}
@@ -97,16 +99,12 @@ export default class ChangeServicesDoctors extends React.Component {
                     </form>
                 </div>
                 <div className="admin-item">
-                    <select className="appointment admin-form" onChange={this.changeId} defaultValue='Выбрать'>
-                        <option >Выбрать</option>
-                        {
-                            data.map(el => (
-                                <option key={el._id}>{el.name}</option>
-                            ))
-                        }
-                    </select>
-
 
+                    <CustomSelect
+                         label="Выбрать"
+                         options={data}
+                         clickOptionEvent={this.changeId}
+                    />
                     {itemId &&
                     <button className="btn link" onClick={this.deleteItem} style={{backgroundColor: "#ff9774"}}>Удалить
                         выбранный элемент</button>

src/components/Admin/CheckBoxWindow.js

@@ -10,39 +10,21 @@ class CheckBoxWindow extends React.Component {
         const {categories, changeFlag,specialityArray} = this.props;
         return (
             <>
-                <div style={{
-                    position: 'fixed',
-                    right: '0',
-                    left: '0',
-                    display: 'flex',
-                    justifyContent:'center',
-                    backgroundColor: 'black',
-                    margin: '5% auto',
-                    width: '80%',
-                    fontSize: '12px',
-                    zIndex: '2'
-                }}>
+                <div className = "check-container">
                     {categories.map(el => (
-                        <div key={el._id} style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            wrap: 'nowrap',
-                            textAlign:'start',
-                            width:'20%'
-                        }}>
-                            <p>{el.name}</p>
+                        <div className = "check-speciality" key={el._id}>
+                            <h4>{el.name}</h4>
                             {
                                 el.services.map(item => (
-                                    <div key={item._id} >
-                                        <label>
-                                            <input
-                                                type="checkbox"
-                                                value={item._id}
-                                                defaultChecked={specialityArray.find(el => el === item._id)}
-                                                onChange={this.changeSpecialityArray}
-                                            />
-                                            {item.name}
-                                        </label>
+                                    <div  className = "check-elem" key={item._id} >
+                                        <input
+                                            type="checkbox"
+                                             value={item._id}
+                                             id={item._id}
+                                             defaultChecked={specialityArray.find(el => el === item._id)}
+                                            onChange={this.changeSpecialityArray}
+                                        />
+                                            <label htmlFor={item._id} className = "check">   {item.name}</label>
                                     </div>
                                 ))
                             }
@@ -50,15 +32,7 @@ class CheckBoxWindow extends React.Component {
                     ))
                     }
                 </div>
-                <div style={{
-                    position: 'fixed',
-                    top: '0',
-                    left: "0",
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: 'black',
-                    opacity: '0.5'
-                }} onClick={changeFlag}></div>
+                <div className = "wrap-check-off"  onClick={changeFlag}></div>
             </>
         )
     }

src/components/Admin/Shedule.js

@@ -1,43 +1,15 @@
 import React from 'react';
 import moment from "moment";
-import { connect } from "react-redux";
 
 import { CustomSelect } from "../hooks/select"
 import Calendar from "../Calendar";
 
-import {
-    setAppointmentShedule,
-    setAppointmentDoctor,
-    setAppointmentTime,
-    postOrders
-} from "../../actions/actions";
-
-export  class Shedule extends React.Component {
+export default class Shedule extends React.Component {
     state ={
         startDate:null,
         endDate:null,
-        pickedDate: null
     };
 
-    setShedule = e => {
-        this.setState({ pickedDate: e.target.id });
-        this.props.setAppointmentShedule(e.target.id);
-      };
-    
-      setShedule = e => {
-        this.setState({ pickedDate: e.target.id });
-        this.props.setAppointmentShedule(e.target.id);
-      };
-    
-      setTime = e => {
-        this.props.setAppointmentTime(e.target.value);
-      };
-
-      postOrder = () => {
-        this.props.postOrders(this.props.app.appointment);
-      };
-
-
     post = (e) => {
         e.preventDefault()
         let current = new Date(this.state.startDate);
@@ -60,33 +32,24 @@ export  class Shedule extends React.Component {
         this.setState ( { endDate:e.target.value } )
     };
     setDoctor = (e) => {
-        this.props.setSheduleDoctor(e.target.value)
+        console.log (e)
+        this.props.setSheduleDoctor(e)
+  
     };
 
     render() {
-        const {doctors, match, postNewShedule} = this.props;
-        const doctor = doctors.find (el => el._id === postNewShedule.doctor);
-        console.log (this.props.doctors)
+        const {doctors, postNewShedule} = this.props;
+        const doctor = doctors.find(el => el._id === postNewShedule.doctor);
         return (
             <div  className = "shedule-container" >
                 <div className = "option" >
 
-                {/* <CustomSelect
-                    label="Выберите доктора"
-                    options= {doctor ? doctor[0].name : 'Выберите доктора'}
-                    clickOptionEvent={this.setDoctor}
-                  /> */}
-
-                    <select className = "appointment admin-appointment"  
-                        onChange={this.setDoctor} defaultValue={doctor ? doctor.name : 'Выберите доктора'}>
-                        <option disabled >Выберите доктора</option>
-                        {
-                            doctors.map ( el=> (
-                                <option key={el._id} id={el._id}> {el.name} </option>
-                            ) )
-                        }
-                    </select>
-
+                    <CustomSelect
+                        label="Выберите доктора"
+                        options= {doctors }
+                        clickOptionEvent={this.setDoctor}
+                    /> 
+                    
                     {postNewShedule.doctor &&
                         <div className = "input-box">
                             <input className = "shedule-input " type="date" onChange = {this.changeStart}/>
@@ -100,36 +63,14 @@ export  class Shedule extends React.Component {
                 </div>
 
                 {postNewShedule.doctor &&
-                <div className="shedule-card">
                     <Calendar
                         doctor={doctor}
-                        action = {console.log}
+                        action = {console.log }
                     />
-                    <div className="day-shedule">
-
-                    </div>
-                </div>
-
                 }
             </div>
         );
     }
 }
 
-const mapStateToProps = state => {
-    return {
-      app: state.app
-    };
-  };
-  
-  const mapDispatchToProps = {
-    setAppointmentShedule,
-    setAppointmentDoctor,
-    setAppointmentTime,
-    postOrders
-  };
   
-  export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(Shedule);

src/components/services/Services.js

@@ -4,38 +4,6 @@ import {Link} from 'react-router-dom';
 import {connect} from "react-redux";
 
 export class Services extends React.Component {
-<<<<<<< HEAD
-  render() {
-    const { categories } = this.props;
-    const servArray = Object.keys(categories).map(key => {
-      return [key, categories[key]];
-    });
-
-    // console.log ("data:", data);
-    // console.log ("categories:", Object.values (categories))
-    // console.log ("servArray:", servArray)
-    // console.log ("this.props:", this.props.app)
-    console.log ("state.app.services", this.props.app.services.category)
-
-    return (
-      <div className="main">
-        <div className="wrapper">
-          <div className="doctors-wrap  services">
-            <div className="categories" id="accordion">
-              {servArray.map((el, index) => (
-                <div className="service-type" key={index} id={`item${index}`}>
-                  <a   href={`#item${index}`} className="categories-link icon-angle-down"   key={index}>
-                    {el[0]}
-                  </a>
-                  {el[1].map((item, index) => (
-                    <div className="servise-name" key={index}>
-                      <p>{item.name}</p>
-                      {/* <p>Длительность: {item.duration} ч.</p>  */}
-                      <p>Стоимость: {item.price} грн.</p>
-                      <div>
-                        <Link to = {`/appointment/${el._id}`}  className="btn service-btn">  Записаться  </Link>
-                      </div>
-=======
     render() {
         const {categories} = this.props;
         return (
@@ -62,7 +30,6 @@ export class Services extends React.Component {
                                 </div>
                             ))}
                         </div>
->>>>>>> ffc22fefa05d985c41e67b265e33a56a26cd6bfe
                     </div>
                 </div>
             </div>
@@ -71,17 +38,9 @@ export class Services extends React.Component {
 }
 
 const mapStateToProps = state => {
-<<<<<<< HEAD
-  return {
-        app:state.app,
-        // data:state.app.services.category,
-        categories:state.app.servicesArray
-  };
-=======
     return {
         categories: state.services.categories
     };
->>>>>>> ffc22fefa05d985c41e67b265e33a56a26cd6bfe
 };
 
 const mapDispatchToProps = {

src/components/services/categories.js

@@ -1,64 +1,64 @@
-import React from 'react';
+// import React from 'react';
 
-// import {Link} from 'react-router-dom';
-import {connect} from 'react-redux';
+// // import {Link} from 'react-router-dom';
+// import {connect} from 'react-redux';
 
 
-export class Services extends React.Component {
+// export class Services extends React.Component {
     
-    render() {
-        const { categories} = this.props;
-        const servArray =  Object.keys(categories).map(key => {
-            return [key, categories[key]];
-        })
-        // const category = servArray.slice (1, 2 )
+//     render() {
+//         const { categories} = this.props;
+//         const servArray =  Object.keys(categories).map(key => {
+//             return [key, categories[key]];
+//         })
+//         // const category = servArray.slice (1, 2 )
 
-        // console.log ("data:", data);
-        // console.log ("categories:", Object.values (categories))
-        console.log ("servArray:", servArray)
-        // console.log ("category:", category)
-        // console.log ("this.props:", this.props.app)
+//         // console.log ("data:", data);
+//         // console.log ("categories:", Object.values (categories))
+//         console.log ("servArray:", servArray)
+//         // console.log ("category:", category)
+//         // console.log ("this.props:", this.props.app)
 
-        return (
-            <div className="main">
-                <div className="wrapper">
-                    <div className = "doctors-wrap">
-                        {  servArray.map (( el, index )=> (
-                            <div className = "serv-wrap" key = {index}>
-                                {   el[1].map ((item, index) => (
+//         return (
+//             <div className="main">
+//                 <div className="wrapper">
+//                     <div className = "doctors-wrap">
+//                         {  servArray.map (( el, index )=> (
+//                             <div className = "serv-wrap" key = {index}>
+//                                 {   el[1].map ((item, index) => (
                                           
-                                    <div className = "servise-name" key = {index} >
-                                        <p>{item.name}</p>
-                                        <p>Длительность: {item.duration} ч.</p> 
-                                        <p>Цена: {item.price} грн.</p>
-                                        <div>
+//                                     <div className = "servise-name" key = {index} >
+//                                         <p>{item.name}</p>
+//                                         <p>Длительность: {item.duration} ч.</p> 
+//                                         <p>Цена: {item.price} грн.</p>
+//                                         <div>
                                             
-                                            <button className = "btn service-btn"> Записаться на приём </button>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        ))
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
+//                                             <button className = "btn service-btn"> Записаться на приём </button>
+//                                         </div>
+//                                     </div>
+//                                 ))}
+//                             </div>
+//                         ))
+//                         }
+//                     </div>
+//                 </div>
+//             </div>
+//         );
+//     }
+// }
 
-const mapStateToProps = state => {
-    return {
-        app:state.app,
-        data:state.services.services,
-        categories:state.services.categories
-    }
-};
+// const mapStateToProps = state => {
+//     return {
+//         app:state.app,
+//         data:state.services.services,
+//         categories:state.services.categories
+//     }
+// };
 
-const mapDispatchToProps = {
+// const mapDispatchToProps = {
 
-};
+// };
 
-export default connect (mapStateToProps,mapDispatchToProps)(Services)
+// export default connect (mapStateToProps,mapDispatchToProps)(Services)
 
 

src/index.js

@@ -15,6 +15,8 @@ import "./style/select.scss"
 import "./style/calendar.scss"
 import "./style/auth.scss"
 import "./style/modal.scss"
+import "./style/checkBoxWindow.scss"
+
 
 ReactDOM.render(
     <Provider store={store}>

src/reducers/reducers.js

@@ -20,18 +20,6 @@ const defaultState = {
     changeServiceId:null,
     specialityArray:[],
 
-<<<<<<< HEAD
-    appointment:{
-        shedule:null,
-        time:null,
-        doctor:null,
-        spec:null,
-        comment:  " "
-      },
-
-    timeArray:[ ],
-=======
->>>>>>> ffc22fefa05d985c41e67b265e33a56a26cd6bfe
     isFetching:false,
     error: null,
 

src/style/all.scss

@@ -102,7 +102,6 @@ aside {
 }
 
 
-
 // _______header +  navigation______________
 .header,
 .footer {
@@ -271,6 +270,14 @@ aside {
 	display: block;
 	padding: 15px 2px;
 	text-align: center;
+	@media (max-width: 1024px) {
+		font-size: 0.7em;
+		padding: 5px 2px;
+	}
+	@media (max-width: 768px) {
+		font-size: 0.6em;
+		padding: 5px 2px;
+	}
 }
 
 .more {
@@ -282,9 +289,20 @@ aside {
 	}
 }
 
-.admin {
-	width: 30%;	
+
+.servise-btn {
+	font-size: 0.7em;
 	margin: 0;
+	width: 100%;
+	line-height: 2em;
+	padding: 3px;
+	min-height: 35px;
+	margin: 2px 0;
+	background-color: $main-color;
+	color: $header-color;
+	&:hover {
+		color: $opacity-color;
+	}
 }
 .nav-exit {
 	background-color: none;
@@ -384,6 +402,12 @@ h2 {
 		justify-content: space-between;
 		border-radius: 5px;
 		box-shadow: 0px 2px 8px 1px $main-color;
+		@media (max-width: 768px) {
+			width: 30%;
+		}
+		@media (max-width: 414px) {
+			width: 100%;
+		}
 		.photo {
 			border-radius: 5px; 
 			img {
@@ -406,12 +430,6 @@ h2 {
 		// 	margin-top: 20px;
 		// }
 
-		@media (max-width: 768px) {
-			width: 30%;
-		}
-		@media (max-width: 414px) {
-			width: 100%;
-		}
 	}
 
 }
@@ -779,23 +797,47 @@ h2 {
 // _______ADMIN PANEL __________
 .btn-box {
 	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 	justify-content: space-between;
+	@media (max-width: 414px) {
+		justify-content: center;
+	}
+	.admin {
+		width: 30%;	
+		margin: 3px;
+		@media (max-width: 414px) {
+			width: 80%;	
+			margin: 10px 5px;
+		}
+	}
 }
 .option,
 .change-services-doctors {
 	width: 40%;
 	margin: 0 auto;
+	align-items: center;
+	@media (max-width: 768px) {
+		flex-direction: column-reverse;
+		width: 85%;
+	}
+	@media (max-width: 414px) {
+		width: 100%;
+	}
 }
 .admin-appointment {
 	width: 100%;
 }
 .shedule-container {
 	margin-top: 50px;
+	.option {
+		width: 80%;
+	}
 	.input-box {
-		width: 100%;
+		width: 90%;
 		display: flex;
 		flex-direction: row;
-		justify-content: space-between;
+		justify-content: center;
 	}
 	.shedule-input {
 		margin: 20px 10px 0 0;
@@ -840,10 +882,14 @@ h2 {
 // ___ change-services-doctors____
 .change-services-doctors {
 	display: flex;
-	// flex-direction: column;
 	justify-content: center;
 	width: 100%;
 	margin-top: 50px;
+	align-content: stretch;
+	align-items: flex-start;
+	@media (max-width: 768px) {
+		align-content: center;
+	}
 	.form-doctors {
 		display: flex;
 		flex-direction: column;
@@ -854,6 +900,11 @@ h2 {
 	.admin-item {
 		width: 35%;
 		margin: 0 50px;
+		@media (max-width: 768px) {
+			width: 85%;
+			margin-bottom: 30px;
+		}
+
 	}
 }
 
@@ -877,17 +928,6 @@ h2 {
 		}
 		.service-type {
 			width: 85%;
-			// p {
-			// 	@media (max-width: 414px) {
-			// 		margin: 10px 0;
-			// 	}
-			// 	@media (max-width: 414px) {
-			// 		margin: 5px 0;
-			// 	}
-			// 	@media (max-width: 375px) {
-			// 		font-size: 0.8em;
-			// 	}
-			// }
 			.categories-link {
 				display: block;
 				position: relative;
@@ -917,7 +957,7 @@ h2 {
 				}
 			}
 			@media (max-width: 1024px) {
-				width: 65%;
+				width: 75%;
 				margin-top: 40px;
 			}
 			@media (max-width: 768px) {

src/style/checkBoxWindow.scss

@@ -0,0 +1,72 @@
+$header-color: #d4d5d7;
+$main-title-color: #3b3b3b;
+$main-text-color: #101010;
+$main-color:   #789084;
+$hover-color: #b1e8ca;
+$opacity-color: rgba(17,17,17,0.8);
+
+.check-container {
+    position: absolute;
+    right: 15px;
+    left: 15px;
+    top: 55px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    background-color: $opacity-color;
+    margin: 5% auto;
+    width: 85%;
+    font-size: 0.8em;
+    z-index: 2;
+}
+.check-speciality {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    text-align: start;
+    width: 30%;
+    margin: 10px;
+    padding: 5px 10px;
+    border: 1px solid $main-color;
+    .check-elem {
+        margin: 5px 0;
+    }
+}
+input[type = "checkbox"] {
+    display: none;
+  }
+  .check {
+    padding-left: 20px;
+  }
+  .check::before {
+    content: "";
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: $opacity-color;
+    border: 1px solid $main-color;
+    border-radius: 3px;
+    vertical-align: middle;
+    margin-left: -10px;
+    margin-right: 10px;
+  
+  }
+   input[type = "checkbox"]:checked + .check::before {
+    content: "";
+    color: $main-color;
+    text-align: center;
+    font-size: 16px;
+    background-color: $hover-color;
+    // background-image: url(../assets/images/checked.png);
+    font-weight: bold;
+    vertical-align: top;
+  }
+  .wrap-check-off {
+    position: fixed;
+    top: 0;
+   left: 0;
+  width: 100%;
+   height: 100%;
+   background-color: black;
+  opacity: 0.5;
+  }

src/style/normalize.css

@@ -173,6 +173,10 @@ textarea {
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
+ input,
+ select {
+  font-size: 0.8em;
+ }
 
 button,
 input { /* 1 */

src/style/select.scss

@@ -44,6 +44,7 @@ $opacity-color: rgba(17,17,17,0.8);
 	&__item {
 		display: flex;
 		padding: 0.2rem 0.5rem;
+		text-align: left;
 		font-weight: 400;
 		cursor: pointer;
 		&:hover {

src/style/style.css

@@ -127,4 +127,8 @@
 .icon-phone:before {
   content: "\e942";
   font-size: 35px;
+}
+
+.icon-done:before {
+  content: "\e900";
 }

src/utils/formFields.js

@@ -172,9 +172,10 @@ export const postNewDoctorForm =[
 	},
 	{
 		id:3,
-		type:'text',
+		type:'file',
 		value:"",
 		name:'photo',
+		className: "btn link",
 		placeholder:'Добавьте фотографию',
 		required:true
 	},
@@ -193,17 +194,6 @@ export const postNewDoctorForm =[
 		name:'skillsDescription',
 		placeholder:'Введите описание навыков здесь',
 		required:true
-<<<<<<< HEAD
-	},
-	{
-		id:6,
-		type:'text',
-		value:"",
-		name:'speciality',
-		placeholder:'Выберите предоставляемые услуги',
-		required:true
-=======
->>>>>>> ffc22fefa05d985c41e67b265e33a56a26cd6bfe
 	}
 ];