@{
ViewBag.Title = "Инструкция";
}
<div id="faq-text" class="text-left">
<div id="accordion" class="mt-4">
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-youtube">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-youtube" aria-expanded="true" aria-controls="id-youtube">
Демонстрация работы карты (видео)
</button>
</h5>
</div>
<div id="id-youtube" class="collapse" aria-labelledby="label-youtube" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fjXPdFZwhzM" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-timeline">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-timeline" aria-expanded="true" aria-controls="id-timeline">
Временной промежуток
</button>
</h5>
</div>
<div id="id-timeline" class="collapse" aria-labelledby="label-timeline" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Основным инструментом выборки данных является фильтр выбора временного промежутка, осуществляемый с помощью двух инструментов:
</p>
<ul>
<li>Слайдер временной линии (Timeline)</li>
<li>Поля ввода конкретного года</li>
</ul>
<p>
Цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке обозначена временная линия (двухсторонний слайдер), позволяющая задавать временные границы с помощью «ползунков» <span class="font-weight-bold back-ground green">IV</span> и <span class="font-weight-bold back-ground green">V</span>.
Цифрами <span class="font-weight-bold back-ground orange">II</span> и <span class="font-weight-bold back-ground orange">III</span> на рисунке обозначены временные границы – от наименьшего года, упоминаемого в онтологии, до текущего.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "1"})" alt="Временная линия">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<br />
<p>
Можно воспользоваться вводом конкретного года как для нижней (цифра <span class="font-weight-bold back-ground red">I</span>), так и для верхней (цифра <span class="font-weight-bold back-ground red">II</span>) границы поиска, представленной на рисунке ниже.
При вводе некорректного значения изменения не произойдут.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "2"})" alt="Ввод конкретного года">
<p hidden>Название рисунка, если оно нужно</p>
</div>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-name-find">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-name-find" aria-expanded="true" aria-controls="id-name-find">
Поиск поселения по названию
</button>
</h5>
</div>
<div id="id-name-find" class="collapse" aria-labelledby="label-name-find" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Для поиска поселений по названию используется поле ввода, отмеченное цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке ниже.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "3"})" alt="Поиск по названию">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
При вводе значения в поле поиска, осуществляется подбор возможных поселений, название которых в начале содержит введенное значение (показано на рисунке ниже).
Пользователю предоставляется возможность выбрать нужное поселение из выпадающего списка или выполнить поиск по нажатию на кнопку.
При выборе поселения произойдет центрирование карты, и увеличится масштаб.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "4"})" alt="Пример выпадающего списка при поиске поселений по названию">
<p hidden>Название рисунка, если оно нужно</p>
</div>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-filters">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-filters" aria-expanded="true" aria-controls="id-filters">
Фильтрация поселений
</button>
</h5>
</div>
<div id="id-filters" class="collapse" aria-labelledby="label-filters" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Доступна фильтрация поселений на карте по отношению к определенному типу поселения и по вхождению в состав административных единиц. Группа фильтров представлена на рисунке ниже.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "5"})" alt="Фильтры поселений">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
Цифрой <span class="font-weight-bold back-ground red">I</span> отмечена кнопка применения фильтров, а другая кнопка (цифра <span class="font-weight-bold back-ground orange">II</span>) отменит действие фильтров на карте и вернет списки в начальное состояние.
По умолчанию списки обоих фильтров находятся в свернутом состоянии и разворачиваются при нажатии на название.
Секция фильтра по типу поселений выделена цифрой <span class="font-weight-bold back-ground green">III</span>, а по административным единицам – <span class="font-weight-bold back-ground light-green">IV</span>, при этом цифрами <span class="font-weight-bold back-ground purple">V</span> отмечено количество вариантов фильтрации.
С помощью опций выбора <span class="font-weight-bold back-ground blue">VI</span> можно комбинировать фильтры, чтобы затем применить их одной кнопкой <span class="font-weight-bold back-ground red">I</span>.
</p>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-info">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-info" aria-expanded="true" aria-controls="id-info">
Подробная информация о поселении
</button>
</h5>
</div>
<div id="id-info" class="collapse" aria-labelledby="label-info" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Поселения на карте представлены в качестве маркеров. При нажатии на любой маркер слева появится боковая панель, содержащая подробную информация о выбранном поселении (секция <span class="font-weight-bold back-ground red">I</span> на рисунке ниже).
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "6"})" alt="Левая боковая панель">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
На панели подробной информации присутствует кнопка «Добавить в экспорт», отмеченная цифрой <span class="font-weight-bold back-ground orange">II</span>. При нажатии этой кнопки поселение добавится в список экспорта данных.
Нажатие на кнопку <span class="font-weight-bold back-ground yellow">III</span> скроет боковую панель, то же самое произойдет при повторном нажатии на маркер того же самого поселения.
Информация о поселении разделена <span class="green">зеленой линией</span>, выше которой расположена постоянная информация о поселении. В этом разделе при наличии отображается история города. Так как история может быть весьма большой, она по умолчанию скрыта и разворачивается по нажатию на кнопку <span class="font-weight-bold back-ground dark-blue">IV</span>.
Ниже <span class="green">зеленой линии</span> располагаются секции (отмечены цифрами <span class="font-weight-bold back-ground purple">V</span>) с дополинтельной информацией, среди которой есть источник. Если источником является некоторая ссылка (цифры <span class="font-weight-bold back-ground blue">VI</span>), она будет доступна для перехода.
</p>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-export">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-export" aria-expanded="true" aria-controls="id-export">
Экспорт данных
</button>
</h5>
</div>
<div id="id-export" class="collapse" aria-labelledby="label-export" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Чтобы выполнить экспорт данных в определенный формат, необходимо в первую очередь добавить несколько поселений в список экспорта, как это было описано в разделе "Подробная информация о поселении".
Затем нужно нажать кнопку, представленную на рисунке ниже цифрой <span class="font-weight-bold back-ground red">I</span>.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "7"})" alt="Правая панель в режиме экспорта">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
В результате нажатия на кнопку <span class="font-weight-bold back-ground red">I</span> появится боковая панель <span class="font-weight-bold back-ground green">II</span>, содержащая кнопки экспорта в формат Word (<span class="font-weight-bold back-ground purple">IV</span>) и Excel (<span class="font-weight-bold back-ground dark-blue">V</span>).
Кроме того, пользователю еще раз предлагается уточнить, информация о всех ли добавленных поселений должна быть экспортирована.
По умолчанию, все поселения отмечены для экспорта (отмечено цифрами <span class="font-weight-bold back-ground orange">III</span>), однако пользователь может снять выделение, либо вернуть его, пока открыта панель.
</p>
</div>
</div>
</div>
@if ((bool)ViewBag.isAuth)
{
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-moderator">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-moderator" aria-expanded="true" aria-controls="id-moderator">
Модерация данных
</button>
</h5>
</div>
<div id="id-moderator" class="collapse" aria-labelledby="label-moderator" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Получив роль модератора появляется возможность добавления нового поселения на карту с помощью кнопки, отмеченной цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке ниже.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "8"})" alt="Правая панель в режиме добавления нового поселения">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
Панель на рисунке содержит форму ввода данных (цифра <span class="font-weight-bold back-ground green">II</span>), которая позволит добавить новое поселение в онтологию.
При нажатии на кнопку «Отправить данные» (цифра <span class="font-weight-bold back-ground orange">III</span>) происходит проверка введенных данных и в случае их корректности, данные формы будут отправлены на сервер.
Отмеченные цифрой <span class="font-weight-bold back-ground dark-blue">IV</span> данные являются обязательными для заполнения, так как составляют основу любого поселения, а поля ввода с пометкой цифры <span class="font-weight-bold back-ground purple">V</span> являются дополнительными.
Поле ввода URL поселения по умолчанию не редактируется, чтобы URL создавался программным образом на стороне сервера, так как он является уникальным ключом поселения.
Однако с помощью селектора <span class="font-weight-bold back-ground blue">VI</span> можно ввести свой URL, при этом поле станет обязательным для заполнения.
</p>
<br />
<p>
Новый инструментарий также появляется при открытии подробной информации о поселении (см. рисунок ниже).
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "9"})" alt="Левая панель с новым функционалом">
<p class="font-weight-bold">Левая панель с новым функционалом</p>
</div>
<p>
Новые элементы отмечены цифрами <span class="font-weight-bold back-ground">I-IV</span>.
При нажатии на кнопку <span class="font-weight-bold back-ground red">I</span> появится правое боковое меню с возможность редактирования сведения об основном поселении (см. рисунок <span class="font-italic">"Редактирование информации основного поселения"</span>).
При этом поля ввода правой панели будут заполнены соответствующими данными из левой панели.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "10"})" alt="Левая и правая панели в режиме редактирования информации основного поселения">
<p class="font-weight-bold">Редактирование информации основного поселения</p>
</div>
<br />
<p>
Воспользовавшись кнопкой, отмеченной цифрой <span class="font-weight-bold back-ground orange">II</span> на рисунке <span class="font-italic">"Левая панель с новым функционалом"</span>, пользователь увидит в правой панели новую форму добавления новых дополнительных сведений, что показано на рисунке ниже.
А если нажать кнопки <span class="font-weight-bold back-ground blue">IV</span>, откроется режим редактирования дополнительной информации.
</p>
<div class="text-center">
<img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "11"})" alt="Правая панель в режиме добавления дополнительной информации о поселении">
<p hidden>Название рисунка, если оно нужно</p>
</div>
<p>
На рисунке выше параметры формы, отмеченные цифрой <span class="font-weight-bold back-ground red">I</span>, обязательны для заполнения, так как являются основой для создания сведений.
Все остальные параметры не обязательные, однако также проходят проверку на корректность, например, в качестве численности населения нельзя ввести слово.
Для упрощения работы с большими массивами было решено сделать список выбора типов поселений и административных единиц (цифры <span class="font-weight-bold back-ground green">II</span> на рисунке).
</p>
</div>
</div>
</div>
<!--Следующий раздел-->
<div class="card">
<div class="card-header" id="label-doxygen">
<h5 class="mb-0">
<button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-doxygen" aria-expanded="true" aria-controls="id-doxygen">
Документация к приложению
</button>
</h5>
</div>
<div id="id-doxygen" class="collapse" aria-labelledby="label-doxygen" data-parent="#accordion">
<div class="card-body">
<!--Текст-->
<p>
Нажмите <a href="~/Content/html/index.html" target="_blank">сюда</a> для перехода к документации, созданной на основе комментариев с помощью Doxygen.
</p>
</div>
</div>
</div>
}
</div>
</div>