close

Вход

Забыли?

вход по аккаунту

Тарасов Алексей Иванович. Моделирование и реализация интерфейса приложения для подачи заявок на повышенную стипендию

код для вставки
Аннотация
Магистерская диссертация на тему «Моделирование и реализация интерфейса приложения для подачи заявок на повышенную стипендию» содержит 68 страниц текста, рисунков – 23, использованных источников - 16.
В настоящий момент подобные приложения востребованы для упрощения получения и управления информацией и автоматизации процесса анализа данных.
Ключевые слова
: интерфейс приложения, Web-приложение, фрейм-
ворк, программное обеспечение, подача заявок на повышенную стипендию.
Предмет исследования
. Содержание программного обеспечения для
математического моделирование и реализация интерфейса приложения для
подачи заявок на повышенную стипендию и возможности его применения
для исследования задачи.
Объект исследования
. Моделирование и реализация интерфейса при-
ложения для подачи заявок на повышенную стипендию.
Цель работы
. Моделирование и реализация интерфейса приложения
для подачи заявок на повышенную стипендию в Орловском государственном
университете.
Метод исследования
. Для исследования применяется метод ориги-
нального (индивидуального) проектирования, когда проектные решения разрабатываются «с нуля» в соответствии с требованиями к информационной
системе.
Результаты работы
. В магистерской диссертации разработан интер-
фейс приложения, позволяющий студентам подавать заявки на повышенную
стипендию, а администратору проверять заявки и составлять отчеты.
Работа имеет теоретическое и практическое значение
, т.к. разра-
ботанный интерфейс приложения может применяться для подачи заявок на
повышенную стипендию и для каких-либо задач связанных с формирование
4
отчетов по заявкам.
Abstract
The master’s thesis on M̈odeling and implementing the application
interface for applying for an advanced scholarshipc̈ontains 68 pages of text, figures
- 23, used sources - 16.
At the moment, such applications are in demand to simplify the receipt
and management of information and automate the process of data analysis.
Keywords
: application interface, Web-application, framework, software,
application for increased scholarship.
Subject of study
. The content of software for mathematical modeling
and implementation of the application interface for applying for an increased
scholarship and the possibilities of its application for the study of the task.
Object of study
. Modeling and implementing the application interface for
applying for an increased scholarship.
Objective
. Modeling and implementing the application interface for
applying for an increased scholarship at Orel State University.
Method of research
. For the research, the method of original (individual)
design is applied, when the design solutions are developed f̈rom scratchïn
accordance with the requirements for the information system.
Results of the work
. In the master’s thesis, an application interface has
been developed that allows students to apply for an increased scholarship, and
the administrator to check applications and make reports.
The work has a theoretical and practical value
, because The developed
application interface can be used to apply for an increased scholarship and for
any tasks related to the formation of reports on applications.
5
Содержание
Введение
7
Глава I Постановка задачи
14
1.1 Описание предметной области . . . . . . . . . . . . . . . . . . .
14
1.2 Требования к веб-приложению . . . . . . . . . . . . . . . . . . .
17
Глава II Разработка приложения
2.1 Диаграмма переходов для интерфейса студента . . . . . . . . .
18
18
2.2 Диаграмма переходов для интерфейса администратора системы
по подаче заявок на повышенную стипендию . . . . . . . . . .
19
2.3 Шаблоны главной страницы, регистрации и авторизации студента 20
2.4 Шаблоны для подачи заявок и добавления достижений студента 28
2.5 Шаблоны для проверки заявок администратором . . . . . . . .
39
2.6 Настройка параметров для подачи заявок на повышенную стипендию администратором системы . . . . . . . . . . . . . . . .
Глава III Тестирование
45
58
3.1 Принцип работы интерфейса для студента . . . . . . . . . . . .
58
3.2 Принцип работы интерфейса для администратора системы . . .
61
Заключение
66
Список литературы
68
Приложение
70
6
Введение
Обоснование выбора темы и ее актуальность
Получение всесторонней информации, так или иначе связанной с научноисследовательской деятельностью, находит все большую актуальность в
рамках деятельности вуза. В рамках системы электронного правительства,
это отвечает общегосударственным запросам по созданию систем электронного документооборота. На данный момент, Орловский Государственный
Университет им. Тургенева включает в себя 12 крупных структурных подразделений по основным научным управлениям. В их число входят НИИ
естественных наук, НИИ филологии, НИИ психологии и педагогики. Опираясь на это, возникает необходимость получения всесторонней информации,
связанной с деятельностью вышеописанных НИИ, и эта необходимость приобретает все более и более приоритетный характер. В связи с ростом количества участников, автоматизация учета и анализа результатов деятельности
НИИ является важнейшей проблемой данного процесса, наряду с отсутствием хорошо организованной системой подготовки электронной отчетности о
научной работе. В частности, область деятельности успешного студента вуза ставит его перед необходимостью подачи заявок на повышенную государственную академическую стипендию. Это является важной и ответственной
задачей: необходимо применять индивидуальный подход к организации своих достижений и их отличительных черт. Обращая внимание на сложность
выполняемой работы, поставленная задача становится одной из важнейших,
в рамках упрощения и систематизации всей деятельности как преподавателей ВУЗа, так и его студентов.
Проблема, суть которой заключается в хранение больших объемов информации, в наше время принимает серьезные обороты. Каждая, без исключения, отрасль человеческой деятельности неизбежно сталкивается с тем,
7
чтобы хранить большие объемы информации, стараться минимизировать её
потери, а так же получать к ней беспрепятственный доступ. Специализированные структуры, базы данных(БД), в подновляющем большинстве случаев помогают решить возникающие информационные проблемы. Применение
БД оправдано там, где необходимо работать с большими объемами разнообразной информации, подчиняющейся структуре некоторой логики и обладающей сложными внутренними взаимосвязями. Для операций же с БД,
существуют Системы уравнения базами данных. Для того, чтобы качественно и эффективно спроектировать БД, необходимо детально и разносторонне
описать предметную область.
Для создания интерфейса для подачи заявок на повышенную стипендию был выбран фреймворк Django так как он использует в качестве
языка программирования Python. Данный язык программирования прост в
использования, структурирован и достаточно универсален. В свою очередь
фреймворк упрощает обеспечение безопасности продукта. Многие встроенные механизмы не позволяют применять небезопасные решения. Django по
умолчанию экранируют все значения перед добавлением в базу, а перед отображением экранирует html-код.
Актуальность исследования определяется необходимостью автоматизировать трудоемкий процесс составления заявок на получение повышенной
государственной академической стипендии и избавления от необходимости
заполнения, а также хранения данных документов на бумажном носителе.
Степень разработанности проблемы
В ходе работы был проведен обзор доступных средств сбора научной
деятельности, с целью нахождения варианта, в полной мере отвечающего
сформулированным требованиям.
Academic Line
[1] - система управления научно-исследовательской де-
ятельностью , разработанная специалистами VP GROUP, предназначена
8
для обеспечения информационной и организационной поддержки следующих процессов:
∙ Учет и планирование исследований, распределение как материальнотехнических, так и интеллектуальных ресурсов вуза;
∙ Учет интеллектуальной собственности организации, защита результатов интеллектуальной деятельности;
∙ Подготовка кадров высшей научной квалификации, набор в аспирантуру и докторантуру;
∙ Деятельность диссертационных советов;
∙ Подготовка отчетов по НИД вуза, аспирантуры и докторантуры.
К сожалению, данный инструмент, в рамках выполнения поручений, касающихся учебной части, является недостаточно подходящим и, как следствие,
непригодным.
Истина
[2] - система управления информацией о результатах научно-
исследовательской и педагогической деятельности. Система предназначена
для сбора, учета, систематизации, хранения, анализа и выдачи по запросу
информации, характеризующей результаты деятельности научных и образовательных организаций. Описанная выше система управления информацией
не удовлетворяет всем необходимым требованиям и, в следствии чего, ее использование недопустимо.
1С:Университет
[3] - решение для автоматизации управленческой де-
ятельности вуза. Продукт охватывает все уровни деятельности основных
подразделений учреждения высшего профессионального образования и интегрируется с типовыми решениями фирмы «1С» для бухгалтерии и отдела
кадров.
Работа приемной комиссии:
9
∙ Планирование проведения приемной кампании;
∙ Формирование личного дела абитуриента;
∙ Формирование необходимого перечня документов абитуриента;
∙ Проведение вступительных испытаний и зачисление.
Планирование учебного процесса:
∙ Формирование и учет учебных планов и рабочих учебных планов(РУП) в соответствии ФГОС-3+.;
∙ Версионирование учебных планов и РУП;
∙ Поддержка двухуровневой системы.
Расчет и распределение нагрузки:
∙ Формирование контингента обучаемых по учебному плану и дисциплинам;
∙ Формирование правил расчета нагрузки преподавателей;
∙ Формирование структуры обучаемого контингента;
∙ Планирование распределения нагрузки кафедр;
∙ Распределение нагрузки по преподавателям.
Данная система не отвечает требованиям по созданию и хранению заявок
на повышенную стипендию, таким образом, подходящим инструментом она
не является.
По результатам проведенного обзора был сделан вывод о том, что ни
одна из рассмотренных систем не удовлетворяет всем сформулированным
требованиям.
10
Предмет исследования
Содержание программного обеспечения для математического моделирование и реализация интерфейса приложения для подачи заявок на повышенную стипендию и возможности его применения для исследования задачи.
Объект исследования
Моделирование и реализация интерфейса приложения для подачи заявок на повышенную стипендию.
Цель работы
.
Интерфейс приложения для подачи заявок на повышенную стипендию
будет интегрирован в уже существующую систему электронной отчетности
о научно-исследовательской работе сотрудников вуза [4], [5].
Основные задачи исследования
∙ Спроектировать интерфейса приложения для подачи заявок на повышенную стипендию;
∙ Разработать шаблоны для регистрации и авторизации студентов;
∙ Сверстать шаблоны для добавления достижений и подачи заявок на
повышенную стипендию для студента;
∙ Создать шаблоны для проверки заявок на повышенную стипендию
преподавателем;
∙ Интегрировать разработанный интерфейс в проект "Система электронной отчетности о научно-исследовательской работе сотрудников
вуза".
11
Основными инструментами
, используемыми в данной работе, яв-
ляются языки программирования Python [6], HTML [7],CSS [8], фреймворк
Semantic UI [9] для создания переносимых интерфейсов и фреймворк для
создания веб-приложений Django [10] и ряд JavaScript-библиотек, каждая из
которых решает определенную задачу:
∙
jQuery
[11] - фреймворк, упрощающий взаимодействие с различными
HTML/CSS элементами и возможностями браузеров;
∙
Moment.js
[12] - библиотека для работы с объектами даты и времени;
∙
Datepicker
[13] - является графическим интерфейсом пользователя, ко-
торый позволяет пользователю выбрать дату из календаря и / или
времени от интервала времени;
∙
DataTables
[14] - библиотека позволяет добавлять для таблиц дополни-
тельный функционал такие как сортировка, поиск, пагинация;
∙
Select2
[15] - библиотека позволяет создать элемент интерфейса в виде
раскрывающегося списка с поддержкой поиска, получения удаленных
наборов данных, а так же бесконечной прокрутки.
Метод исследования
Для исследования применяется метод оригинального (индивидуального) проектирования, когда проектные решения разрабатываются «с нуля» в
соответствии с требованиями к информационной системе.
Теоретическое и практическое значение работы
Работа имеет теоретическое и практическое значение , т.к. разработанный интерфейс приложения может применяться для подачи заявок на
повышенную стипендию и для каких-либо задач связанных с формирование
отчетов по заявкам.
12
Структура работы
Во введении обосновывается актуальность решаемой задачи, ставится
цель и задачи исследования, а также основные направления исследования.
В первой главе проводится постановка задачи на основе анализа процесса подачи заявок на повышенную стипендию.
Вторая глава сосредоточена на описании реализации интерфейса для
подачи заявок на повышенную стипендию.
В третьей главе проводится апробация разработанного программного
обеспечения.
В заключении сделаны выводы по результатам проделанной работы.
Приводится список использованных источников.
В приложении приводится листинг исходного программного обеспечения.
Апробация работы
Промежуточные результаты исследования были опубликованы в материалах конференции и изложены на заседании семинара:
1. Проектирование базы данных для приложения по подаче заявок
на повышенную стипендию // Вестник науки. Сборник научныхработ аспирантов, магистрантов и студентов физико-математического факультета,
г. Орел, Орловский государственный университет им. И. С. Тургенева, 26
декабря 2017 г. С. 28-30.
2. Моделирование и реализация интерфейса приложения для подачи
заявок на повышенную стипендию // семинар «Вычислительные технологии и их приложения» г. Орел, ОГУ им. И. С. Тургенева, на основании
Распоряжения ректора ОГУ от 15.11.2017 № 577р, 28 июня 2018 г.
13
Глава I Постановка задачи
1.1 Описание предметной области
Университет предоставляет возможность студенту, обучающемуся на
бюджете, получать повышенную государственную академическую стипендию за особые достижения в учебной, научно-исследовательской, общественной, культурно-творческой, спортивной деятельности. Для этого необходимо подать заявку, которую проверяет на наличие ошибок или неточностей
стипендиальная комиссия и принимает решение о получении стипендии студентом. Стипендия выдается в течение одного семестра.
Студент может подавать заявки на несколько направлений. Направления делятся на учебную, научно-исследовательскую, общественную,
культурно-творческую и спортивную деятельности. Для каждой деятельности существует ряд критериев, представленные в регламенте [16], которым
нужно соответствовать для получения стипендии.
Для учебной деятельности стипендия назначается при соответствии
одному или нескольким из следующих критериев:
∙ Получение оценок "отлично"за предшествующие 2 семестра;
∙ Получение наград за предшествующие 2 семестра;
∙ Признание студента победителем или призером состязаний, или иных
мероприятий, направленных на выявление учебных достижений студента.
Для научно-исследовательской деятельности стипендия назначается
при соответствии одному или нескольким из следующих критериев:
∙ Получение в течение года, предшествующего назначению стипендии,
наград за результаты научной деятельности, документа удостоверяющего право студента на достигнутый им результат;
14
∙ Наличие у студента публикаций в издании федеральной государственной образовательной организации высшего образования или иной организации в течение года.
Для общественной деятельности стипендия назначается при соответствии одному или нескольким из следующих критериев:
∙ Систематическое участие студента в течение года, предшествующего
назначению стипендии, в проведении общественно значимой деятельности организуемой университетом или с его участием, подтверждаемое документально;
∙ Систематическое участие студента в течение года, предшествующего
назначению стипендии, в деятельности по информационному обеспечению общественно значимых мероприятий, общественной жизни университета или с его участием, подтверждаемое документально.
Для культурно-творческой деятельности стипендия назначается при
соответствии одному или нескольким из следующих критериев:
∙ Получение студентом в течение года, предшествующего назначению
стипендии, награды за результаты культурно-творческой деятельности, проводимой университетом или иной организацией, подтверждаемое документально;
∙ Публичное представление студентом в течение года, предшествующего
назначению стипендии, созданного им произведения литературы или
искусства, подтверждаемое документально;
∙ Систематическое
участие
культурно-творческой
студента,
деятельности
в
проведении
воспитательного,
дистского характера, подтверждаемое документально.
15
публичной,
пропаган-
Для спортивной деятельности стипендия назначается при соответствии одному или нескольким из следующих критериев:
∙ Получение студентом в течение года, предшествующего назначению
стипендии, награды за результаты спортивной деятельности, проводимых университетом или иной организацией;
∙ Систематическое участие студента в течение года, предшествующего
назначению стипендии, в спортивных мероприятиях воспитательного,
пропагандистского характера, подтверждаемое документально.
Подача заявки включает в себя составление портфолио студента и сбор
документов для подтверждения достижений представленных студентом в
его заявке.
Рис. 1: Портфолио студента
16
На Рис. 1 показано как должен выглядеть портфолио студента.
Процесс проверки очень трудоемок и сложен. Также заявки поданные
в бумажном виде необходимо хранить продолжительное время для того чтобы в случае необходимости предоставить их. Это занимает и время и место.
Чтобы избавиться от этого требуется создать Web-приложение, которое поможет упростить процесс. Агрегированные данные можно использовать для
создания отчетов.
1.2 Требования к веб-приложению
Необходимость подачи заявок на повышенную академическую стипендию, привела к созданию списка требований для создаваемого приложения:
∙ Функциональность: веб-приложение должно предоставлять пользователю возможность добавлять, изменять, а также сохранять, загружать
все данные, задействованные при создании отчета;
∙ Простота использования: интерфейс веб-приложения должен быть
простым и интуитивным настолько, насколько это возможно;
∙ Интегрируемость: веб-приложение должно быть с лёгкостью интегрируемо в текущий проект "Научного Отдела Орловского Государственного Университета";
∙ Гибкость: система должна быть спроектирована таким образом, чтобы
добавление нового функционала, внесение изменений и последующее
сопровождение не требовали излишних усилий.
17
Глава II Разработка приложения
2.1 Диаграмма переходов для интерфейса студента
Разработка пользовательского интерфейса начинается с проектирования диаграмм переходов между страницы для того чтобы получить более
удобный и интуитивно понятный пользователю веб интерфейс.
Рис. 2: Диаграмма переходов для интерфейса студента
На Рис. 2 показано какие возможности должны быть у студента. Есть основная страница с которой у студента есть возможность попасть в разделы:
∙ Профиль для редактирования личных данных и аккаунта;
∙ Достижения для просмотра списка достижений их создания, редактирования и удаления;
∙ Заявки на повышенную стипендию для просмотра списка заявок их
создания, редактирования и удаления.
18
2.2
Диаграмма
администратора
переходов
системы
по
для
подаче
интерфейса
заявок
на
повышенную стипендию
Рис. 3: Диаграмма переходов для интерфейса администратора
На Рис. 3 показано какие возможности должны быть у администратора системы отвечающего за проверку заявок на повышенную стипендию. Есть
основная страница с которой у администратора есть возможность попасть
на страницу списка заявок где он может сортировать или искать по нему
также он может перейти в другие разделы:
∙ Проверка заявок на этой странице администратор может просмотреть
заполненную заявку;
∙ Типы деятельности раздел для просмотра списка типов деятельности
их создания, редактирования и удаления;
∙ Типы достижений раздел для просмотра списка типов достижений их
создания, редактирования и удаления;
19
∙ Даты регистрации заявок раздел для просмотра списка дат регистрации заявок их создания, редактирования и удаления.
2.3
Шаблоны
главной
страницы,
регистрации
и
авторизации студента
Шаблон главной страницы студента student/base.html представляет
пользовательский интерфейс на котором расположено меню и ссылки для
навигации по системе.
В блоке head представлен код где прописывается title страницы и подключаются CSS файлы и javascript библиотеки.
1 < !DOCTYPE html>
2 <html lang=" ru ">
3
<head>
4
<meta charset=" u t f −8">
5
{% b l o c k t i t l e %}
6
< t i t l e >Научный о тд ел ОГУ име ни И. С . Тур г е н е в а</ t i t l e >
7
<meta name=" d e s c r i p t i o n " content="Официальный␣ с айт ␣научно г о ␣ о тд е ла ␣
Орло в с ко г о ␣ г о с удар с т в е нно г о␣унив е р с ит е т а ␣име ни␣И. С . ␣Тур г е н е ва ) "
/>
8
<meta name=" keywords " content="Орло в с кий␣ г о с удар с т в е нный␣унив е р с ит е
т ␣имени␣И. С . ␣Тур г е н е в а , ␣ОГУ␣имени␣И.С . ␣Тур г е н е в а , ␣ о буч е ни е , ␣уч е б
а , ␣пр е пода в а т е ль , ␣научный␣ о тд е л , ␣ о бра з о в ани е , ␣наука , ␣инно в ации , ␣
и с с л е дов ания" />
9
10
{% e n d b l o c k %}
< link r e l =" s h o r t c u t ␣ i c o n " href=" / s t a t i c / images / ogu . png" type=" image /png
">
11
12
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / g l y p h i c o n s . c s s ">
13
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / s t y l e . c s s ">
14
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / s e m a n t i c . min . c s s " media="
s c r e e n ">
15
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / b r o w s e r s . c s s ">
16
17
< script src=" / s t a t i c / j s / j q u e r y . min . j s "></ script>
18
< script src=" / s t a t i c / j s / j q u e r y . c o o k i e . j s "></ script>
20
19
< script src=" / s t a t i c / j s / s e m a n t i c . min . j s "></ script>
20
< script src=" / s t a t i c / j s / s c i . j s "></ script>
21
< script src=" / s t a t i c / j s /name . j s "></ script>
22
< script src=" / s t a t i c / j s / d e t e c t . j s "></ script>
23
{% b l o c k h e a d _ i n c l u d e s %}
24
{% e n d b l o c k %}
25
26
{% i f j s %}
27
< script type=" t e x t / j a v a s c r i p t " charset=" u t f −8">
28
window . django = {{ j s | s a f e } } ;
29
</ script>
30
{% e n d i f %}
31
</ head>
Листинг 1. Блок head в шаблоне base.html
В блоке script представлен javascrpt код, который проверяет версию
браузера для правильного отображения контента.
1
2
< script>
$ ( document ) . ready ( f u n c t i o n ( ) {
3
var u s e r = d e t e c t . p a r s e ( n a v i g a t o r . userAgent ) ;
4
c o n s o l e . l o g ( ’ * ’+ u s e r . b r o w s e r . f a m i l y +’ * ’+ u s e r . b r o w s e r .
version ) ;
5
6
switch ( user . browser . family ) {
c a s e ’ Chrome ’ :
7
i f ( user . browser . v e r s i o n < 36) {
8
show_message ( ) ;
9
};
10
break ;
11
case ’ Firefox ’ :
12
i f ( user . browser . v e r s i o n < 31) {
13
show_message ( ) ;
14
};
15
break ;
16
c a s e ’ Chromium ’ :
17
i f ( user . browser . v e r s i o n < 36) {
18
show_message ( ) ;
19
};
20
break ;
21
default :
21
22
window . l o c a t i o n . r e p l a c e ( " / s t a t i c / i e −o l d
. html " ) ;
23
break ;
24
25
26
}
}) ;
</ script>
Листинг 2. Блок script в шаблоне base.html
Меню сделано списком с использованием тега <div> в качестве элементов списка и тега <a> в качестве ссылки.
1
2
3
<div id=" wrapper ">
<div c l a s s=" u i ␣ top ␣ a t t a c h e d ␣ segment ␣no−padding ">
<div c l a s s=" u i ␣ t i e r e d ␣menu">
4
5
6
<a c l a s s=" {{ ␣ template_main ␣ }} ␣ item " href=" / s t u d e n t ">
< i c l a s s=" g l y p h i c o n s ␣home"></ i> Гла вная
7
</ a>
8
<a c l a s s=" {{ ␣ t e m p l a t e _ p r o f i l e ␣ }} ␣ item " href=" / s t u d e n t /
p r o f i l e " id=" item − p r o f i l e ">
9
< i c l a s s=" g l y p h i c o n s ␣ p a r e n t s "></ i> Профиль
10
</ a>
11
<a c l a s s=" {{ ␣ template_achievements ␣ }} ␣ item " href=" /
s t u d e n t s h i p / a c h i e v e m e n t s " id=" item −a c h i e v e m e n t s ">
12
< i c l a s s=" g l y p h i c o n s ␣ s t a r "></ i> До с тиже ния
13
</ a>
14
<a c l a s s=" {{ ␣ t e m p l a t e _ s t u d e n t s h i p ␣ }} ␣ item " href=" /
s t u d e n t s h i p / a p p l i c a t i o n s " id=" item − p r o f i l e ">
15
16
< i c l a s s=" g l y p h i c o n s ␣ upload "></ i> По выше нная с тип е ндия
</ a>
17
18
19
{% i f not u s e r . username %}
<a c l a s s=" r i g h t − a l i g n e d ␣ item " href="{%␣ u r l ␣ ’
student_auth_login ’ ␣%}">
20
< i c l a s s=" g l y p h i c o n s ␣ l o g _ i n "></ i>
21
Вход
22
23
24
</ a>
{% e l s e %}
<a c l a s s=" r i g h t − a l i g n e d ␣ item " href="{%␣ u r l ␣ ’
student_auth_logout ’ ␣%}">
22
25
< i c l a s s=" g l y p h i c o n s ␣ e x i t "></ i>
26
Выход
27
</ a>
28
<span c l a s s=" r i g h t − a l i g n e d ␣ item ">
29
{{ u s e r . username }}
30
</ span>
31
{% e n d i f %}
32
<div c l a s s=" u i ␣ sub ␣menu␣ p r o f i l e −menu">
33
<a href="{%␣ u r l ␣ ’ p r o f i l e _ u s e r _ v i e w ’ ␣%}" c l a s s=" {{
34
user_item }} ␣ item ">< i c l a s s=" g l y p h i c o n s ␣ u s e r "></ i> Ак
каунт</ a>
</ div>
35
</ div>
36
37
</ div>
Листинг 3. Блок меню в шаблоне base.html
В блок section подключаются другие страницы используя данный шаблон в качестве основы.
1
<s e c t i o n c l a s s=" u i ␣main␣ p i l e d ␣ segment ">
2
<h e a d e r>
3
{% b l o c k c o n t e n t _ t i t l e %}{% e n d b l o c k %}
4
</ h e a d e r>
5
{% i f not anonymous %}
6
{% b l o c k c o n t e n t %}{% e n d b l o c k %}
7
{% e l s e %}
8
<p>
9
Пожалуй с т а , в ойдит е в с и с т ему
<a href="{%␣ u r l ␣ ’ student_auth_login ’ ␣%}">вход</ a> .
10
11
</ p>
12
{% e n d i f %}
13
</ s e c t i o n>
14
15
</ div>
16
17
18
<f o o t e r>
<div c l a s s=" c o p y r i g h t ">&copy ;& nbsp ;Кафе дра информа тики Орло в с ко г о г
о с удар с т в е нно г о унив ер с ит е т а име ни И. С.& nbsp ; Тур г е н е в а</ div>
19
</ f o o t e r>
23
Листинг 4. Блок section в шаблоне base.html
Шаблон
form.html
регистрации
студента
student_auth/regstration_-
предоставляет форму сделанную тегом <form> и заполненную
тегами <input> для введения данных и кнопкой для отправки данных на
сервер.
В Листинге 5 представлен реализация полей необходимых для авторизации в системе.
1
<form method=" p o s t " action=" " c l a s s=" u i ␣ form ">
2
{% c s r f _ t o k e n %}
3
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
4
< label>Имя поль з о в а т е ля :</ label>
5
{{ form . username }}
6
{% i f form . username . e r r o r s %}
7
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
8
9
10
Вв е дит е имя поль з о в а т е ля .
</ div>
{% e n d i f %}
11
</ div>
12
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
13
< label>Почт а :</ label>
14
{{ form . e m a i l }}
15
{% i f form . e m a i l . e r r o r s %}
16
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
17
Укажит е э л е ктронную почту .
18
</ div>
19
{% e n d i f %}
20
</ div>
21
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
22
< label>Пароль :</ label>
23
{{ form . password1 }}
24
{% i f form . password1 . e r r o r s %}
25
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
26
Укажит е пароль .
27
</ div>
28
{% e n d i f %}
29
</ div>
24
30
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
31
< label>Пароль ( еще ра з ) :</ label>
32
{{ form . password2 }}
33
{% i f form . password2 . e r r o r s %}
34
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
35
На б е рит е пароль по в т орно .
36
</ div>
37
{% e n d i f %}
38
</ div>
Листинг 5. Код полей для авторизации шаблона registration_form.html
В данном листинге показан код полей для ввода персональных данных.
1
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
2
< label>Имя :</ label>
3
{{ form . f i r s t _ n a m e }}
4
{% i f form . f i r s t _ n a m e . e r r o r s %}
5
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
6
Укажит е Ваше имя .
7
</ div>
8
{% e n d i f %}
9
</ div>
10
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
11
< label>Отч е с т в о :</ label>
12
{{ form . middle_name }}
13
{% i f form . middle_name . e r r o r s %}
14
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
15
Укажит е Ваше о тч е с т в о .
16
</ div>
17
{% e n d i f %}
18
</ div>
19
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
20
< label>Фамилия :</ label>
21
{{ form . last_name }}
22
{% i f form . last_name . e r r o r s %}
23
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
24
Укажит е Вашу фамилию.
25
</ div>
26
{% e n d i f %}
27
</ div>
25
Листинг 6. Код полей персональных данных шаблона
registration_form.html
Шаблон авторизации студента
student_auth/login.html.
Здесь представлен код, который проверяет авторизирован пользователь или нет и выводит соответствующее сообщение.
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2
3 {% b l o c k c o n t e n t _ t i t l e %}
4
<h2 c l a s s=" u i ␣ c e n t e r ␣ a l i g n e d ␣ b l a c k ␣ h e a d e r ">Вход для с туд е нт о в</ h2>
5 {% e n d b l o c k %}
6
7 {% b l o c k c o n t e n t %}
8
9 {% i f u s e r . i s _ a u t h e n t i c a t e d %}
10
11
<div>
<b c l a s s=" h e a d e r ">Уважа емый ( ая ) <span c l a s s=" f i r s t −name">{{ u s e r . s t u d e n t .
f i r s t _ n a m e }}</ span> {{ u s e r . s t u d e n t . last_name }}</ b> , вы же уже а в т ори з о в а
ны .</ h2>
12
</ div>
13
<br />
14
<a href="{%␣ u r l ␣ ’ student_auth_logout ’ ␣%}" c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l
␣ n e g a t i v e ">< i c l a s s=" s i g n ␣ out ␣ i c o n "></ i>Выйти</ a>
15 {% e l s e %}
16
17
18
19
20
{% i f form . n o n _ f i e l d _ e r r o r s %}
<div c l a s s=" u i ␣ compact ␣ middle ␣ e r r o r ␣ message ">
{{ form . n o n _ f i e l d _ e r r o r s }}
</ div>
{% e n d i f %}
Листинг 7. Шаблон login.html
Код предоставляет форму сделанную тегом <form> и заполненную
тегами <input> для ввода логина и пароля и кнопкой для отправки данных
на сервер.
1
2
<div c l a s s=" middle −wrapper ">
<form method=" p o s t " action=" " c l a s s=" u i ␣ form ">
26
3
{% c s r f _ t o k e n %}
4
<div c l a s s=" f i e l d ">
5
< label>Имя поль з о в а т еля</ label>
6
<div c l a s s=" u i ␣ l e f t ␣ l a b e l e d ␣ i c o n ␣ i n p u t ">
7
<input id=" id_username " type=" t e x t " name=" username ">
8
< i c l a s s=" u s e r ␣ i c o n "></ i>
9
10
</ div>
{% i f f i e l d . username . e r r o r s %}
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ u i ␣ l a b e l ">
11
12
{{ f i e l d . username . e r r o r s }}
</ div>
13
14
{% e n d i f %}
15
</ div>
16
<div c l a s s=" f i e l d ">
17
< label>Пароль</ label>
18
<div c l a s s=" u i ␣ l e f t ␣ l a b e l e d ␣ i c o n ␣ i n p u t ">
19
<input id=" id_password " type=" password " name=" password ">
20
< i c l a s s=" l o c k ␣ i c o n "></ i>
21
</ div>
22
{% i f f i e l d . password . e r r o r s %}
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ u i ␣ l a b e l ">
23
24
{{ f i e l d . password . e r r o r s }}
</ div>
25
26
27
{% e n d i f %}
</ div>
28
29
<button type=" submit " value="ВХОД" c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣
p o s i t i v e ␣ btn − l o g i n ">< i c l a s s=" s i g n ␣ i n ␣ i c o n "></ i> ВХОД</ button>
30
<a href="{%␣ u r l ␣ ’ s t u d e n t _ r e g i s t r a t i o n _ r e g i s t e r ’ ␣%}" c l a s s=" u i ␣ l a b e l e d ␣
i c o n ␣ button ␣ s m a l l ␣ i n s t a g r a m ␣ btn − r e g i s t e r ">
31
< i c l a s s=" e d i t ␣ i c o n "></ i> РЕГИСТРАЦИЯ
32
</ a>
33
<div c l a s s=" c l e a r "></ div>
34
</ form>
35
<br />
36
<a href="{%␣ u r l ␣ ’ f o r g o t −password ’ ␣%}">За были пароль или ло г ин?</ a>
37
</ div>
Листинг 8. Код формы авторизации login.html
27
2.4
Шаблоны
для
подачи
заявок
и
добавления
достижений студента
Шаблон списка достижений
studentship/achievement_list.html.
Для упрощения в самом начале подключается основной шаблон
(base.html) и при помощи шаблонизатора позволяет не повторять код. Также здесь используется вставка при помощи тега <script> javascript кода, для
того чтобы вызвать модальное окно при удалении элемента таблицы.
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2
3 {% b l o c k c o n t e n t %}
4 < script type=" t e x t / j a v a s c r i p t ">
5
$( function () {
6
$ ( ’ . show−modal ’ ) . c l i c k ( f u n c t i o n ( ) {
7
$ ( ’ . t i n y . modal ’ ) . modal ( ’ show ’ ) ;
8
var achievement_id = $ ( t h i s ) . a t t r ( "name" ) ;
9
$ ( ’# achievement − d e l e t e ’ ) . a t t r ( ’ a c t i o n ’ , ’ d e l e t e / ’ + achievement_id ) ;
10
}) ;
11
$ ( ’ . approve ’ ) . c l i c k ( f u n c t i o n ( ) {
12
13
14
$ ( ’# achievement − d e l e t e ’ ) . submit ( ) ;
}) ;
}) ;
15 </ script>
16 {% i f not o b j e c t _ l i s t %}
17 <div c l a s s=" u i ␣ i c o n ␣ i n f o ␣ message ">
18
< i c l a s s=" i n f o ␣ i c o n "></ i>
19
<div c l a s s=" c o n t e n t ">
20
21
<div c l a s s=" h e a d e r "> Вы н е до б а вили ни одной з апи с и . </ div>
</ div>
22 </ div>
23 <p c l a s s=" nt −b l u e ">Щë лкнит е кнопку &l a q u o ;До б авит ь&raquo ; для до ба вл е ния но в о г о
до с тижения .</ p>
24 <br />
25 {% e l s e %}
26
27 <h2 c l a s s=" u i ␣ h e a d e r ">До с тиже ния :</ h2>
28
29 <div c l a s s=" u i ␣ t i n y ␣ modal ">
28
30
<div c l a s s=" h e a d e r ">Со о бще ни е</ div>
31
<div c l a s s=" c o n t e n t ">
32
<p>Вы ув е р е ны чт о хо тит е удалит ь э ту з апи с ь ?</ p>
33
</ div>
34
<div c l a s s=" a c t i o n s ">
35
<form id=" achievement − d e l e t e " action=" " method=" p o s t ">{% c s r f _ t o k e n %}
36
<div c l a s s=" u i ␣ approve ␣ button ">Да</ div>
37
<div c l a s s=" u i ␣ c a n c e l ␣ button ">Не т</ div>
38
39
</ form>
</ div>
40 </ div>
41 {% e n d i f %}
Листинг 9. Код удаления достижения шаблона achievement_list.html
На данном шаблоне выводится при помощи таблицы(тег table) список
достижений, при помощи тега <div> используя css классы semantic ui под
названием segments в который добавлены кнопки для удаления и редактирования.
1
2
<a href="{%␣ u r l ␣ " achievement_new "␣%}">
<div c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e ␣ c r e a t e _ b u t t o n ">
3
< i c l a s s="add␣ i c o n "></ i>
4
До б а вит ь
5
6
</ div>
</ a>
7 <div c l a s s=" u i ␣ d i v i d e r "></ div>
8 <div c l a s s=" u i ␣ d i v i d e d ␣ segments ">
9
10
11
12
{% f o r achievement i n o b j e c t _ l i s t %}
<div c l a s s=" u i ␣ segment ">
<div c l a s s=" item ">
<div c l a s s=" c o n t e n t ">
13
<a c l a s s=" h e a d e r ">{{ achievement . name }}</ a>
14
<div c l a s s="meta">{{ achievement . achievement_type . name}}</ div>
15
<div c l a s s=" d e s c r i p t i o n ">{{ achievement . d e s c i p t i o n }}</ div>
16
17
</ div>
18
<div c l a s s=" u i ␣ c l e a r i n g ␣ d i v i d e r "></ div>
19
<a href="#">
20
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ r e d ␣ u i ␣ button ␣show−modal " name=" {{
29
achievement . i d }} ">Удалит ь</ div>
</ a>
21
22
<a href=" update /{{ achievement . i d }} ">
23
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ b l u e ␣ u i ␣ button ">Ре дактиро в а т ь</ div>
24
</ a>
25
26
27
<a href="show /{{ achievement . i d }} ">
28
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ t e a l ␣ u i ␣ button ">Про смо тр</ div>
29
30
</ a>
31
<div c l a s s=" e x t r a ">
32
Да т а получ е ния : {{ achievement . obtain_date | d a t e : "d/m/Y" }}
</ div>
33
</ div>
34
35
</ div>
36
{% e n d f o r %}
37 </ div>
38 {% i f page_obj . p a g i n a t o r . num_pages > 1 %}
39 {% i n c l u d e " s t u d e n t s h i p / p a g i n a t o r . html " with page_obj=page_obj o n l y %}
40 {% e n d i f %}
41 {% e n d b l o c k %}
Листинг 10. Код таблицы для вывода данных шаблона
achievement_list.html
Для создания и редактирования достижения используется шаблон
studentship/achievement_form.html.
Для того чтобы выбрать тип достижения определенного вида деятельности был написан javascript код в котором применяются две функции первая
populateActivityType
выводит с помощью тега select виды деятель-
ности.
1
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . change ( f u n c t i o n ( ) { populateAchievementType ( t h i s ) } ) ;
2
a c t i v i t y _ t y p e s = {{ form . a c t i v i t y _ t y p e s | s a f e } } ;
3
populateActivityType () ;
4
$ ( "#id_achievement_type " ) . empty ( ) ;
5
$ ( "#id_achievement_type " ) . append ( ’<option value=" " disabled selected>Выб е ри
т е вид д е ят е льно с ти</ option> ’ ) ;
30
6
function populateActivityType () {
7
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . empty ( ) ;
8
$ ( "#i d _ a c t i v i t y _ t y p e " ) . append ( ’<option value=" " disabled selected>Выб е р
ит е вид д е ят е льно с ти</ option> ’ ) ;
9
$ . each ( a c t i v i t y _ t y p e s , f u n c t i o n ( index , a c t i v i t y _ t y p e ) {
10
$ ( ’# i d _ a c t i v i t y _ t y p e ’ )
11
. append ( $ ( "<o p t i o n ></o p t i o n >" )
12
. attr ( " value " , activity_type . id )
13
. t e x t ( a c t i v i t y _ t y p e . name ) ) ;
14
15
}) ;
}
Листинг 11. Код функции populateActivityType шаблона
achievement_form.html
Функция
populateAchievementType
в зависимости от выбранного
элемента в первой функции выводит список соответствующих типов достижений.
1
f u n c t i o n populateAchievementType ( e v e n t ) {
2
s e l e c t e d _ a c t i v i t y _ t y p e = $ ( "#i d _ a c t i v i t y _ t y p e ␣ o p t i o n : s e l e c t e d " ) . t e x t ( ) ;
3
$ ( "#id_achievement_type " ) . empty ( ) ;
4
$ ( "#id_achievement_type " ) . append ( ’<option value=" " disabled selected>Вы
б е рит е тип до с тиже ния</ option> ’ ) ;
5
for ( l e t activity_type of activity_types ) {
6
i f ( a c t i v i t y _ t y p e . name == s e l e c t e d _ a c t i v i t y _ t y p e ) {
7
f o r ( achievement_type o f a c t i v i t y _ t y p e . achievement_types ) {
8
$ ( ’# id_achievement_type ’ )
9
. append ( $ ( "<o p t i o n ></o p t i o n >" )
10
. a t t r ( " v a l u e " , achievement_type . i d )
11
. t e x t ( achievement_type . name )
12
);
13
}
14
}
15
16
}
}
Листинг 12. Код функции populateAchievementType шаблона
achievement_form.html
31
В этом шаблоне также в начале подключается основной шаблон
(base.html). Затем тегом <form> и заполненными тегами <input> и кнопкой
для отправки данных на сервер.
1 <form action=" " method=" p o s t " e n c t y p e=" m u l t i p a r t / form −data ">
2
{% c s r f _ t o k e n %}
3
<dl>
4
5
<div c l a s s=" f i e l d W r a p p e r ">
{% i f form . a c t i v i t y _ t y p e . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
6
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
7
лн е ния !
8
</ p>
9
{% e n d i f %}
10
<dt>< label for=" i d _ a c t i v i t y _ t y p e ">Вид д е ят е льно с ти :</ label></ dt>
11
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . a c t i v i t y _ t y p e }}</ div></dd>
12
</ div>
13
<div c l a s s=" f i e l d W r a p p e r ">
14
{% i f form . achievement_type . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
15
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
16
лн е ния !
17
</ p>
18
{% e n d i f %}
19
<dt>< label for=" id_achievement_type ">Тип до с тиже ния :</ label></ dt>
20
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . achievement_type }}</ div></dd
>
21
</ div>
22
<div c l a s s=" f i e l d W r a p p e r ">
23
{% i f form . obtain_date . e r r o r s %}
24
<p c l a s s=" nt −red −i n d e n t ">
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
25
лн е ния !
26
</ p>
27
{% e n d i f %}
28
<dt>< label for=" id_obtain_date ">Да т а получ е ния :</ label></ dt>
29
<dd><input data− t o g g l e=" d a t e p i c k e r " type=" t e x t " name=" obtain_date "
value=" {{ form . obtain_date . v a l u e | d a t e : "Y−m−d" | d e f a u l t _ i f _ n o n e : " "
}} "></dd>
30
</ div>
32
<div c l a s s=" f i e l d W r a p p e r ">
31
32
{% i f form . s c a n . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
33
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
34
лн е ния !
35
</ p>
36
{% e n d i f %}
37
<dt>< label for=" id_scan ">Подт в е рждающий Докуме нт :</ label></ dt>
38
<a href=" ␣ {{ ␣ uploaded_scan . f i l e n a m e . u r l ␣ }} ␣ ">{{ uploaded_scan .
f i l e n a m e }}</ a>
39
<dd>{{ form . s c a n }}</dd>
40
{{ form . s c a n . r e a d }}
41
</ div>
42
<br>
43
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
44
</ button>
45
46
</ dl>
47 </ form>
Листинг 13. Код формы шаблона achievement_form.html
Шаблон
списка
заявок
на
повышенную
стипендию
studentship/application_list.html.
В Листинге 14 представлен javascript позволяющий придать нужный
формат дате, а также показать модальное окно для удаления и отправки
формы на сервер для удаления элемента списка.
1 {% b l o c k c o n t e n t %}
2
< script src=" / s t a t i c / j s / r i b b o n g r a p h /moment . j s "></ script>
3
< script type=" t e x t / j a v a s c r i p t ">
4
$( function () {
5
moment . l o c a l e ( ’ ru ’ ) ;
6
var beginDate = moment ( $ ( ’ . begin −date ’ ) . t e x t ( ) ) ,
7
endDate = moment ( $ ( ’ . end−date ’ ) . t e x t ( ) ) ,
8
w a i t i n g D a t e = $ ( ’ . w a i t i n g −date ’ ) . t e x t ( ) ;
9
$ ( ’ . begin −date ’ ) . t e x t ( moment ( beginDate , "DD−MM−YYYY" ) . format ( "LL" ) ) ;
10
$ ( ’ . end−date ’ ) . t e x t ( moment ( endDate , "DD−MM−YYYY" ) . format ( "LL" ) ) ;
11
$ ( ’ . w a i t i n g −date ’ ) . t e x t ( moment . d u r a t i o n ( p a r s e I n t ( w a i t i n g D a t e ) , ’ days ’ ) .
33
humanize ( ) ) ;
12
$ ( ’ . show−modal ’ ) . c l i c k ( f u n c t i o n ( ) {
13
$ ( ’ . t i n y . modal ’ ) . modal ( ’ show ’ ) ;
14
var a p p l i c a t i o n _ i d = $ ( t h i s ) . a t t r ( "name" ) ;
15
$ ( ’# a p p l i c a t i o n − d e l e t e ’ ) . a t t r ( ’ a c t i o n ’ , ’ d e l e t e / ’ + a p p l i c a t i o n _ i d ) ;
16
}) ;
17
$ ( ’ . approve ’ ) . c l i c k ( f u n c t i o n ( ) {
18
$ ( ’# a p p l i c a t i o n − d e l e t e ’ ) . submit ( ) ;
19
20
}) ;
}) ;
21
</ script>
22
< style type=" t e x t / c s s ">
23
#green − l a b e l {
24
background − c o l o r : #4fbb45 ! i m p o r t a n t ;
25
}
26
#red − l a b e l {
27
background − c o l o r : #db2828 ! i m p o r t a n t ;
28
}
29
#y e l l o w − l a b e l {
30
background − c o l o r : #f6bd1d ! i m p o r t a n t
31
}
32
. l a b e l −s i z e {
33
padding : . 5 8 3 3em . 8 3 3em ! i m p o r t a n t ;
34
l i n e −h e i g h t : 1 ! i m p o r t a n t ;
35
}
36
. send_form {
37
38
39
d i s p l a y : i n l i n e −b l o c k ;
}
</ style>
Листинг 14. Код шаблона application_list.html
Здесь представлен код, который принимает данные с сервера и в зависимости от условий показывать сообщение.
1 {% i f e v e n t _ f l a g == 0 %}
2
3
4
<div c l a s s=" u i ␣ r e d ␣ i n v e r t e d ␣ segment " id=" red − l a b e l ">
<b>На данный моме нт р е г и с трация з аяв ок на по выше нную с тип е ндию з акрыт а</ b>
</ div>
5 {% e l i f e v e n t _ f l a g == 1 %}
6
<div c l a s s=" u i ␣ g r e e n ␣ i n v e r t e d ␣ segment " id=" green − l a b e l ">
34
7
8
<b>
Ре г и с трация з аяв ок о ткрыт а с <span c l a s s=" begin −d a t e ">{{ e v e n t _ o b j e c t .
begin_date | d a t e : "Y−m−d" }}</ span> и з а в е ршит с я <span c l a s s="end−d a t e ">
{{ e v e n t _ o b j e c t . end_date | d a t e : "Y−m−d" }}</ span>
9
</ b>
10
</ div>
11 {% e l i f e v e n t _ f l a g == 2 %}
12
13
<div c l a s s=" u i ␣ y e l l o w ␣ i n v e r t e d ␣ segment " id=" y e l l o w − l a b e l ">
<b>Ре г и с трация з а в ок на по выше нную с тип е ндию буд е т о ткрыт а ч е р е з <span
c l a s s=" w a i t i n g −d a t e ">{{ e v e n t _ o b j e c t }}</ span></b>
14
</ div>
15 {% e n d i f %}
16 {% i f not o b j e c t _ l i s t %}
17 <div c l a s s=" u i ␣ i c o n ␣ i n f o ␣ message ">
18
< i c l a s s=" i n f o ␣ i c o n "></ i>
19
<div c l a s s=" c o n t e n t ">
20
21
<div c l a s s=" h e a d e r "> Вы н е до б а вили ни одной з апи с и . </ div>
</ div>
22 </ div>
23 <p c l a s s=" nt −b l u e ">Щë лкнит е кнопку &l a q u o ;До б авит ь&raquo ; для до ба вл е ния но в о г о
до с тижения .</ p>
24 <br />
Листинг 15. Код показывающий информацию о начале приема заявок
шаблона application_list.html
На Листинге 16 выводится при помощи таблицы список заявок при
помощи тега <table> в который добавлены кнопки для удаления и редактирования.
1
2
3
<table c l a s s=" u i ␣ c e l l e d ␣ t a b l e ">
<thead>
< tr>
4
<th>Тип</ th>
5
<th>Да т а з аявки</ th>
6
<th>Ст ату с</ th>
7
<th>Feedback</ th>
8
<th>Де й с т ви е</ th>
9
</ tr>
10
</ thead>
11
<tbody>
35
12
13
{% f o r a p p l i c a t i o n i n o b j e c t _ l i s t %}
< tr>
14
<td>{{ a p p l i c a t i o n . a c t i v i t y _ t y p e . name }}</ td>
15
<td>{{ a p p l i c a t i o n . e v e n t . y e a r }}</ td>
16
<td>
17
18
{% i f a p p l i c a t i o n . s t a t u s == " approve " %}
<div c l a s s=" u i ␣ g r e e n ␣ l a b e l ␣ l a b e l − s i z e " id=" green − l a b e l ">Принят о</
div>
19
20
{% e l i f a p p l i c a t i o n . s t a t u s == " r e j e c t e d " %}
<div c l a s s=" u i ␣ r e d ␣ l a b e l ␣ l a b e l − s i z e " id=" red − l a b e l ">Отклон е но</
div>
21
22
{% e l i f a p p l i c a t i o n . s t a t u s == " w a i t i n g " %}
<div c l a s s=" u i ␣ o r a n g e ␣ l a b e l ␣ l a b e l − s i z e " id=" y e l l o w − l a b e l ">Ожидани
е про в е рки</ div>
23
24
25
{% e l i f a p p l i c a t i o n . s t a t u s == " none_status " %}
<div c l a s s=" u i ␣ y e l l o w ␣ l a b e l ␣ l a b e l − s i z e ">Не о т с л ежив а е т с я</ div>
{% e n d i f %}
26
</ td>
27
<td>{{ a p p l i c a t i o n . f e e d b a c k }}</ td>
28
<td>
29
30
31
{% i f a p p l i c a t i o n . s t a t u s != " approve "%}
{% i f a p p l i c a t i o n . s t a t u s != " w a i t i n g "%}
<a c l a s s=" u i ␣ b l u e ␣ mini ␣ button " href=" update /{{ a p p l i c a t i o n . i d }} "
>Ре дактиро в а т ь</ a>
32
<a c l a s s=" u i ␣ r e d ␣ mini ␣ button ␣show−modal " href="#" name=" {{
a p p l i c a t i o n . i d }} ">Удалит ь</ a>
33
{% e n d i f %}
34
{% e n d i f %}
35
{% i f e v e n t _ f l a g == 1 %}
36
37
{% i f a p p l i c a t i o n . s e n d _ s t a t u s == 0 %}
<form c l a s s=" send_form " action=" send / " method=" p o s t ">{%
c s r f _ t o k e n %}
38
<input name=" event_id " type=" hidden " value=" {{ e v e n t _ o b j e c t . i d
}} ">
39
<input name=" a p p l i c a t i o n _ i d " type=" hidden " value=" {{
a p p l i c a t i o n . i d }} ">
40
<button c l a s s=" u i ␣ g r e e n ␣ mini ␣ button " type=" submit ">Отпра вит ь<
/ button>
41
</ form>
42
{% e n d i f %}
36
43
{% e n d i f %}
</ td>
44
45
</ tr>
46
{% e n d f o r %}
47
48
</ tbody>
</ table>
Листинг 16. Код таблицы шаблона application_list.html
Для создания и редактирования заявок на повышенную стипендию
используется шаблон
studentship/application_form.html.
Для того чтобы выбрать достижения определенного вида деятельности был написан javascript код в котором применяются две функции первая
populateActivityType
выводит с помощью тега select виды деятельности.
1 < script type=" t e x t / j a v a s c r i p t ">
2
$( function () {
3
$ ( ’# id_achievements ’ ) . s e l e c t 2 ( { p l a c e h o l d e r : "Выб е рит е ␣ вид␣д е ят е льно с ти" } ) ;
4
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . change ( f u n c t i o n ( ) { populateAchievementType ( t h i s ) } ) ;
5
a c t i v i t y _ t y p e s = {{ form . a c t i v i t y _ t y p e s | s a f e } } ;
6
populateActivityType () ;
7
$ ( "#id_achievements " ) . empty ( ) ;
8
// $ ( "#id_achievements " ) . append ( ’<option value=" " disabled selected>Выб е рит
е вид д е ят е льно с ти</ option> ’ ) ;
9
function populateActivityType () {
10
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . empty ( ) ;
11
$ ( "#i d _ a c t i v i t y _ t y p e " ) . append ( ’<option value=" " disabled selected>Выб е р
ит е вид д е ят е льно с ти</ option> ’ ) ;
12
$ . each ( a c t i v i t y _ t y p e s , f u n c t i o n ( index , a c t i v i t y _ t y p e ) {
13
$ ( ’# i d _ a c t i v i t y _ t y p e ’ )
14
. append ( $ ( "<o p t i o n ></o p t i o n >" )
15
. attr ( " value " , activity_type . id )
16
. t e x t ( a c t i v i t y _ t y p e . name ) ) ;
17
18
}) ;
}
Листинг 17. Функция populateActivityType
А функция populateAchievementType в зависимости от выбранного
элемента в первой функции выводит список соответствующих достижений.
37
Для того чтобы можно было выбирать несколько достижений используется
javascript библиотека select2 позволяющая делать поиск по элементам тега
select.
1
f u n c t i o n populateAchievementType ( e v e n t ) {
2
s e l e c t e d _ a c t i v i t y _ t y p e = $ ( "#i d _ a c t i v i t y _ t y p e ␣ o p t i o n : s e l e c t e d " ) . t e x t ( ) ;
3
$ ( "#id_achievements " ) . empty ( ) ;
4
// $ ( "#id_achievements " ) . append ( ’<option value=" " disabled selected>Выб
е рит е тип до с тиже ния</ option> ’ ) ;
5
for ( l e t activity_type of activity_types ) {
6
i f ( a c t i v i t y _ t y p e . name == s e l e c t e d _ a c t i v i t y _ t y p e ) {
7
f o r ( achievement o f a c t i v i t y _ t y p e . a c h i e v e m e n t s ) {
8
$ ( ’# id_achievements ’ )
9
. append (
10
$ ( "<o p t i o n ></o p t i o n >" )
11
. a t t r ( " v a l u e " , achievement . i d )
12
. t e x t ( achievement . name )
13
);
14
}
15
}
16
$ ( ’# id_achievements ’ ) . s e l e c t 2 ( { p l a c e h o l d e r : "Выб е рит е ␣ тип␣до с тиже ни
я" } ) ;
17
18
}
}
19
20
21
22
$ ( " span . s e l e c t 2 −dropdown . s e l e c t 2 −dropdown−−below " ) . c s s ( {
’ width ’ : ( $ ( " span . s e l e c t 2 − s e l e c t i o n . s e l e c t 2 − s e l e c t i o n −− m u l t i p l e " ) . width ( ) +
’ px ’ )
23
}) ;
Листинг 18. Функция populateAchievementType
На шаблоне находится тег <form> с заполненными тегами <input> и
кнопкой для отправки данных на сервер.
1 <form action=" " method=" p o s t ">{% c s r f _ t o k e n %}
2
3
4
5
<dl>
<div c l a s s=" f i e l d W r a p p e r ">
{% i f form . a c t i v i t y _ t y p e . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
38
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
6
лн е ния !
7
</ p>
8
{% e n d i f %}
9
<dt>< label for=" i d _ a c t i v i t y _ t y p e ">Тип д е ят е льно с ти :</ label></ dt>
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . a c t i v i t y _ t y p e }}</ div></dd>
10
11
</ div>
12
<div c l a s s=" f i e l d W r a p p e r ">
13
{% i f form . a c h i e v e m e n t s . e r r o r s %}
14
<p c l a s s=" nt −red −i n d e n t ">
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
15
лн е ния !
16
</ p>
17
{% e n d i f %}
18
<dt>< label for=" id_achievements ">До с тиже ния :</ label></ dt>
19
<dd>{{ form . a c h i e v e m e n t s }}</dd>
20
</ div>
21
<br>
22
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
23
</ button>
24
</ dl>
25
26 </ form>
Листинг 19. Код формы шаблона application_form.html
2.5 Шаблоны для проверки заявок администратором
Шаблон списка заявок на повышенную стипендию для администратора
studentship/employee/index.html.
В Листинге 20 представлен код для создания удобного функционала
таблицы при помощи js библиотеки DataTables. Эта библиотека добавляет сортировку, поиск по всем строкам и столбцам, пагинация. Также здесь
создаются ссылки для перехода по вспомогательному меню.
1
2
$( function () {
$ ( ’# example ’ ) . DataTable ( {
39
3
lengthChange : f a l s e ,
4
pageLength : 1 5 ,
5
language : {
6
u r l : "/ s t a t i c / j s / studentship / i18n / d a t a t a l b e s . language . json "
7
},
8
initComplete : function () {
9
t h i s . a p i ( ) . columns ( ) . e v e r y ( f u n c t i o n ( ) {
10
var column = t h i s ;
11
var s e l e c t = $ ( ’<div c l a s s=" b lock − s e l e c t ">< s e l e c t><option value
=" "></ option></ s e l e c t></ div> ’ )
12
. appendTo ( $ ( column . f o o t e r ( ) ) . empty ( ) )
13
. on ( ’ change ’ , f u n c t i o n ( ) {
14
var v a l = $ . f n . dataTable . u t i l . escapeRegex (
15
$( this ) . val ()
16
);
17
18
column
19
. s e a r c h ( v a l ? ’^ ’+ v a l +’$ ’ :
20
. draw ( ) ;
21
’ ’ , true , f a l s e )
} );
22
23
column . data ( ) . unique ( ) . s o r t ( ) . each ( f u n c t i o n ( d , j ) {
s e l e c t . append ( ’<option value=" ’+d+’">’+d+’</ option> ’ )
24
25
} );
26
$ ( ’ . u i . dropdown ’ ) . dropdown ( ) ;
27
} );
28
}
29
}) ;
30
$ ( " . event " ) . c l i c k ( function ( ) {
31
window . l o c a t i o n . h r e f = ’{%
url " events_list "
32
}) ;
33
$ ( " . a c t i v i t y −type " ) . c l i c k ( f u n c t i o n ( ) {
34
window . l o c a t i o n . h r e f = ’{%
url " activity_types_list "
35
}) ;
36
$ ( " . achievement −type " ) . c l i c k ( f u n c t i o n ( ) {
37
window . l o c a t i o n . h r e f = ’{%
38
}) ;
39
$ ( ’ . u i . dropdown ’ ) . dropdown ( ) ;
40
%} ’;
%} ’;
url " achievement_types_list "
}) ;
40
%} ’;
Листинг 20. Код для настройки таблицы
В Листинге 21 представлен код вспомогательного меню которое реализовано при помощи тега div.
1
<div c l a s s=" u i ␣ r i g h t ␣ p o i n t i n g ␣ dropdown ␣ i c o n ␣ button ">
2
< i c l a s s=" s e t t i n g s ␣ i c o n "></ i>
3
<div c l a s s="menu">
4
<div c l a s s=" d i v i d e r "></ div>
5
<div c l a s s=" h e a d e r ">
6
< i c l a s s=" t a g s ␣ i c o n "></ i>
7
На с тройки
8
</ div>
9
<div c l a s s=" item ␣ a p p l i c a t i o n ">
10
<div c l a s s=" u i ␣ b l u e ␣empty␣ c i r c u l a r ␣ l a b e l "></ div>
11
Спи с ок з аяв ок
12
</ div>
13
<div c l a s s=" item ␣ a c t i v i t y −type ">
14
<div c l a s s=" "></ div>
15
Спи с ок типо в д е ят е льно с ти
16
</ div>
17
<div c l a s s=" item ␣ achievement −type ">
18
<div c l a s s=" "></ div>
19
Спи с ок типо в до с тиже ний
20
</ div>
21
<div c l a s s=" item ␣ e v e n t ">
22
<div c l a s s=" "></ div>
23
Спи с ок да т р е г и с траций
24
25
26
</ div>
</ div>
</ div>
Листинг 21. Вспомогательное меню employee/index.html
Листинг 22 таблица для просмотра списка заявок на повышенную стипендию реализованный при помощи тега table и кнопка для проверки определенной заявки.
1
<table id=" example " c l a s s=" u i ␣ c e l l e d ␣ t a b l e " style=" width :100% ">
2
<thead>
41
3
< tr>
4
<th>Тип</ th>
5
<th>Да т а про в е д е ния</ th>
6
<th>Студ е нт</ th>
7
<th>Ст а ту с</ th>
8
<th>Де й с тви е</ th>
9
</ tr>
10
</ thead>
11
<tbody>
12
13
{% f o r app i n a p p l i c a t i o n %}
< tr>
14
<td>{{ app . a c t i v i t y _ t y p e . name }}</ td>
15
<td>{{ app . e v e n t . y e a r }}</ td>
16
<td>{{ app . s t u d e n t }}</ td>
17
<td>
18
{% i f app . s t a t u s == " approve " %}
<div c l a s s=" u i ␣ g r e e n ␣ l a b e l ␣ l a b e l − s i z e " id=" green − l a b e l ">Приня
19
т о</ div>
20
{% e l i f app . s t a t u s == " r e j e c t e d " %}
<div c l a s s=" u i ␣ r e d ␣ l a b e l ␣ l a b e l − s i z e " id=" red − l a b e l ">Отклон е но
21
</ div>
22
{% e l i f app . s t a t u s == " w a i t i n g " %}
<div c l a s s=" u i ␣ o r a n g e ␣ l a b e l ␣ l a b e l − s i z e " id=" y e l l o w − l a b e l ">Ожи
23
дани е про в е рки</ div>
24
{% e n d i f %}
25
</ td>
26
<td>
<a href=" a p p l i c a t i o n s /{{ app . i d }} ">
27
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ t e a l ␣ u i ␣ button ">Про смо тр</ div>
28
</ a>
29
30
</ td>
31
</ tr>
32
{% e n d f o r %}
33
</ tbody>
34
</ table>
Листинг 22. Код таблицы employee/index.html
Шаблон
для
проверки
информации
studentship/employee/application/show.html
42
о
предоставляет
заявке
воз-
можность администратору проверить все данные.
В Листинге 23 показан код, где при помощи тега div и классов стилей выводится общая информация о заявке тип, дата проведения, студент
отправивший её и список достижений которые можно просмотреть.
1 <div c l a s s=" u i ␣ segments ">
2
3
<div c l a s s=" u i ␣ segment ">
<h1>Информация о з аявк е</ h1>
4
</ div>
5
<div c l a s s=" u i ␣ segment ">
6
7
8
9
10
11
<div c l a s s=" u i ␣ l i s t ">
<div c l a s s=" item ">
<b>Тип :</ b> {{ a p p l i c a t i o n . a c t i v i t y _ t y p e . name}}
</ div>
<div c l a s s=" item ">
<b>Да т а про в е д е ния :</ b> {{ a p p l i c a t i o n . e v e n t . y e a r }}
12
</ div>
13
<div c l a s s=" item ">
14
15
16
<b>Студ е нт :</ b> {{ a p p l i c a t i o n . s t u d e n t }}
</ div>
</ div>
17
</ div>
18
<div c l a s s=" u i ␣ segment ">
19
20
21
22
23
24
<div c l a s s=" u i ␣ segments ">
{% f o r achievement i n a c h i e v e m e n t s %}
<div c l a s s=" u i ␣ segment ">
<div c l a s s=" u i ␣ l i s t ">
<div c l a s s=" item ">
<b>{{ f o r l o o p . c o u n t e r }}#</ b>
25
</ div>
26
<div c l a s s=" item ">
27
<b>Тип до с тиже ния :</ b> {{ achievement . achievement_type . name}}
28
</ div>
29
<div c l a s s=" item ">
30
<b>Да т а получ е ния :</ b> {{ achievement . obtain_date }}
31
</ div>
32
<div c l a s s=" item ">
33
{% f o r s c a n i n achievement . s c a n _ s e t . a l l %}
34
<b>Файл :</ b> <a href=" {{ ␣ s c a n . f i l e n a m e . u r l ␣ }} " t a r g e t=" blank ">с ка
ча т ь файл</ a>
43
35
{% e n d f o r %}
</ div>
36
</ div>
37
38
39
40
41
</ div>
{% e n d f o r %}
</ div>
</ div>
Листинг 23. Код информации о заявке шаблона
employee/application/show.html
В Листинге 24 представлен код формы, где пользователь может указать статус заявки один из трёх(принято, отклонено, ожидает проверки) и
указать комментарий для того чтобы студент знал почему именно такой
статус у его заявки.
1
2
<div c l a s s=" u i ␣ segment ">
<form action=" / s t u d e n t s h i p / employee / a p p l i c a t i o n s /{{ a p p l i c a t i o n . i d }} " method
=" p o s t ">
3
{% c s r f _ t o k e n %}
4
<dl>
5
<div c l a s s=" f i e l d W r a p p e r ">
6
<dt>< label for=" i d _ s t a t u s "><b>Ст а ту с :</ b></ label></ dt>
7
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . s t a t u s }}</ div></dd>
8
</ div>
9
<div c l a s s=" f i e l d W r a p p e r ">
10
<dt>< label for=" i d _ f e e d b a c k "><b>Комме нт арий :</ b></ label></ dt>
11
<dd><input type=" t e x t " name=" f e e d b a c k " value=" {{ form . f e e d b a c k . v a l u e
| d e f a u l t _ i f _ n o n e : "" }} "></dd>
12
</ div>
13
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
value="Отпра вит ь ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Отпра вит ь
14
15
</ button>
16
</ dl>
17
</ form>
18
</ div>
Листинг 24. Код формы шаблона employee/application/show.html
44
2.6
Настройка
параметров
для
подачи
заявок
на
повышенную стипендию администратором системы
Для того чтобы более автоматизировать процесс подачи заявки были
созданы дополнительные части интерфейса:
∙ для создания, редактирования и удаления типов деятельности;
∙ для создания, редактирования и удаления типов достижений;
∙ для создания, редактирования и удаления дат регистрации заявок.
Шаблон списка типов деятельности studentship/employee/activity_type/index.html.
На данном шаблоне выводится при помощи таблицы
список типов деятельности при помощи тега <table> в который добавлены кнопки для удаления и редактирования. Также здесь используется
вставка при помощи тега <script> javascript кода, для того чтобы вызвать
модальное окно при удалении элемента таблицы.
1 <div c l a s s=" u i ␣ g r i d ">
2
3
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<h1 c l a s s=" header −g r i d −column ">Спи с ок типо в д е ят е льно с ти</ h1>
4
</ div>
5
<div c l a s s="two␣ wide ␣ column ">
6
<div c l a s s=" u i ␣ r i g h t ␣ p o i n t i n g ␣ dropdown ␣ i c o n ␣ button ">
7
< i c l a s s=" s e t t i n g s ␣ i c o n "></ i>
8
<div c l a s s="menu">
9
10
<div c l a s s=" d i v i d e r "></ div>
<div c l a s s=" h e a d e r ">
11
< i c l a s s=" t a g s ␣ i c o n "></ i>
12
На с тройки
13
</ div>
14
<div c l a s s=" item ␣ a p p l i c a t i o n ">
15
<div c l a s s=" "></ div>
16
Спи с ок з аяв ок
17
</ div>
18
<div c l a s s=" item ␣ a c t i v i t y −type ">
45
19
<div c l a s s=" u i ␣ b l u e ␣empty␣ c i r c u l a r ␣ l a b e l "></ div>
20
Спи с ок типо в д е ят е льно с ти
21
</ div>
22
<div c l a s s=" item ␣ achievement −type ">
23
<div c l a s s=" "></ div>
24
Спи с ок типо в до с тиже ний
25
</ div>
26
<div c l a s s=" item ␣ e v e n t ">
27
<div c l a s s=" "></ div>
28
Спи с ок дат р е г и с траций
</ div>
29
30
31
32
</ div>
</ div>
</ div>
33 </ div>
34 <table c l a s s=" u i ␣ c e l l e d ␣ t a b l e ">
35
36
<thead>
< tr>
37
<th>На з в ани е</ th>
38
<th>Де й с тви е</ th>
39
</ tr>
40
</ thead>
41
<tbody>
42
43
{% f o r app i n o b j e c t _ l i s t %}
< tr>
44
<td>{{ app . name }}</ td>
45
<td>
<a c l a s s=" u i ␣ b l u e ␣ mini ␣ button " href=" a c t i v i t y _ t y p e s /{{ app . i d }}/ update
46
">Редактиро в а т ь</ a>
<a c l a s s=" u i ␣ r e d ␣ mini ␣ button ␣show−modal " href="#" name=" {{ app . i d }} ">У
47
далит ь</ a>
48
</ td>
49
</ tr>
50
{% e n d f o r %}
51
</ tbody>
52 </ table>
Листинг 25. Код шаблона employee/activity_type/index.html
Шаблон
создания
типа
46
деятельности
studentship/employee/activity_type/create.html.
На данном шаб-
лоне расположена форма для создания типа деятельности представленная
тегом <form>, полем для ввода тегом input и кнопкой для отправки данных
на сервер. Если после отправки поле будет пустым тогда будет выведена
ошибка с сообщением о том что это поле должно быть заполнено.
1 <h1>Но вый тип д е ят е льно с ти</ h1>
2 <form action=" " method=" p o s t ">
3
{% c s r f _ t o k e n %}
4
{{ form . n o n _ f i e l d _ e r r o r s }}
5
<div c l a s s=" f i e l d W r a p p e r ">
6
{{ form . name . e r r o r s }}
7
< label for=" id_year ">На з в ани е :</ label>
8
{{ form . name }}
9
10
11
</ div>
<div c l a s s=" u i ␣ g r i d ">
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
12
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
13
</ button>
14
15
</ div>
16
<div c l a s s="two␣ wide ␣ column ">
<a href="{%␣ ␣ u r l ␣ " a c t i v i t y _ t y p e s _ l i s t " ␣ ␣%}">
17
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
18
19
На з ад
</ div>
20
21
</ a>
22
</ div>
23
</ div>
24 </ form>
Листинг 26. Код шаблона employee/activity_type/create.html
Шаблон
редактирования
типа
studentship/employee/activity_type/edit.html.
деятельности
На данном шаблоне
расположена форма для редактирования типа деятельности представленная
тегом <form>, полем для ввода тегом input и кнопкой для отправки данных
47
на сервер.
1 <h1>Ре дактиров ани е типа д е ят е льно с ти</ h1>
2 <form action=" " method=" p o s t ">
3
{% c s r f _ t o k e n %}
4
{{ a c t i v i t y _ t y p e . n o n _ f i e l d _ e r r o r s }}
5
<div c l a s s=" f i e l d W r a p p e r ">
6
{{ a c t i v i t y _ t y p e . name . e r r o r s }}
7
< label for=" id_year ">На з в ани е :</ label>
8
<input type=" t e x t " name="name" value=" {{ ␣ a c t i v i t y _ t y p e . name␣ }} ">
9
10
11
</ div>
<div c l a s s=" u i ␣ g r i d ">
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
12
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
13
</ button>
14
15
</ div>
16
<div c l a s s="two␣ wide ␣ column ">
<a href="{%␣ ␣ u r l ␣ " a c t i v i t y _ t y p e s _ l i s t " ␣ ␣%}">
17
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
18
19
На з ад
</ div>
20
21
</ a>
22
</ div>
23
</ div>
24 </ form>
Листинг 27. Код шаблона employee/activity_type/edit.html
Шаблон списка типов достижений
studentship/employee/achievement_type/index.html.
На данном шаб-
лоне выводится при помощи таблицы списка типов достижений при помощи
тега <table> в который добавлены кнопки для удаления и редактирования.
Также здесь используется вставка при помощи тега <script> javascript кода,
для того чтобы вызвать модальное окно при удалении элемента таблицы.
48
1 <div c l a s s=" u i ␣ g r i d ">
2
3
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<h1 c l a s s=" header −g r i d −column ">Спи с ок типо в до с тиже ний</ h1>
4
</ div>
5
<div c l a s s="two␣ wide ␣ column ">
6
<div c l a s s=" u i ␣ r i g h t ␣ p o i n t i n g ␣ dropdown ␣ i c o n ␣ button ">
7
< i c l a s s=" s e t t i n g s ␣ i c o n "></ i>
8
<div c l a s s="menu">
<div c l a s s=" d i v i d e r "></ div>
9
<div c l a s s=" h e a d e r ">
10
11
< i c l a s s=" t a g s ␣ i c o n "></ i>
12
На с тройки
13
</ div>
14
<div c l a s s=" item ␣ a p p l i c a t i o n ">
15
<div c l a s s=" "></ div>
16
Спи с ок з аяв ок
17
</ div>
18
<div c l a s s=" item ␣ a c t i v i t y −type ">
19
<div c l a s s=" "></ div>
20
Спи с ок типо в д е ят е льно с ти
21
</ div>
22
<div c l a s s=" item ␣ achievement −type ">
23
<div c l a s s=" u i ␣ b l u e ␣empty␣ c i r c u l a r ␣ l a b e l "></ div>
24
Спи с ок типо в до с тиже ний
25
</ div>
26
<div c l a s s=" item ␣ e v e n t ">
27
<div c l a s s=" "></ div>
28
Спи с ок дат р е г и с траций
</ div>
29
30
31
32
</ div>
</ div>
</ div>
33 </ div>
34 <table c l a s s=" u i ␣ c e l l e d ␣ t a b l e ">
35
36
<thead>
< tr>
37
<th>На з в ани е</ th>
38
<th>Тип д е ят е льно с ти</ th>
39
<th>Де й с тви е</ th>
40
</ tr>
49
41
</ thead>
42
<tbody>
43
44
{% f o r app i n o b j e c t _ l i s t %}
< tr>
45
<td>{{ app . name }}</ td>
46
<td>{{ app . a c t i v i t y _ t y p e }}</ td>
47
<td>
<a c l a s s=" u i ␣ b l u e ␣ mini ␣ button " href=" achievement_types / update /{{ app .
48
i d }} ">Ре дактиро в а т ь</ a>
<a c l a s s=" u i ␣ r e d ␣ mini ␣ button ␣show−modal " href="#" name=" {{ app . i d }} ">У
49
далит ь</ a>
50
</ td>
51
</ tr>
52
{% e n d f o r %}
53
</ tbody>
54 </ table>
Листинг 28. Код шаблона employee/achievement_type/index.html
Шаблон создания типа достижения
studentship/employee/achievement_type/create.html.
На
данном
шаблоне расположена форма для создания типа достижения представленная тегом <form>, полями для ввода представленными тегами input, select
и кнопкой для отправки данных на сервер. Если после отправки поле будет
пустым тогда будет выведена ошибка с сообщением о том что это поле
должно быть заполнено.
1 <h1>Но вый тип до с тиже ний</ h1>
2 <form action=" " method=" p o s t ">{% c s r f _ t o k e n %}
3
<dl>
4
{{ form . n o n _ f i e l d _ e r r o r s }}
5
<div c l a s s=" f i e l d W r a p p e r ">
6
{{ form . name . e r r o r s }}
7
<dt>< label for=" id_year ">Тип д е ят е льно с ти :</ label></ dt>
8
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . a c t i v i t y _ t y p e }}</ div></dd>
9
</ div>
10
<div c l a s s=" f i e l d W r a p p e r ">
11
{{ form . name . e r r o r s }}
12
<dt>< label for=" id_year ">На з в ани е :</ label></ dt>
50
<dd>{{ form . name }}</dd>
13
</ div>
14
15
</ dl>
16
<div c l a s s=" u i ␣ g r i d ">
17
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
18
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
19
</ button>
20
21
</ div>
22
<div c l a s s="two␣ wide ␣ column ">
<a href="{%␣ ␣ u r l ␣ " a c h i e v e m e n t _ t y p e s _ l i s t " ␣ ␣%}">
23
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
24
25
На з ад
</ div>
26
27
</ a>
28
</ div>
29
</ div>
30
31 </ form>
Листинг 29. Код шаблона employee/achievement_type/create.html
Шаблон
редактирования
типа
studentship/employee/achievement_type/edit.html.
достижения
На
данном
шаблоне расположена форма для редактирования типа достижения представленная тегом <form>, полями для ввода представленными тегами
input, select и кнопкой для отправки данных на сервер.
1 <h1>Ре дактиров ани е типа до с тиже ний</ h1>
2 <form action=" " method=" p o s t ">
3
4
{% c s r f _ t o k e n %}
<dl>
5
{{ form . n o n _ f i e l d _ e r r o r s }}
6
<div c l a s s=" f i e l d W r a p p e r ">
7
{{ form . name . e r r o r s }}
8
<dt>< label for=" id_year ">Тип д е ят е льно с ти :</ label></ dt>
9
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . a c t i v i t y _ t y p e }}</ div></dd>
10
</ div>
11
<div c l a s s=" f i e l d W r a p p e r ">
51
12
{{ form . name . e r r o r s }}
13
<dt>< label for=" id_year ">На з в ани е :</ label></ dt>
14
<dd>{{ form . name }}</dd>
</ div>
15
16
</ dl>
17
<div c l a s s=" u i ␣ g r i d ">
18
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
19
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
20
</ button>
21
22
</ div>
23
<div c l a s s="two␣ wide ␣ column ">
<a href="{%␣ ␣ u r l ␣ " a c h i e v e m e n t _ t y p e s _ l i s t " ␣ ␣%}">
24
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
25
26
На з ад
</ div>
27
28
</ a>
29
</ div>
30
</ div>
31 </ form>
Листинг 30. Код шаблона employee/achievement_type/edit.html
Шаблон
списка
дат
studentship/employee/event/index.html.
регистрации
заявок
На данном шаблоне выво-
дится при помощи таблицы список дат регистрации заявок при помощи
тега <table> в который добавлены кнопки для удаления и редактирования.
Также здесь используется вставка при помощи тега <script> javascript кода,
для того чтобы вызвать модальное окно при удалении элемента таблицы.
1 <table c l a s s=" u i ␣ c e l l e d ␣ t a b l e ">
2
3
<thead>
< tr>
4
<th>Год</ th>
5
<th>Да т а начала</ th>
6
<th>Да т а конца</ th>
7
<th>Ст а ту с</ th>
8
<th>Де й с тви е</ th>
9
</ tr>
52
10
</ thead>
11
<tbody>
12
13
{% f o r e v e n t i n o b j e c t _ l i s t %}
< tr>
14
<td>{{ e v e n t . y e a r }}</ td>
15
<td>{{ e v e n t . begin_date }}</ td>
16
<td>{{ e v e n t . end_date }}</ td>
17
<td>
18
{% i f e v e n t . s t a t u s == " open " %}
19
Открыт о
20
{% e l i f e v e n t . s t a t u s == " c l o s e " %}
21
Закрыт о
22
{% e n d i f %}
23
</ td>
24
<td>
<a c l a s s=" u i ␣ b l u e ␣ mini ␣ button " href=" e v e n t s /{{ e v e n t . i d }}/ update ">Ре да
25
ктиро в а т ь</ a>
<a c l a s s=" u i ␣ r e d ␣ mini ␣ button ␣show−modal " href="#" name=" {{ e v e n t . i d }} "
26
>Удалит ь</ a>
27
</ td>
28
</ tr>
29
{% e n d f o r %}
30
</ tbody>
31 </ table>
Листинг 31. Код шаблона employee/event/index.html
Шаблон
создания
даты
studentship/employee/event/create.html.
регистрации
заявки
На данном шаблоне рас-
положена форма для создания даты регистрации заявки представленная
тегом <form>, полями для ввода представленные тегом input и кнопкой
для отправки данных на сервер. Если после отправки поля будут пустыми
тогда будет выведена ошибка с сообщением о том что поля должны быть
заполнены. Для удобного выбора даты начала и конца приема заявок
используется javascript библиотека DatePicker.
53
1 <form action=" " method=" p o s t ">{% c s r f _ t o k e n %}
2
3
4
<dl>
<div c l a s s=" f i e l d W r a p p e r ">
{% i f form . y e a r . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
5
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з аполн е н
6
ия !
7
</ p>
8
{% e n d i f %}
9
<dt>< label for=" id_year ">Год :</ label></ dt>
10
<dd>{{ form . y e a r }}</dd>
11
</ div>
12
<div c l a s s=" f i e l d W r a p p e r ">
13
{% i f form . begin_date . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
14
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з аполн е н
15
ия !
16
</ p>
17
{% e n d i f %}
18
<dt>< label for=" id_begin_date ">Да т а начала при ема з аяв ок :</ label></ dt>
19
<dd><input id=" s t a r t D a t e " type=" t e x t " name=" begin_date " value=" {{ form .
begin_date . v a l u e | d e f a u l t _ i f _ n o n e : " " }} "></dd>
20
</ div>
21
<div c l a s s=" f i e l d W r a p p e r ">
22
{% i f form . end_date . e r r o r s %}
23
<p c l a s s=" nt −red −i n d e n t ">
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з аполн е н
24
ия !
25
</ p>
26
{% e n d i f %}
27
<dt>< label for=" id_end_date ">Да т а окончания при ема з аяв ок :</ label></ dt>
28
<dd><input id=" endDate " type=" t e x t " name=" end_date " value=" {{ form .
end_date . v a l u e | d e f a u l t _ i f _ n o n e : " " }} "></dd>
29
</ div>
30
<div c l a s s=" f i e l d W r a p p e r ">
31
{{ form . s t a t u s . e r r o r s }}
32
<dt>< label for=" i d _ s t a t u s ">Ст а ту с при ема</ label></ dt>
33
<dd><div c l a s s=" bl ock − s e l e c t ">{{ form . s t a t u s }}</ div></dd>
34
</ div>
35
<br>
54
36
37
<div c l a s s=" u i ␣ g r i d ">
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
38
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
39
</ button>
40
41
</ div>
42
<div c l a s s="two␣ wide ␣ column ">
<a href="{%␣ ␣ u r l ␣ " e v e n t s _ l i s t " ␣ ␣%}">
43
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
44
45
На з ад
</ div>
46
47
</ a>
48
</ div>
49
50
</ div>
<dl>
51 </ form>
Листинг 32. Код шаблона employee/event/create.html
Шаблон
редактирования
даты
studentship/employee/event/edit.html.
регистрации
заявки
На данном шаблоне расположе-
на форма для редактирования даты регистрации заявки представленная
тегом <form>, полями для ввода представленными тегами input и кнопкой
для отправки данных на сервер. Для удобного выбора даты начала и конца
приема заявок используется javascript библиотека DatePicker.
Здесь пердставлен код полей для ввода года и дат начала и окончания
регистрации заявок.
1 <h1>Ре дактиров ани е да ты р е г и с трации з аяв ок</ h1>
2 <form action=" " method=" p o s t ">{% c s r f _ t o k e n %}
3
4
<dl>
<div c l a s s=" f i e l d W r a p p e r ">
5
{{ e v e n t . y e a r . e r r o r s }}
6
<dt>< label for=" id_year ">Год :</ label></ dt>
7
< !−−
8
<dd><input type=" t e x t " name=" y e a r " value=" {{ ␣ e v e n t . y e a r ␣ }} "></dd>
9
10
{{
event . y e a r
}}
−−>
</ div>
<div c l a s s=" f i e l d W r a p p e r ">
55
11
{{ e v e n t . begin_date . e r r o r s }}
12
<dt>< label for=" id_begin_date ">Да т а начала при ема з аяв ок :</ label></
dt>
13
<dd><input id=" s t a r t D a t e " type=" t e x t " name=" begin_date " value=" {{ ␣
e v e n t . begin_date | d a t e : "Y−m−d" ␣ }} "></dd>
14
</ div>
15
<div c l a s s=" f i e l d W r a p p e r ">
16
{{ e v e n t . end_date . e r r o r s }}
17
<dt>< label for=" id_end_date ">Да т а окончания при ема з аяв ок :</ label><
/ dt>
18
<dd><input id=" endDate " type=" t e x t " name=" end_date " value=" {{ ␣ e v e n t
. end_date | d a t e : "Y−m−d" ␣ }} "></dd>
19
</ div>
Листинг 33. Код шаблона employee/event/edit.html
В Листинге 34 реализация выбора статуса даты регистрации заявки,
кнопка "Сохранить"для отправки данных на сервер и кнопка навигации для
возврата на шаблон просмотра списка.
1
<div c l a s s=" f i e l d W r a p p e r ">
2
{{ e v e n t . s t a t u s . e r r o r s }}
3
<dt>< label for=" i d _ s t a t u s ">Ст а ту с при ема</ label></ dt>
4
< !−−
5
<dd><div c l a s s=" b lock − s e l e c t ">
{{
event . s t a t u s
}}
−−>
< s e l e c t id=" i d _ s t a t u s " name=" s t a t u s ">
6
7
<option value=" open ">Открыт о</ option>
8
<option value=" c l o s e ">Закрыт о</ option>
</ s e l e c t>
9
10
</ div></dd>
11
</ div>
12
<br>
13
<div c l a s s=" u i ␣ g r i d ">
14
15
<div c l a s s=" f o u r t e e n ␣ wide ␣ column ">
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
value="Сохранить ">
16
17
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
</ button>
18
</ div>
19
<div c l a s s="two␣ wide ␣ column ">
20
<a href="{%␣ ␣ u r l ␣ " e v e n t s _ l i s t " ␣ ␣%}">
56
<div c l a s s=" u i ␣ b l u e ␣ l a b e l e d ␣ button ␣ s m a l l ␣ r i g h t ␣ f l o a t e d ">
21
22
На з ад
</ div>
23
24
</ a>
25
</ div>
</ div>
26
27
</ dl>
28 </ form>
Листинг 34. Код шаблона employee/event/edit.html
57
Глава III Тестирование
3.1 Принцип работы интерфейса для студента
Для начала работы в системе студенту необходимо зарегистрироваться, а затем авторизоваться в системе, чтобы пользоваться ее возможностями.
Рис. 4: Форма регистрации
На рисунке представлена форма регистрации. Необходимо заполнить
поля логин, пароль, почта, имя, отчество, фамилия, дать согласие на обработку персональных данных и нажать кнопку "зарегистрироваться".
Рис. 5: Форма авторизации
58
На Рис. 4 представлена форма авторизации. Нужно заполнить логин,
пароль и нажать кнопку "вход".
После авторизации студент увидит главную страницу с которой пользователь может попасть в разделы профиль, достижения, повышенная стипендия для подачи заявок.
Рис. 6: Главная страница
После этого нужно добавить достижения. Заполнить форму и добавить
файл.
Рис. 7: Форма создания достижения
Есть возможность редактирования и удаления достижений.
59
Рис. 8: Форма обновления достижения
Рис. 9: Список достижений
Затем можно создать заявку на повышенную стипендию. Выбираем
тип деятельности и добавляем туда соответствующее достижение.
Рис. 10: Форма создания заявки на повышенную стипендию.
Если регистрация заявок открыта будет доступна кнопка "Отправить"после нажатия кнопки заявка будет отправлена на проверку.
60
Рис. 11: Список заявок на повышенную стипендию
Рис. 12: Форма редактирования заявки на повышенную стипендию.
3.2 Принцип работы интерфейса для администратора
системы
Необходимо
авторизоваться
studentship/employee.
в
системе
и
перейти
по
ссылке
На этой странице список заявок на повышен-
ную стипендию поданных студентами. Есть возможность сортировать,
искать по таблице, а также пагинация.
61
Рис. 13: Список заявок на повышенную стипендию
Рис. 14: Страница проверки заявки
На странице проверки заявки представлена информация о заявке, список достижений. Затем необходимо выбрать статус, и если нужно написать
комментарий и нажать кнопку "Отправить".
Для того чтобы разрешить подавать заявки нужно создать дату регистрации заявок. Есть возможность редактировать и удалять.
62
Рис. 15: Список дат регистрации заявок.
Рис. 16: Форма создания дат регистрации заявок
Рис. 17: Форма редактирования дат регистрации заявок
У преподавателя есть возможность просмотреть, добавить, редактировать и удалить типы деятельности.
63
Рис. 18: Список типов деятельности.
Рис. 19: Форма создания типа деятельности
Рис. 20: Форма редактирования типа деятельности
Также можно просмотреть, добавить, редактировать и удалить типы
достижений.
Рис. 21: Список типов достижений.
64
Рис. 22: Форма создания типа достижений.
Рис. 23: Форма редактирования типа достижений.
.
65
Заключение
Подводя итог, можно утверждать, что проделанная работа в точности
соответствует обозначенной цели. А именно, был смоделирован и реализован
интерфейс приложения для подачи заявок на повышенную стипендию.
В результате проделанной работы были решены следующие задачи:
∙ Спроектирован интерфейс приложения для подачи заявок на повышенную стипендию;
∙ Реализован интерфейс для регистрации и авторизации студентов;
∙ Сверстаны шаблоны для добавления достижений и подачи заявок на
повышенную стипендию для студента;
∙ Разработаны шаблоны для проверки заявок на повышенную стипендию преподавателем;
∙ Сверстаны шаблоны для назначения дат подачи заявок на повышенную стипендию;
∙ Созданы шаблоны дополнительных настроек для подачи заявок на повышенную стипендию(типы деятельности, типы достижений);
∙ Созданный интерфейс интегрирован в проект "Система электронной
отчетности о научно-исследовательской работе сотрудников вуза".
Таким образом, можно сделать вывод о том, что в настоящей работе
были решены поставленные задачи. Основным результатом работы является
разработанный удобный интерфейс для создания, редактирования, удаления
и подачи заявок на повышенную стипендию.
Промежуточные результаты исследования были опубликованы в материалах конференции и изложены на заседании семинара:
66
1. Проектирование базы данных для приложения по подаче заявок
на повышенную стипендию // Вестник науки. Сборник научныхработ аспирантов, магистрантов и студентов физико-математического факультета,
г. Орел, Орловский государственный университет им. И. С. Тургенева, 26
декабря 2017 г. С. 28-30.
2. Моделирование и реализация интерфейса приложения для подачи
заявок на повышенную стипендию // семинар «Вычислительные технологии и их приложения» г. Орел, ОГУ им. И. С. Тургенева, на основании
Распоряжения ректора ОГУ от 15.11.2017 № 577р, 28 июня 2018 г.
67
Список литературы
1. Academic Line - cистема управления научно-исследовательской деятельностью вуза: [Электронный ресурс]. - Режим доступа: http://www.
verticalportals.ru/Default.aspx?tabid=436. - Дата доступа: 30.06.2018.
2. Истина - система управления информацией о результатах научноисследовательской и педагогической деятельности: [Электронный ресурс].
- Режим доступа: http://istina.msu.ru/conferences/presentations/
9143061/. - Дата доступа: 30.06.2018.
3. 1С:Университет - система управления информацией о результатах научноисследовательской деятельности: [Электронный ресурс]. - Режим доступа:
http://solutions.1c.ru/catalog/university/features. - Дата доступа:
30.06.2018.
4. Система электронной отчетности о научно-исследовательской работе
сотрудников вуза: [Электронный ресурс]. - Режим доступа: http://nir.
univ-orel.ru/. - Дата доступа: 30.06.2018.
5. Дорофеева В.И.,Никольский Д.Н.,Федяев Ю.С. - Разработка системы
электронной отчетности о научно-исследовательской работе сотрудников вуза: [Электронный ресурс]. - Режим доступа: http://elibrary.ru/item.asp?
id=22590629. - Дата доступа: 30.06.2018.
6. Python документация: [Электронный ресурс]. - Режим доступа: https:
//www.python.org/doc/. - Дата доступа: 30.06.2018.
7. HTML документация: [Электронный ресурс]. - Режим доступа: https://
developer.mozilla.org/en-US/docs/Web/HTML. - Дата доступа: 30.06.2018.
8. CSS документация: [Электронный ресурс]. - Режим доступа: https://
developer.mozilla.org/en-US/docs/Web/CSS. - Дата доступа: 30.06.2018.
9. Semantic UI документация: [Электронный ресурс]. - Режим доступа: http:
//semantic-ui.com/. - Дата доступа: 30.06.2018.
10. Django документация: [Электронный ресурс]. - Режим доступа: http:
68
//djbook.ru/rel1.6/. - Дата доступа: 30.06.2018.
11. jQuery документация: [Электронный ресурс]. - Режим доступа: http:
//api.jquery.com/. - Дата доступа: 30.06.2018.
12. Moment.js документация: [Электронный ресурс]. - Режим доступа: http:
//momentjs.com/docs/. - Дата доступа: 30.06.2018.
13. Datepicker документация: [Электронный ресурс]. - Режим доступа: https://github.com/fengyuanchen/datepicker/blob/master/README.
md. - Дата доступа: 30.06.2018.
14. DataTables документация: [Электронный ресурс]. - Режим доступа:
https://datatables.net/. - Дата доступа: 30.06.2018.
15. Select2 документация: [Электронный ресурс]. - Режим доступа: https://
select2.org/getting-started/installation. - Дата доступа: 30.06.2018.
16. Регламент подачи документов и конкурсного отбора на повышенную государственную академическую стипендию за особые достижения:
[Электронный ресурс]. - Режим доступа: http://oreluniver.ru/public/
file/sveden/grants/stipend/reglam_pov_stip_2017.pdf. - Дата доступа:
30.06.2018.
69
Приложение
Шаблоны интерфейса студента
1 < !DOCTYPE html>
2 <html lang=" ru ">
3
<head>
4
<meta charset=" u t f −8">
5
{% b l o c k t i t l e %}
6
< t i t l e >Научный о тд ел ОГУ име ни И. С . Тур г е н е в а</ t i t l e >
7
<meta name=" d e s c r i p t i o n " content="Официальный␣ с айт ␣научно г о ␣ о тд е ла ␣
Орло в с ко г о ␣ г о с удар с т в е нно г о␣унив е р с ит е т а ␣име ни␣И. С . ␣Тур г е н е ва ) "
/>
8
<meta name=" keywords " content="Орло в с кий␣ г о с удар с т в е нный␣унив е р с ит е
т ␣имени␣И. С . ␣Тур г е н е в а , ␣ОГУ␣имени␣И.С . ␣Тур г е н е в а , ␣ о буч е ни е , ␣уч е б
а , ␣пр е пода в а т е ль , ␣научный␣ о тд е л , ␣ о бра з о в ани е , ␣наука , ␣инно в ации , ␣
и с с л е дов ания" />
9
10
{% e n d b l o c k %}
< link r e l =" s h o r t c u t ␣ i c o n " href=" / s t a t i c / images / ogu . png" type=" image /png
">
11
12
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / g l y p h i c o n s . c s s ">
13
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / s t y l e . c s s ">
14
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / s e m a n t i c . min . c s s " media="
s c r e e n ">
15
< link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / b r o w s e r s . c s s ">
16
17
< script src=" / s t a t i c / j s / j q u e r y . min . j s "></ script>
18
< script src=" / s t a t i c / j s / j q u e r y . c o o k i e . j s "></ script>
19
< script src=" / s t a t i c / j s / s e m a n t i c . min . j s "></ script>
20
< script src=" / s t a t i c / j s / s c i . j s "></ script>
21
< script src=" / s t a t i c / j s /name . j s "></ script>
22
< script src=" / s t a t i c / j s / d e t e c t . j s "></ script>
23
{% b l o c k h e a d _ i n c l u d e s %}
24
{% e n d b l o c k %}
25
26
{% i f j s %}
27
< script type=" t e x t / j a v a s c r i p t " charset=" u t f −8">
28
29
window . django = {{ j s | s a f e } } ;
</ script>
70
30
31
{% e n d i f %}
</ head>
32
33
34
35
<body>
< script>
$ ( document ) . ready ( f u n c t i o n ( ) {
36
var u s e r = d e t e c t . p a r s e ( n a v i g a t o r . userAgent ) ;
37
c o n s o l e . l o g ( ’ * ’+ u s e r . b r o w s e r . f a m i l y +’ * ’+ u s e r . b r o w s e r .
version ) ;
38
switch ( user . browser . family ) {
39
c a s e ’ Chrome ’ :
40
i f ( user . browser . v e r s i o n < 36) {
41
show_message ( ) ;
42
};
43
break ;
44
case ’ Firefox ’ :
45
i f ( user . browser . v e r s i o n < 31) {
46
show_message ( ) ;
47
};
48
break ;
49
c a s e ’ Chromium ’ :
50
i f ( user . browser . v e r s i o n < 36) {
51
show_message ( ) ;
52
};
53
break ;
54
default :
55
window . l o c a t i o n . r e p l a c e ( " / s t a t i c / i e −o l d
. html " ) ;
56
break ;
57
58
59
}
}) ;
</ script>
60
61
62
63
<div id=" wrapper ">
<div c l a s s=" u i ␣ top ␣ a t t a c h e d ␣ segment ␣no−padding ">
<div c l a s s=" u i ␣ t i e r e d ␣menu">
64
65
66
67
<a c l a s s=" {{ ␣ template_main ␣ }} ␣ item " href=" / s t u d e n t ">
< i c l a s s=" g l y p h i c o n s ␣home"></ i> Гла вная
</ a>
71
<a c l a s s=" {{ ␣ t e m p l a t e _ p r o f i l e ␣ }} ␣ item " href=" / s t u d e n t /
68
p r o f i l e " id=" item − p r o f i l e ">
< i c l a s s=" g l y p h i c o n s ␣ p a r e n t s "></ i> Профиль
69
70
</ a>
71
<a c l a s s=" {{ ␣ template_achievements ␣ }} ␣ item " href=" /
s t u d e n t s h i p / a c h i e v e m e n t s " id=" item −a c h i e v e m e n t s ">
< i c l a s s=" g l y p h i c o n s ␣ s t a r "></ i> До с тиже ния
72
73
</ a>
74
<a c l a s s=" {{ ␣ t e m p l a t e _ s t u d e n t s h i p ␣ }} ␣ item " href=" /
s t u d e n t s h i p / a p p l i c a t i o n s " id=" item − p r o f i l e ">
< i c l a s s=" g l y p h i c o n s ␣ upload "></ i> По выше нная с тип е ндия
75
</ a>
76
77
78
{% i f not u s e r . username %}
<a c l a s s=" r i g h t − a l i g n e d ␣ item " href="{%␣ u r l ␣ ’
79
student_auth_login ’ ␣%}">
80
< i c l a s s=" g l y p h i c o n s ␣ l o g _ i n "></ i>
81
Вход
</ a>
82
83
{% e l s e %}
<a c l a s s=" r i g h t − a l i g n e d ␣ item " href="{%␣ u r l ␣ ’
84
student_auth_logout ’ ␣%}">
85
< i c l a s s=" g l y p h i c o n s ␣ e x i t "></ i>
86
Выход
87
</ a>
88
<span c l a s s=" r i g h t − a l i g n e d ␣ item ">
89
{{ u s e r . username }}
90
</ span>
91
{% e n d i f %}
92
<div c l a s s=" u i ␣ sub ␣menu␣ p r o f i l e −menu">
93
<a href="{%␣ u r l ␣ ’ p r o f i l e _ u s e r _ v i e w ’ ␣%}" c l a s s=" {{
94
user_item }} ␣ item ">< i c l a s s=" g l y p h i c o n s ␣ u s e r "></ i> Ак
каунт</ a>
</ div>
95
96
97
</ div>
</ div>
98
99
100
<s e c t i o n c l a s s=" u i ␣main␣ p i l e d ␣ segment ">
<h e a d e r>
72
101
{% b l o c k c o n t e n t _ t i t l e %}{% e n d b l o c k %}
102
</ h e a d e r>
103
{% i f not anonymous %}
104
{% b l o c k c o n t e n t %}{% e n d b l o c k %}
105
{% e l s e %}
106
<p>
107
Пожалуй с т а , в ойдит е в с и с т ему
108
<a href="{%␣ u r l ␣ ’ student_auth_login ’ ␣%}">вход</ a> .
109
</ p>
110
{% e n d i f %}
111
</ s e c t i o n>
112
</ div>
113
114
115
<f o o t e r>
<div c l a s s=" c o p y r i g h t ">&copy ;& nbsp ;Кафе дра информа тики Орло в с ко г о г
116
о с удар с т в е нно г о унив ер с ит е т а име ни И. С.& nbsp ; Тур г е н е в а</ div>
117
118
</ f o o t e r>
</ body>
119 </ html>
Листинг student/base.html
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2
3 {% b l o c k c o n t e n t _ t i t l e %}
4 <h2 c l a s s=" u i ␣ c e n t e r ␣ a l i g n e d ␣ b l a c k ␣ h e a d e r ">Ре г и с трация с туд е нт а</ h2>
5 {% e n d b l o c k %}
6
7 {% b l o c k c o n t e n t %}
8
9 <div c l a s s=" middle −wrapper ">
10
<form method=" p o s t " action=" " c l a s s=" u i ␣ form ">
11
{% c s r f _ t o k e n %}
12
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
13
< label>Имя поль з о в а т е ля :</ label>
14
{{ form . username }}
15
{% i f form . username . e r r o r s %}
16
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
17
18
Вв е дит е имя поль з о в а т е ля .
</ div>
73
19
{% e n d i f %}
20
</ div>
21
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
22
< label>Почт а :</ label>
23
{{ form . e m a i l }}
24
{% i f form . e m a i l . e r r o r s %}
25
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
26
Укажит е э л е ктронную почту .
27
</ div>
28
{% e n d i f %}
29
</ div>
30
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
31
< label>Пароль :</ label>
32
{{ form . password1 }}
33
{% i f form . password1 . e r r o r s %}
34
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
35
Укажит е пароль .
36
</ div>
37
{% e n d i f %}
38
</ div>
39
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
40
< label>Пароль ( еще ра з ) :</ label>
41
{{ form . password2 }}
42
{% i f form . password2 . e r r o r s %}
43
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
44
На б е рит е пароль по в т орно .
45
</ div>
46
{% e n d i f %}
47
</ div>
48
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
49
< label>Имя :</ label>
50
{{ form . f i r s t _ n a m e }}
51
{% i f form . f i r s t _ n a m e . e r r o r s %}
52
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
53
Укажит е Ваше имя .
54
</ div>
55
{% e n d i f %}
56
</ div>
57
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
58
< label>Отч е с т в о :</ label>
74
59
{{ form . middle_name }}
60
{% i f form . middle_name . e r r o r s %}
61
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
62
Укажит е Ваше о тч е с т в о .
63
</ div>
64
{% e n d i f %}
65
</ div>
66
<div c l a s s=" r e g i s t e r ␣ f i e l d ">
67
< label>Фамилия :</ label>
68
{{ form . last_name }}
69
{% i f form . last_name . e r r o r s %}
70
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ l a b e l ">
71
Укажит е Вашу фамилию.
72
</ div>
73
{% e n d i f %}
74
</ div>
75
<div c l a s s=" f i e l d ">
76
<div c l a s s=" u i ␣ checkbox ">
77
<input id=" a c c e p t − r u l e s " type=" checkbox ">
78
< label for=" a c c e p t − r u l e s ">Даю с о г ла с и е на о бра б о тку моих п е р с ональных д
анных</ label>
79
</ div>
80
</ div>
81
<button id=" r e g i s t e r _ b u t t o n " type=" submit " disabled=" t r u e " value="Зар е г и с тр
иро в а т ь с я" c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ f l u i d ␣ p o s i t i v e ␣ d i s a b l e d ␣ g r e e n ␣
button ">
82
83
84
< i c l a s s=" s h a r e ␣ i c o n "></ i> Зар е г и с триро в а т ь с я
</ button>
</ form>
85 </ div>
86 {% e n d b l o c k %}
Листинг student_auth/registration_form.html
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2
3 {% b l o c k c o n t e n t _ t i t l e %}
4
<h2 c l a s s=" u i ␣ c e n t e r ␣ a l i g n e d ␣ b l a c k ␣ h e a d e r ">Вход для с туд е нт о в</ h2>
5 {% e n d b l o c k %}
6
7 {% b l o c k c o n t e n t %}
75
8
9 {% i f u s e r . i s _ a u t h e n t i c a t e d %}
10
11
<div>
<b c l a s s=" h e a d e r ">Уважа емый ( ая ) <span c l a s s=" f i r s t −name">{{ u s e r . s t u d e n t .
f i r s t _ n a m e }}</ span> {{ u s e r . s t u d e n t . last_name }}</ b> , вы же уже а в т ори з о в а
ны .</ h2>
12
</ div>
13
<br />
14
<a href="{%␣ u r l ␣ ’ student_auth_logout ’ ␣%}" c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l
␣ n e g a t i v e ">< i c l a s s=" s i g n ␣ out ␣ i c o n "></ i>Выйти</ a>
15 {% e l s e %}
16
17
18
19
{% i f form . n o n _ f i e l d _ e r r o r s %}
<div c l a s s=" u i ␣ compact ␣ middle ␣ e r r o r ␣ message ">
{{ form . n o n _ f i e l d _ e r r o r s }}
</ div>
20
{% e n d i f %}
21
<div c l a s s=" middle −wrapper ">
22
<form method=" p o s t " action=" " c l a s s=" u i ␣ form ">
23
{% c s r f _ t o k e n %}
24
<div c l a s s=" f i e l d ">
25
< label>Имя поль з о в а т еля</ label>
26
<div c l a s s=" u i ␣ l e f t ␣ l a b e l e d ␣ i c o n ␣ i n p u t ">
27
<input id=" id_username " type=" t e x t " name=" username ">
28
< i c l a s s=" u s e r ␣ i c o n "></ i>
29
</ div>
30
{% i f f i e l d . username . e r r o r s %}
31
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ u i ␣ l a b e l ">
32
33
34
{{ f i e l d . username . e r r o r s }}
</ div>
{% e n d i f %}
35
</ div>
36
<div c l a s s=" f i e l d ">
37
< label>Пароль</ label>
38
<div c l a s s=" u i ␣ l e f t ␣ l a b e l e d ␣ i c o n ␣ i n p u t ">
39
<input id=" id_password " type=" password " name=" password ">
40
< i c l a s s=" l o c k ␣ i c o n "></ i>
41
</ div>
42
{% i f f i e l d . password . e r r o r s %}
43
44
<div c l a s s=" u i ␣ r e d ␣ p o i n t i n g ␣ above ␣ u i ␣ l a b e l ">
{{ f i e l d . password . e r r o r s }}
76
</ div>
45
46
{% e n d i f %}
</ div>
47
48
<button type=" submit " value="ВХОД" c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣
49
p o s i t i v e ␣ btn − l o g i n ">< i c l a s s=" s i g n ␣ i n ␣ i c o n "></ i> ВХОД</ button>
<a href="{%␣ u r l ␣ ’ s t u d e n t _ r e g i s t r a t i o n _ r e g i s t e r ’ ␣%}" c l a s s=" u i ␣ l a b e l e d ␣
50
i c o n ␣ button ␣ s m a l l ␣ i n s t a g r a m ␣ btn − r e g i s t e r ">
< i c l a s s=" e d i t ␣ i c o n "></ i> РЕГИСТРАЦИЯ
51
52
</ a>
53
<div c l a s s=" c l e a r "></ div>
54
</ form>
55
<br />
56
<a href="{%␣ u r l ␣ ’ f o r g o t −password ’ ␣%}">За были пароль или ло г ин?</ a>
57
</ div>
58
59
60
61
< script type=" t e x t / j a v a s c r i p t ">
document . getElementById ( ’ id_username ’ ) . f o c u s ( )
</ script>
62 {% e n d i f %}
63 {% e n d b l o c k %}
Листинг student_auth/login.html
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2
3 {% b l o c k c o n t e n t %}
4 < script type=" t e x t / j a v a s c r i p t ">
5
$( function () {
6
$ ( ’ . show−modal ’ ) . c l i c k ( f u n c t i o n ( ) {
7
$ ( ’ . t i n y . modal ’ ) . modal ( ’ show ’ ) ;
8
var achievement_id = $ ( t h i s ) . a t t r ( "name" ) ;
9
$ ( ’# achievement − d e l e t e ’ ) . a t t r ( ’ a c t i o n ’ , ’ d e l e t e / ’ + achievement_id ) ;
10
}) ;
11
$ ( ’ . approve ’ ) . c l i c k ( f u n c t i o n ( ) {
12
13
14
$ ( ’# achievement − d e l e t e ’ ) . submit ( ) ;
}) ;
}) ;
15 </ script>
16 {% i f not o b j e c t _ l i s t %}
17 <div c l a s s=" u i ␣ i c o n ␣ i n f o ␣ message ">
77
18
< i c l a s s=" i n f o ␣ i c o n "></ i>
19
<div c l a s s=" c o n t e n t ">
20
21
<div c l a s s=" h e a d e r "> Вы н е до б а вили ни одной з апи с и . </ div>
</ div>
22 </ div>
23 <p c l a s s=" nt −b l u e ">Щë лкнит е кнопку &l a q u o ;До б авит ь&raquo ; для до ба вл е ния но в о г о
до с тижения .</ p>
24 <br />
25 {% e l s e %}
26
27 <h2 c l a s s=" u i ␣ h e a d e r ">До с тиже ния :</ h2>
28
29 <div c l a s s=" u i ␣ t i n y ␣ modal ">
30
<div c l a s s=" h e a d e r ">Со о бще ни е</ div>
31
<div c l a s s=" c o n t e n t ">
32
<p>Вы ув е р е ны чт о хо тит е удалит ь э ту з апи с ь ?</ p>
33
</ div>
34
<div c l a s s=" a c t i o n s ">
35
<form id=" achievement − d e l e t e " action=" " method=" p o s t ">{% c s r f _ t o k e n %}
36
<div c l a s s=" u i ␣ approve ␣ button ">Да</ div>
37
<div c l a s s=" u i ␣ c a n c e l ␣ button ">Не т</ div>
38
39
</ form>
</ div>
40 </ div>
41 {% e n d i f %}
42 < !−−
TODO:
filters
−−>
43 < !−− <div c l a s s=" u i ␣ d i v i d e r "></ div> −−>
44
45
<a href="{%␣ u r l ␣ " achievement_new "␣%}">
<div c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e ␣ c r e a t e _ b u t t o n ">
46
< i c l a s s="add␣ i c o n "></ i>
47
До б а вит ь
48
49
</ div>
</ a>
50 <div c l a s s=" u i ␣ d i v i d e r "></ div>
51 <div c l a s s=" u i ␣ d i v i d e d ␣ segments ">
52
{% f o r achievement i n o b j e c t _ l i s t %}
53
<div c l a s s=" u i ␣ segment ">
54
55
56
<div c l a s s=" item ">
<div c l a s s=" c o n t e n t ">
<a c l a s s=" h e a d e r ">{{ achievement . name }}</ a>
78
57
<div c l a s s="meta">{{ achievement . achievement_type . name}}</ div>
58
<div c l a s s=" d e s c r i p t i o n ">{{ achievement . d e s c i p t i o n }}</ div>
59
60
</ div>
61
<div c l a s s=" u i ␣ c l e a r i n g ␣ d i v i d e r "></ div>
62
<a href="#">
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ r e d ␣ u i ␣ button ␣show−modal " name=" {{
63
achievement . i d }} ">Удалит ь</ div>
</ a>
64
65
<a href=" update /{{ achievement . i d }} ">
66
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ b l u e ␣ u i ␣ button ">Ре дактиро в а т ь</ div>
67
</ a>
68
69
70
<a href="show /{{ achievement . i d }} ">
71
<div c l a s s=" r i g h t ␣ f l o a t e d ␣ mini ␣ t e a l ␣ u i ␣ button ">Про смо тр</ div>
72
73
</ a>
74
<div c l a s s=" e x t r a ">
75
Да т а получ е ния : {{ achievement . obtain_date | d a t e : "d/m/Y" }}
</ div>
76
77
</ div>
78
</ div>
79
{% e n d f o r %}
80 </ div>
81 {% i f page_obj . p a g i n a t o r . num_pages > 1 %}
82 {% i n c l u d e " s t u d e n t s h i p / p a g i n a t o r . html " with page_obj=page_obj o n l y %}
83 {% e n d i f %}
84 {% e n d b l o c k %}
Листинг studentship/achievement_list.html
1 {% e x t e n d s " s t u d e n t / b a s e . html " %}
2 {% b l o c k h e a d _ i n c l u d e s %}
3 < link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / j q u e r y − u i . min . c s s ">
4 < link r e l =" s t y l e s h e e t " href=" / s t a t i c / c s s / s t u d e n t s h i p / s t u d e n t s h i p . c s s ">
5 < link
href=" / s t a t i c / c s s / s t u d e n t s h i p / d a t e p i c k e r . min . c s s " r e l=" s t y l e s h e e t ">
6 < script src=" / s t a t i c / j s / s t u d e n t s h i p / d a t e p i c k e r . min . j s "></ script>
7 < script src=" / s t a t i c / j s / s t u d e n t s h i p / i 1 8 n / d a t e p i c k e r . ru −RU. j s "></ script>
8 < style type=" t e x t / c s s ">
9
. title {
79
10
11
c o l o r : #07c ;
}
12
13
a {
14
15
c o l o r : #333 ! i m p o r t a n t ;
}
16
17
a: visited {
18
19
c o l o r : #333 ! i m p o r t a n t ;
}
20
21
a : active {
22
c o l o r : #333 ! i m p o r t a n t ;
23
}
24
. nt −red −i n d e n t {
25
c o l o r : #c33 ;
26
f o n t −s t y l e : i t a l i c ;
27
t e x t −i n d e n t : 0 ;
28
margin −top : 5px ;
29
opacity : 1;
30
}
31 </ style>
32 {% e n d b l o c k %}
33 {% b l o c k c o n t e n t %}
34 < script type=" t e x t / j a v a s c r i p t ">
35
36
$( function () {
$ ( ’ [ data − t o g g l e=" d a t e p i c k e r " ] ’ ) . d a t e p i c k e r ( {
37
l a n g u a g e : ’ ru −RU’ ,
38
format : ’ yyyy−mm−dd ’
39
}) ;
40
41
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . change ( f u n c t i o n ( ) { populateAchievementType ( t h i s ) } ) ;
42
a c t i v i t y _ t y p e s = {{ form . a c t i v i t y _ t y p e s | s a f e } } ;
43
populateActivityType () ;
44
$ ( "#id_achievement_type " ) . empty ( ) ;
45
$ ( "#id_achievement_type " ) . append ( ’<option value=" " disabled selected>Выб е ри
т е вид д е ят е льно с ти</ option> ’ ) ;
46
function populateActivityType () {
47
$ ( ’# i d _ a c t i v i t y _ t y p e ’ ) . empty ( ) ;
48
$ ( "#i d _ a c t i v i t y _ t y p e " ) . append ( ’<option value=" " disabled selected>Выб е р
80
ит е вид д е ят е льно с ти</ option> ’ ) ;
49
$ . each ( a c t i v i t y _ t y p e s , f u n c t i o n ( index , a c t i v i t y _ t y p e ) {
50
$ ( ’# i d _ a c t i v i t y _ t y p e ’ )
51
. append ( $ ( "<o p t i o n ></o p t i o n >" )
52
. attr ( " value " , activity_type . id )
53
. t e x t ( a c t i v i t y _ t y p e . name ) ) ;
54
}) ;
55
}
56
57
f u n c t i o n populateAchievementType ( e v e n t ) {
58
s e l e c t e d _ a c t i v i t y _ t y p e = $ ( "#i d _ a c t i v i t y _ t y p e ␣ o p t i o n : s e l e c t e d " ) . t e x t ( ) ;
59
$ ( "#id_achievement_type " ) . empty ( ) ;
60
$ ( "#id_achievement_type " ) . append ( ’<option value=" " disabled selected>Вы
б е рит е тип до с тиже ния</ option> ’ ) ;
61
for ( l e t activity_type of activity_types ) {
62
i f ( a c t i v i t y _ t y p e . name == s e l e c t e d _ a c t i v i t y _ t y p e ) {
63
f o r ( achievement_type o f a c t i v i t y _ t y p e . achievement_types ) {
64
$ ( ’# id_achievement_type ’ )
65
. append ( $ ( "<o p t i o n ></o p t i o n >" )
66
. a t t r ( " v a l u e " , achievement_type . i d )
67
. t e x t ( achievement_type . name )
68
);
69
}
70
}
71
}
72
73
}
}) ;
74 </ script>
75 <h1>До с тиже ни е :</ h1>
76 <form action=" " method=" p o s t " e n c t y p e=" m u l t i p a r t / form −data ">
77
{% c s r f _ t o k e n %}
78
<dl>
79
80
81
82
<div c l a s s=" f i e l d W r a p p e r ">
{% i f form . a c t i v i t y _ t y p e . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
лн е ния !
83
</ p>
84
{% e n d i f %}
85
<dt>< label for=" i d _ a c t i v i t y _ t y p e ">Вид д е ят е льно с ти :</ label></ dt>
81
86
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . a c t i v i t y _ t y p e }}</ div></dd>
87
</ div>
88
<div c l a s s=" f i e l d W r a p p e r ">
89
{% i f form . achievement_type . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
90
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
91
лн е ния !
92
</ p>
93
{% e n d i f %}
94
<dt>< label for=" id_achievement_type ">Тип до с тиже ния :</ label></ dt>
95
<dd><div c l a s s=" b lock − s e l e c t ">{{ form . achievement_type }}</ div></dd
>
96
</ div>
97
<div c l a s s=" f i e l d W r a p p e r ">
98
{% i f form . obtain_date . e r r o r s %}
99
<p c l a s s=" nt −red −i n d e n t ">
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
100
лн е ния !
101
</ p>
102
{% e n d i f %}
103
<dt>< label for=" id_obtain_date ">Да т а получ е ния :</ label></ dt>
104
<dd><input data− t o g g l e=" d a t e p i c k e r " type=" t e x t " name=" obtain_date "
value=" {{ form . obtain_date . v a l u e | d a t e : "Y−m−d" | d e f a u l t _ i f _ n o n e : " "
}} "></dd>
105
</ div>
106
<div c l a s s=" f i e l d W r a p p e r ">
107
{% i f form . s c a n . e r r o r s %}
<p c l a s s=" nt −red −i n d e n t ">
108
< i c l a s s=" i c o n ␣ warning "></ i> Эт о пол е о бя з а т е льно е для з апо
109
лн е ния !
110
</ p>
111
{% e n d i f %}
112
<dt>< label for=" id_scan ">Подт в е рждающий Докуме нт :</ label></ dt>
113
<a href=" ␣ {{ ␣ uploaded_scan . f i l e n a m e . u r l ␣ }} ␣ ">{{ uploaded_scan .
f i l e n a m e }}</ a>
114
<dd>{{ form . s c a n }}</dd>
115
{{ form . s c a n . r e a d }}
116
</ div>
117
<br>
118
<button c l a s s=" u i ␣ l a b e l e d ␣ i c o n ␣ button ␣ s m a l l ␣ p o s i t i v e " type=" submit "
82
value="Сохранить ">
< i c l a s s=" s a v e ␣ i c o n "></ i> Сохранит ь
119
</ button>
120
121
</ dl>
122 </ form>
123 {% e n d b l o c k %}
Листинг studentship/achievement_form.html
83
1/--страниц
Пожаловаться на содержимое документа