FLGameCompanion/README.md

<p align="center">
    <img src="Resources/gitPreviews.png" width="100%" alt="Banner">
</p>
<p align="center">
    <a href="http://freelancerothe.ucoz.ru/"><img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=F70000&background=FF000000&width=435&lines=%D0%98%D0%BD%D0%BE%D0%B3%D0%B4%D0%B0+%D1%81%D0%BC%D1%8B%D1%81%D0%BB+%D0%B8%D0%B3%D1%80%D1%8B+%D0%B2+%D1%87%D0%B8%D1%82%D0%B5%D1%80%D1%81%D1%82%D0%B2%D0%B5+%3A)" alt="Typing SVG" /></a>
</p>
<p align="center">
    <a href="https://sites.google.com/view/dvurechensky" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Dvurechensky-N-blue"></a>
    <img src="https://img.shields.io/badge/Csharp-VS2022-blue?logo=csharp&logoColor=FFFF00">
</p>
<!-- Social icons section -->
<p align="center">
    <a href="https://www.youtube.com/@DvurechenskyMedia"><img width="32px" alt="Youtube" title="Youtube" src="https://i.imgur.com/qiXu7b2.png"/></a>
    &#8287;&#8287;&#8287;&#8287;&#8287;
    <a href="https://discord.gg/d4TAqs8j" alt="Discord" title="Dvurechensky Pro"><img width="32px" src="https://i.imgur.com/OViZO8J.png"/></a>
    &#8287;&#8287;&#8287;&#8287;&#8287;
    <a href="https://sites.google.com/view/dvurechensky"><img width="32px" alt="Free Stuff" title="Free gifts for you" src="https://i.imgur.com/0uVwkoZ.png"/></a>
</p>

# <g-emoji class="g-emoji" alias="crystal_ball" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f52e.png">🔮</g-emoji> Тестовое задание компании Стратегия Рийска (Владикавказ)
**🎯SCAM вакансия**

> https://hh.ru/vacancy/83142848?from=share_ios

- 🚀 Требования системы для запуска:
1. Visual Studio 2022

- 🚀 Требования системы для разработки:
> для функционирования встроенного Grunt в проекте
1. Выгрузить папку node_modules из проекта
2. В PowerShell в корне проекта ввести команду 
```bash
cmd /c mklink /D node_modules node_modules
```
3. Перезапустить проект

## ✨Требования задания

> The text in the "Company Name" column should be a link that opens "Details" for its 
object
1. Текст в столбце «Название компании» должен быть ссылкой, которая открывает «Подробности» компании
> Use EntityFramework, store data in memory (add a code that creates initial data at 
application startup)
2. Используйте EntityFramework, храните данные в памяти (добавьте код, создающий исходные данные в
запуск приложения)
> Set a fixed width for groups in "Details"
3. Установите фиксированную ширину для групп в разделе «Подробности».
> Use CSS Flex to align groups in "Details", there should be 1 column of groups if browser 
window is narrow
4. Используйте CSS Flex для выравнивания групп в разделе "Подробности", должен быть 1 столбец групп, если окно браузера узкое
> Use CSS Grid to align items in groups in "Details"
5. Используйте CSS Grid для выравнивания элементов в группах в разделе «Подробности».
> Avoid duplication of CSS and HTML markup code that generates "Details" in C#/markup 
code (each group should have the same layout for the 'caption', 'toolbar' and 'content' 
items)
6. Избегайте дублирования кода разметки CSS и HTML, который генерирует «Подробности» в C#/разметке.
код (каждая группа должна иметь одинаковый макет для объектов «заголовка», «панели инструментов» и «контента»)
> Implement behavior for 'Refresh' button: reload data from the server and recreate DOM 
in browser
7. Реализовать поведение кнопки «Обновить»: перезагрузить данные с сервера и заново создать DOM.
в браузере
> Adjust the "Employees" group to be nearly twice wider than other groups, keep vertical 
groups alignment
8. Отрегулируйте группу "Сотрудники", чтобы она была почти в два раза шире, чем другие группы, сохраняя вертикальность
выравнивание групп
> Don't render grids on the server side. Instead, render an empty grid and perform a new 
'fetch' request when a page is loaded and build grid rows in javascript code, in browser. 
Implement necessary server side API to load data for grids
7. Не визуализируйте сетки на стороне сервера. Вместо этого визуализируйте пустую сетку и выполните новую
запрос «выборки» при загрузке страницы и построение строк сетки в коде javascript в браузере.
Реализовать необходимый API на стороне сервера для загрузки данных для сеток.

## 🤖 Результат выполнения

<p align="center">
  <h1 align="center">👨🏽‍💻 Версия на ПК</h1>
  <h5 align="center">💫 Main 💫</h5>
  <img src="Info/1.png" width="100%">
  <h5 align="center">💫 Details 💫</h5>
  <img src="Info/2.png" width="100%">
  <h1 align="center">👨🏽‍💻 Для заполнения групп создано REST API</h1>
  <img src="Info/3.png" width="100%">
  <h1 align="center">👨🏽‍💻 Пример заполненной версии 💫Details💫</h1>
  <img src="Info/4.png" width="100%">
  <h1 align="center">👨🏽‍💻 Пример мобильной версии 💫Details💫</h1>
  <h5 align="center">💫 870px 💫</h5>
  <p align="center">
    <img src="Info/5.png" width="65%">
  </p>
  <h5 align="center">💫 500px 💫</h5>
  <p align="center">
    <img src="Info/6.png" width="35%">
  </p>
</p>

## 👾 Важно отметить

- В задаче не была описана логика работы кнопок редактирования и поведение кнопки добавления
- В задаче не затрагивались вопросы ограничения по стеку технологий применяемых для ускорения разработки
- В задаче нету пунктов о сложности или простоте исполнения, конкретного формата выполнения работы не указано
- Бонусом в задаче реализована поддержка TypeScript и автоматическая генерация JavaScript и CSS сразу в минимизированный формат
- Бонусом в задаче сделано API способное принимать пачки данных на обработку