Schedule 2.0 for RS School

README.md

@@ -3,3 +3,5 @@
 [Task](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/schedule.md)
 
 [Schedule](https://schedule-team34.netlify.app)
+
+[Documentation](./schedule/Documentation.md)

schedule/.eslintignore

@@ -0,0 +1,3 @@
+{
+    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
+}

schedule/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'airbnb-typescript',
+    'prettier',
+  ],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+  plugins: ['react', 'prettier'],
+};

schedule/.gitignore

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

schedule/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

schedule/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

schedule/Documentation.md

@@ -0,0 +1,145 @@
+# Schedule для RS School
+
+Данный репозиторий содержит возможную реализацию новой версии расписания для приложения [The Rolling Scopes](https://app.rs.school/). Ниже подробно расписаны основные элементы реализации и логика работы расписания.
+
+## Основные компоненты
+
+#### Панель управления - ControlPanel
+
+Панель управления содержит основные элементы управления внешним видом расписания.
+
+- Кнопка смены режима вида распиания меняет иконку на выбранный вид.
+- Выбор часового пояса учитывается при любом виде расписания.
+- Есть возможность сохранить выбранные данные расписания в файл в формате pdf.
+- Hide old events прячет неактуальные события, которые уже прошли.
+- Переключение в ролей студент/ментор
+- Кнопка добавления нового события, при активной роли **ментор**.
+
+#### Вид расписания: таблица - ScheduleTable
+
+Самый информативный вид расписания. Содержит максимальную информацию о событиях расписания. Имеется возможность настроить показываемые колонки, за исключением основных: **Date % time**, **Type**, **Name**.
+
+###### Данные колонок:
+
+- информация о недавних правках события (lastUpdatedDate). Для обращения внимания на те события, где что-то изменилось с возможного последнего просмотра студентом
+- Date % time - дата и время начала события
+- Time left - для событий с дедлайном считается количество дней/часов до наступления дедлайна
+- Type - тип события, выбирается из подобранного списка основных видов заданий, для которых также определены цвета из палитры antd
+  - code jam': 'lime'
+  - codewars: 'magenta'
+  - cross-check: 'blue'
+  - deadline: 'red'
+  - interview: 'orange'
+  - review: 'yellow'
+  - self education: 'cyan'
+  - special: 'gold'
+  - task: 'green'
+  - test: 'volcano'
+  - webinar: 'purple'
+- Special - дополнительные теги для уточнения типа задания. Для удобства есть подобранный список самых популярных вариантов **'optional', 'live', 'record', 'js', 'node.js', 'react', 'angular', 'css', 'html', 'git', 'markdown', 'task'**. Но ментор может добавить и недостающие при редактировании события.
+- Name - Название события и ссылка на страницу события.
+- Url - основная ссылка события. Если это ссылка на github или youtube, то иконка будет соответствующая
+- Приблизительное время в часах, которое будет длиться событие. Или сколько времени может потребоваться на выполнение задания.
+- Organizer - имя на github организатора события
+- Place - место проведения события. Заполнено, если событие офлайн и организатор заполнил данные в специальном поле.
+
+#### Вид расписания: список - ScheduleList
+
+Сокращенный вид расписания в виде списка по неделям. Удобен при просмотре расписания с мобильных устройств. Отображаются только основные данные - дата, тип и название события. Так же отменяется количество событий в день.
+
+#### Вид расписания: календарь - ScheduleCalendar
+
+Еще один вид расписания - календарь. Позволяет наглядно оценить ожидающие в ближайшее время события.
+
+#### Страница задания - EventPage
+
+Страница расписания. Отображает всю имеющуюся информацию по заданию. Отличается по виду для ролей студент/ментор.
+
+###### Роль - студент
+
+Для пользователя как студент страница проста - отображаются только те поля, которые содержат данные, заполненные организатором.
+
+###### Роль - ментор
+
+В роли _ментор_ страница превращается в конструктор. Все доступные для заполнения поля отображаются в зависимости от выбранных контролей. И при заполнении их, они станут видны в роли _студент_.
+
+##### Контроли
+
+- Event visible - добавляемое событие можно сделать невидимым для студентов. Сохраняется в поле (isOpen)
+- Event offline - если событие оффлан, появляются поля для внесение адреса места и координат события. Без точных координат карта будет указывать на дефолтное место (г. Минск).
+- Disable feedback - Доступность поля отзыва для студентов. В роли ментора это поле отображается сохранненные фидбеки по событию (функция в разработке)
+- With deadline - если событие с дедлайном, переключатель нужно поставить в верную позицию.
+- Update - если обновилось что-то в задании и нужно сохранить изменения
+- Create new as copy - для быстрого добавления похожего задания или копии с прошлого набора - можно редактировать старое задание и сразу создать новое.
+- Delete - все просто - удаляем событие.
+
+##### Поля для редактирования
+
+- Имя события - все просто, указывается название события.
+- Дата начала и конца (при наличии включенного дедлайна). Внимание - необходимо подтверждать выбор каждой даты кнопкой **Ok**.
+- Выбор курса - можно выбрать из списка доступных курсов.
+- Тип события - выбирается из заранее подобранного списка.
+- Специальные теги события - кастомизируем событие уточняющими тегами.
+- Organizer - заполняется Имя пользователя на github.
+- Hours - оценочная длительность события или необходимое время на выполнение
+- Days(Hours) left: - автоматически вычисляемое поле, сколько времени будет до дедлайна для событий с дедлайном.
+- Event main link - основвная ссылка на событие. Если это будет ссылка на описание задания с github, то все описание задания будет загружено и отобразится на странице события в секции Event detailed description. Это избавляет от необходимости повторно описывать задание.
+- Event description - описание задания. Поддерживается и рекомендуется **markdown**.
+- Event detailed description - при основной ссылке события с описанием на github.
+- Location - поля для заполнение места оффлайн события. Координаты места вводятся через запятую в формате "широта","долгота".
+
+## Детали реализации
+
+##### Основные используемые библиотеки и технологии
+
+- react
+- mobx
+- antd
+- typescript
+
+##### Вспомогательные используемые библиотеки и технологии
+
+- html2canvas
+- jspdf
+- react-yandex-maps
+- classnames
+- moment
+
+### Общие принципы работы
+
+Все данные расписания представляет собой массив объектов событий вида:
+
+```javascript
+interface IEvent {
+  id: string;
+  name: string;
+  description: string;
+  descriptionUrl: string;
+  type: string;
+  specialTags?: string;
+  timeZone: string;
+  dateTime: number;
+  place: string;
+  comment: string;
+  deadline: number;
+  hours?: string;
+  lastUpdatedDate?: number;
+  isOpen: boolean;
+  isVisible?: boolean;
+  isFeedbackEnabled?: boolean;
+  organizerId?: string;
+  course?: string;
+}
+```
+
+При запуске приложения все данные расписаний разных курсов загружаются в стор приложения. Так же при запуске читается локальное хранилище браузера пользователя на предмет наличия настроек приложения. С учетом настроек применяются фильтры для отображения только выбранных событий. Также генерируются события - **deadline** на основании наличия даты дедлайна (deadline > 0). Отдельно события этого типа не хранятся.
+
+Дальнейшая работа приложения зависит от действий пользователя и роли пользователя.
+
+###### Роль - студент
+
+В данном режиме пользователю доступны только настройки внешнего вида приложения. Просмотр событий по выбранным фильтрам. Все изменения настроек сохраняются в стор и локальное хранилище браузера пользователя. Допольнительного обмена данными с сервером нет.
+
+###### Роль - ментор
+
+В этом режиме появляются инструмены для внесения изменений в расписание. Все изменения вносятся со страницы события - **EventPage**. При внесении изменений данные по редактируемому событию обновляются сразу в и на сервер, и в стор, что позволяется не перегружать все данные заново и не отнимать время пользователя.

schedule/README.md

@@ -0,0 +1,44 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).