{ NeFFeX }
Я благодаря ему научился верстать -_-
Anton
Роман
Всем привет, есть ли какой-нибудь удобный компонент на реакте, для загрузки файлов на сервер?
Дмитрий Кузюбердин
https://www.google.com/search?ei=8ObwXOXAGIOKrwSUrL_wCQ&q=react+js+file+uploader+npm&oq=react+js+file+uploader+npm&gs_l=psy-ab.3..0i19.7698.8159..8344...0.0..0.109.409.2j2......0....1..gws-wiz.......0i71j0i22i30.liJmra9nrwA
Дмитрий Кузюбердин
🙏
Дмитрий Кузюбердин
пробуйте смело топовые вещи из выдачи: гугл фигню может посоветовать.. но.. Гугл есть гугл, он шарит)
Artem
кто-нить регистрировал созданный плагин для vs code ?
Temych
Иван
всем привет! кто-нибудь знает как это сделать?
Реализовать одностраничное приложение резервирования билетов в кинотеатр. Время начала
сеансов 10:00, время последнего сеанса 20:00. Шаг - каждые 2 часа. Таким образом в течение дня
может быть 6 сеансов.
Интерфейс должен отображать доступные даты для бронирования, сеансы для выбранной даты,
свободные и забронированные места. При выборе даты и сеанса меньше текущего времени и
даты, должны отображаться архивные данные без возможности их изменения.
Для хранения дат использовать LocalStorage и Redux, и при перезагрузке страницы считывать
сохраненные данные из LocalStorage.
Глубина архива: одна неделя до текущей даты. Максимальный период бронирования: одна
неделя от текущей даты.
Artem
Иван
на react/redux
Temych
Роман
Иван
Должно получиться что-то вроде этого
Artem
тестовое задание?)
Иван
да
Иван
пытаюсь решение придумать по аналогии с соц-сетью
Иван
ничего в голову не лезет
Дмитрий Кузюбердин
Дмитрий Кузюбердин
Иван
Спасибо
Иван
Теперь хоть знаю с чего начать
Ruslan
А сейансы могут быть только в 10, 12, 14….?)
Иван
Да
Ruslan
А, ну тогда это проще реализовать
Ruslan
А может допустим в 14:00 сеанса не быть?
Или всегда есть 6 сеансов?
Иван
Всегда есть
Ruslan
Думаю так можно сделать в стейте, но это не точно
1. Массив с датами
2. Время сеансов
3. Места
4. Масив забронированных дат, время и место (Можно этот массив хранить в LocalStorage)
Ruslan
Потом при выводе мест, выбираешь массив по дате и сеансу и смотришь какие уже не доступны.
И их делаешь не активными.
Ruslan
А при бронировании, сохраняешь в массив это место.
Ruslan
И должно все работать
Ruslan
Если дата меньше текущей, отключаешь бронирование
Иван
Окей, а как отображать и делать изменения в массиве основываясь на выбранной дате и времени?
Ruslan
Делаешь массив мест которые забронировали в таком виде дата > время > места
Смотришь что у тебя сейчас выбранно и редактируешь
Ruslan
Тебе даже не надо отменять бронирование, так что можешь просто добавлять места и все
Ruslan
можешь дату в unix перевести для ключа массива
Иван
Спасибо, попробую
Ruslan
Типа так, но хз правильно ли это
Ruslan
Ну и в результате + id занятого места
Константин
Ребят нужна какаянить функция на JS которая будет генерировать N=чилсо ++ 1 каждый раз
Константин
как можно сделать
Anonymous
Тебе надо просто прибовлять число и помнить в общем мире или как
Anonymous
Можно просто типо а++ или ++а
Anonymous
Или через замыкание прочитай счётчик работает на ура
Edward
Константин почитай про метод reduce/reduceRight
Heavy
Нафигачил структуру меню 😱
Dmitry
сильно)
Heavy
Оно же в pdf
Temych
IoT маньяк...
Heavy
Heavy
Ну вот дальше можно и поток данных расписывать, продумывать какие будут структуры данных, и тд
Artem
главное до разработки всё-таки добраться)
Heavy
главное до разработки всё-таки добраться)
Уже добрался, слепил даже главное меню. Стили прикрутил, все клево было, пока не уперся в то, что дальше не могу ничего делать, покуда не знаю структуру проекта. Не понятно было какие компоненты будут переиспользоваться, какие к этому готовить, что в локальном стейте, что в глобальном..
Temych
на 3-4 месяца занятной работы себе нарисовал))) Удачи!
Heavy
тимлидом работает. не дает писать говнокод, когда очень хочется (козел 😁)
Edward
Может кто помочь? Я наверное уже всё перепроверил...Не могу понять почему ничего не присваивает
Дмитрий Кузюбердин
Edward
Спасибо)
Иван
reducer:
const RESERVATION_TRUE = 'RESERVATION_TRUE'
const CHANGE_SELECT_DATE = 'CHANGE_SELECT_DATE'
function getStringData(date) {
let curr_date = date.getDate();
let curr_month = date.getMonth() + 1;
let curr_year = date.getFullYear();
let thisDate = { date: ${curr_year}-${curr_month}-${curr_date} };
return thisDate;
}
function getDatesArray() {
let dateOld = new Date();
let now = new Date();
let arrayOld = [];
let arrayNew = [];
for (let index = 0; index <= 6; index++) {
dateOld.setDate(dateOld.getDate() - 1);
let dateString = getStringData(dateOld)
arrayOld.push(dateString);
}
for (let index = 0; index <= 6; index++) {
if (index !== 0) {
now.setDate(now.getDate() + 1);
}
let dateString = getStringData(now)
arrayNew.push(dateString);
}
return arrayOld.reverse().concat(arrayNew);
}
let initialState = {
dateSelect: getDatesArray(),
timeSelect: [
{ time: '10:00' }, { time: '12:00' }, { time: '14:00' },
{ time: '16:00' }, { time: '18:00' }, { time: '20:00' }
],
selectDate: '',
selectTime: '',
seats: [
{
date: null,
time: null,
id: 1,
reserved: false
},
{
date: null,
time: null,
id: 2,
reserved: false
},
{
date: null,
time: null,
id: 3,
reserved: false
},
{
date: null,
time: null,
id: 4,
reserved: false
},
{
date: null,
time: null,
id: 5,
reserved: false
},
{
date: null,
time: null,
id: 6,
reserved: false
},
]
}
const reduser = (state = initialState, action) => {
switch (action.type) {
case RESERVATION_TRUE:
return {
...state,
seats: state.seats.map(p => {
if (p.id === action.id) {
return { ...p, reserved: !action.reserved }
}
return p
})
}
case CHANGE_SELECT_DATE:
return {
...state,
}
default:
return state
}
}
export const reservedTrueAC = (id) => ({type: RESERVATION_TRUE, id})
export default reduser
———————————-
AppContainer:
import React from 'react'
import App from './App'
import { connect } from 'react-redux';
import {reservedTrueAC} from '../reducer'
let mapStateToProps = (state) => {
return {
seats: state.App.seats,
nowDate: state.App.nowDate,
dateSelect: state.App.dateSelect,
timeSelect: state.App.timeSelect
}
}
let mapDispathToProps = (dispath) => {
return {
reservedTrue: (id) => {
dispath(reservedTrueAC(id))
}
}
}
const AppContainer = connect(mapStateToProps, mapDispathToProps)(App)
export default AppContainer
import React from 'react';
import './../App.css';
const App = (props) => {
let dateOptions = props.dateSelect.map(date => <option key={date.date}>{date.date}</option>)
let timeOpyions = props.timeSelect.map(time => <option key={time.time}>{time.time}</option>)
let places = props.seats.map(place => <span onClick={() => {props.reservedTrue(place.id)}}
className={place.reserved ? "place-active" : "place" } key={place.id}>{place.id}</span>)
return (
<div className="App">
<div>
<p>Выберите дату и время</p>
{console.log(props)}
<select value={props.dateSelect.date}>
{dateOptions}{console.log(props.dateSelect.date)}
}
</select>
<select value={props.timeSelect.time}>
{timeOpyions}
</select>
<div className="places">
{places}
</div>
</div>
</div>
);
}
export default App;
Иван
вот что имею сейчас
Иван
Иван
как связать дату и время с местами?
Иван
не могу понять как обрабатывать изменения в select-ах
Иван
на сколько я понял, как минимум нужно написать два обработчика для select-ов для изменения value
Anonymous
А не проще только тикущую дату открывать или у тебя можно будет на перед резервировать
Иван
Да
Anonymous
Данные как собираешься хранить на серваке или с файла вычитывать
Иван
localStorage
Heavy
Ребята,если кидаете код,то используйте инструмент "Ножницы" в винде. В вин7 они тоже есть. Вырезайте кусок экрана и кидайте как картинку. Так гораздо лучше,чем текст
Иван
у меня ubuntu
Heavy
Там shutter есть
Anonymous
В докладе там кажется сохраняется в виде строки типо как объект
Anonymous
Ой конструктор
Heavy
Так в чем сейчас проблема? Не знаешь как отследить выбранный элемент в селекте?
Иван
Да, и как на основе выбранных параметров показывать разные массивы с местами
Anonymous
По ходу нема просто алгоритма не может придумать
Иван
Реализовать одностраничное приложение резервирования билетов в кинотеатр. Время начала
сеансов 10:00, время последнего сеанса 20:00. Шаг - каждые 2 часа. Таким образом в течение дня
может быть 6 сеансов.
Интерфейс должен отображать доступные даты для бронирования, сеансы для выбранной даты,
свободные и забронированные места. При выборе даты и сеанса меньше текущего времени и
даты, должны отображаться архивные данные без возможности их изменения.
Вот что должно быть