Додаток а

Текст програми

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ХАРКІВСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ РАДІОЕЛЕКТРОНІКИ

«ЗАТВЕРДЖУЮ»

керівник атестаційної роботи

асист. Урняєва І. А.

РОЗРОБКА КОМПОНЕНТІВ СИСТЕМИ ПІДТРИМКИ СПОРТИВНИХ ЗМАГАНЬ НАВЧАЛЬНОГО ЗАКЛАДУ

Текст програми

ЛИСТ ЗАТВЕРДЖЕННЯ

ГЮИК.502700.007-01 12 01-ЛЗ

РОЗРОБИВ:

ст.гр. КН 15-1

Мизніков Р. І.

2019

ЗАТВЕРДЖЕНО

ГЮИК.502700.018-01 12 01-ЛЗ

РОЗРОБКА КОМПОНЕНТІВ СИСТЕМИ ІНФОРМАЦІЙНОЇ ПІДТРИМКИ СПОРТИВНИХ ЗМАГАНЬ НАВЧАЛЬНОГО ЗАКЛАДУ

Текст програми

ГЮИК. 502700.018-01 12 01

Аркушів 8

2019

Основний код програмного засобу

<form id="template_picture_form">

<input type='hidden' name='base_64' id='picture_base_64'>

<input type='hidden' name='template_id' value='9' id='template_id'>

<input type='hidden' name='template_class_name' value='template_fourteen' id='template_class_name'>

<div class='main_container' id='main_container'>

<div class='template_fourteen_container htmlForTranscode' id='main_background'>

<%= yield %>

<div class='template_image_container clickable' id='template_image_wrapper'>

<img src='/assets/template_fourteen_image_placeholder.png'

class='moveable_margin template_background_image' id='template_image'>

</div>

<div class='overlay'>

<div class='info_container'>

<p id='legend_text' class='clickable moveable' data-top='-17px'>

Football - Final Score

</p>

<div class='team_one'>

<span class='clickable moveable' id='team_one_name'>

chaminade

</span>

<span class='clickable moveable' id='team_one_score'>

12

</span>

</div>

<div class='team_two'>

<span class='clickable moveable' id='team_two_name'>

crespi

</span>

<span class='clickable moveable' id='team_two_score'>

12

</span>

</div>

</div>

<div class='logo_wrapper clickable moveable' data-top='315px' data-left='10px'>

<img src='/assets/template_fourteen_logo_placeholder.png' draggable='false' id='logo'>

</div>

<div class='hashtag_wrapper clickable moveable' data-top='315px' data-left='448px'>

<p id='hashtag'>

@Chaminadesports

</p>

</div>

</div>

</div>

<button type='button' class='hide_all_over_image hide_all_over_image_template_fourteen' style='bottom: initial;' data-target="main_background" data-display-as='flex'>

Edit Background Picture

</button>

</div>

<div class='next_prev_buttons_container'>

</div>

<div id="response_message"></div>

</form>

<div class="registration_page registration_page--login_page">

<div class="registration_page--logo_container">

<img class="registration_page--logo_container--image" src="/assets/gipperLogo.svg">

</div>

<div class="registration_page--wrapper">

<div class="registration_page--wrapper--header">

<p class="registration_page--wrapper--header--heading">

Sign in

</p>

<p class="registration_page--wrapper--header--text">

We make it quick & easy for schools to create high quality, engaging graphics.

</p>

</div>

<div class="registration_page--wrapper--form">

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

<div class="registration_page--wrapper--form--block_fields">

<%= f.label :email, class: 'registration_page--wrapper--form--block_fields--label' %>

<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'registration_page--wrapper--form--block_fields--input' %>

</div>

<div class="registration_page--wrapper--form--block_fields">

<%= f.label :password, class: 'registration_page--wrapper--form--block_fields--label' %>

<%= f.password_field :password, autocomplete: "current-password", class: 'registration_page--wrapper--form--block_fields--input' %>

<%= link_to 'Forgot Password?', new_user_password_path, class: 'registration_page--wrapper--form--block_fields--link_password' %>

</div>

<% if devise_mapping.rememberable? -%>

<div class="registration_page--wrapper--form--block_remember">

<%= f.check_box :remember_me %>

<%= f.label :remember_me, class:'registration_page--wrapper--form--block_remember--label' %>

</div>

<% end -%>

<div class="registration_page--wrapper--form--common_block">

<%= f.submit "Sign In", class: 'registration_page--wrapper--form--common_block--button' %>

<%= link_to 'Create Account', new_user_registration_path, class: 'registration_page--wrapper--form--common_block--link' %>

</div>

<% end %>

</div>

</div>

</div>

<% if linked.empty?%>

<a id="share_twitter_button" class="social_sharing_twitter_link_button" href=<%=user_twitter_omniauth_authorize_url(force_login:true)%>>

<% else %>

<a id="share_twitter_button" class="social_sharing_twitter_link_button <%= linked %>" data-method="put" href=<%=unlink_social_account_users_path(social: 'twitter')%>>

<% end %>

<img src='/assets/profile-twitter-icon.svg'>

<p>Twitter</p>

</a>

def self.duplicate(mod, controllers = 'Controllers', &blk)

dupe.tap do |duplicated|

mod.module_eval %{ module #{ controllers }; end } if controllers

mod.module_eval %{ Action = Hanami::Action.dup }

duplicated.module_eval %{

configure do

action_module #{ mod }::Action

end

}

duplicated.configure(&blk) if block_given?

end

end

# Framework loading entry point

#

# @return [void]

#

# @since 0.3.0

def self.load!

configuration.load!

end

end

end

import ActiveElementsBlocker from "./active_elements_blocker";

import Base64toBlob from "./base64_to_blob";

import html2canvas from "./html_to_canvas";

import ActiveStorageUploader from "./uploaders/active_storage_uploader";

import { showErrorMessage, showSuccessMessage } from "./common_helpers";

import ChangeElementOpacity from "./editor/change_elements_opacity";

import IsolateToggler from "./editor/isolate_toggler";

import DeviceChecker from "./device_checker";

import BackgroundImageIds from "./presets/background_image_ids";

export default class PictureFromTemplateSaver {

constructor(formForSendData, shareAfterSave = false, blocker) {

this.elementsToBeSplitted = Array.from(

document.getElementsByClassName("need_split_to_blocks")

);

this.imagesForTranscode = Array.from(

document.getElementsByClassName("htmlForTranscode")

);

this.splittingPlaceholders = Array.from(

document.getElementsByClassName("placeholder_for_splitting")

);

this.outerGlowText = Array.from(

document.getElementsByClassName("outer_glow_text")

);

this.blocker = blocker || new ActiveElementsBlocker();

this.templateType = document.getElementById("template_class_name").value;

this.promises = [];

this.formForSendData = formForSendData;

this.shareAfterSave = shareAfterSave;

}

savePicture() {

if (DeviceChecker.isMobileDevice()) {

this._createCloneForTranscode();

}

ChangeElementOpacity.changeOpacity("");

IsolateToggler.offAllToggles(true);

this.outerGlowText.forEach(glowText => {

glowText.style.opacity = "0.2";

});

this._splitElementsIfNeed();

this.promises = this.imagesForTranscode.map(image => {

return this._createTranscodingInstance(image);

});

Promise.all(this.promises).then(values => {

values.forEach(canvas => {

document.getElementById("picture_base_64").value = canvas.toDataURL(

"image/png"

);

const uploader = new ActiveStorageUploader(this._blobFromBase());

uploader.addProgress();

uploader.upload.create((error, blob) => {

if (!error) {

this._submitPictureToServer(blob);

}

});

});

});

}

_createCloneForTranscode() {

const mainContainer = document.getElementById("main_container");

let clone = mainContainer.cloneNode(true);

mainContainer.style.cssText = "position: relative; left: -9999px;";

mainContainer.classList.remove("mobile_scale");

clone.style.cssText = "position: absolute; top: 1px;";

clone.id = "clone_template";

mainContainer.parentNode.appendChild(clone);

BackgroundImageIds.call().forEach(id => {

const bgImage = document.getElementById(id);

if (bgImage) {

this._cloneCanvas(bgImage.parentElement.querySelector("canvas"), id);

}

});

document

.querySelector("#clone_template #main_background")

.classList.remove("htmlForTranscode");

}

_cloneCanvas(oldCanvas, id) {

console.log(id);

const newCanvas = document

.getElementById("clone_template")

.querySelector(`#${id}`)

.parentNode.querySelector("canvas");

var context = newCanvas.getContext("2d");

newCanvas.width = oldCanvas.width;

newCanvas.height = oldCanvas.height;

context.drawImage(oldCanvas, 0, 0);

}

_addHiddenAttribute(blob) {

const hiddenField = document.createElement("input");

hiddenField.setAttribute("type", "hidden");

hiddenField.setAttribute("value", blob.signed_id);

hiddenField.name = "picture_file";

this.formForSendData.appendChild(hiddenField);

}

_submitPictureToServer(blob) {

this._addHiddenAttribute(blob);

this.outerGlowText.forEach(glowText => {

glowText.style.opacity = "0.3";

});

this.elementsToBeSplitted.forEach(element => {

element.style.display = "inline";

});

this.splittingPlaceholders.forEach(element => {

element.style.display = "none";

});

Array.from(document.getElementsByClassName("splitting_result")).forEach(

element => {

element.remove();

}

);

this._sendFormData();

}

_sendFormData() {

const formData = new FormData(this.formForSendData);

const xhr = new XMLHttpRequest();

let blocker = this.blocker;

let that = this;

xhr.open("POST", "/api_create_picture");

xhr.onreadystatechange = function() {

const response =

xhr.responseText != "" ? JSON.parse(xhr.responseText) : {};

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

if (that.shareAfterSave) {

that._openShareModal(response.picture_id);

} else {

that._downloadFile(response.picture_id);

}

} else {

showErrorMessage();

}

blocker.unblock();

};

xhr.send(formData);

}

_openShareModal(pictureId) {

let formContentPlaceholder = document.getElementById("twitter_picture");

formContentPlaceholder.value = pictureId;

document.getElementById("publish_modal").style.display = "flex";

}

_downloadFile(pictureId) {

const linkToSave = document.createElement("A");

linkToSave.style.display = "none";

linkToSave.href = `/send_picture?id=${pictureId}`;

document.body.appendChild(linkToSave);

linkToSave.click();

document.body.removeChild(linkToSave);

}

_blobFromBase() {

return new Base64toBlob(

document.getElementById("picture_base_64").value.split(",")[1],

"image/png",

null

).getBlob();

}

_proxyImageLink() {

return `${location.origin}/pictures/proxy_image`;

}

_createTranscodingInstance(image) {

let options = {

proxy: this._proxyImageLink(),

width: image.offsetWidth,

height: image.offsetHeight,

scale: 3,

logging: false,

imageTimeout: 0,

backgroundColor: "#333",

onclone: () => {

if (DeviceChecker.isMobileDevice()) {

const mainContainer = document.getElementById("main_container");

mainContainer.style.left = "0";

mainContainer.classList.add("mobile_scale");

document.getElementById("clone_template").remove();

}

this._removeCanvas();

}

};

return html2canvas(image, options);

}

/**

* Need for remove canvas after clone node.

*/

_removeCanvas() {

BackgroundImageIds.call().forEach(bgImageId => {

const bgImage = document.getElementById(bgImageId);

if (bgImage) {

bgImage.parentElement.querySelector("canvas").remove();

bgImage.style.display = "block";

}

});

}

_splitElementsIfNeed() {

if (this.elementsToBeSplitted.length > 0) {

this.elementsToBeSplitted.forEach(elementForSplitting => {

elementForSplitting.style.display = "none";

const words = elementForSplitting.innerText.split(" ");

const placeholderForCalculateWidth = document.getElementById(

elementForSplitting.dataset.placeholder

);

placeholderForCalculateWidth.style.display = "inline";

let backgroundElementColor = elementForSplitting.style.backgroundColor;

let textElementColor = elementForSplitting.style.color;

let fontSizeElement = elementForSplitting.style.fontSize;

placeholderForCalculateWidth.style.fontSize = fontSizeElement;

placeholderForCalculateWidth.innerText = `${words[0]} `;

const currentHeight = placeholderForCalculateWidth.offsetHeight;

let pElements = [];

let wordsToAdd = [];

const currentParentElement = elementForSplitting.parentElement;

wordsToAdd[0] = words[0];

words.forEach((word, index) => {

if (index > 0) {

placeholderForCalculateWidth.innerHTML += `${word} `;

if (currentHeight < placeholderForCalculateWidth.offsetHeight) {

pElements.push(

this._elementAfterSplitting(

wordsToAdd,

backgroundElementColor,

textElementColor,

fontSizeElement

)

);

placeholderForCalculateWidth.innerText = `${word} `;

wordsToAdd = [];

wordsToAdd[0] = word;

} else {

wordsToAdd[wordsToAdd.length] = word;

}

}

});

placeholderForCalculateWidth.innerHTML = "";

pElements.push(

this._elementAfterSplitting(

wordsToAdd,

backgroundElementColor,

textElementColor,

fontSizeElement

)

);

pElements.forEach(element => {

currentParentElement.appendChild(element);

});

});

}

}

_elementAfterSplitting(

wordsToAdd,

backgroundElementColor,

textElementColor,

fontSizeElement

) {

let newElement = document.createElement("p");

newElement.innerHTML = wordsToAdd.join(" ");

newElement.classList.add("splitting_result");

newElement.style.backgroundColor = backgroundElementColor;

newElement.style.color = textElementColor;

newElement.style.fontSize = fontSizeElement;

return newElement;

}

}

ДОДАТОК Б

Керівництво користувача

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ХАРКІВСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ РАДІОЕЛЕКТРОНІКИ

«ЗАТВЕРДЖУЮ»

керівник атестаційної роботи

асист. Урняєві І. А.

РОЗРОБКА КОМПОНЕНТІВ ПІДСИСТЕМИ ТЕМАТИЧНОГО АНАЛІЗУ

СПІЛЬНОТ У СОЦІАЛЬНИХ МЕРЕЖАХ

Керівництво користувача

ЛИСТ ЗАТВЕРДЖЕННЯ

ГЮИК.502700.007 ИЗ

РОЗРОБИВ:

ст.гр. КН-15-1

Мизніков Р. І.

2019

ЗАТВЕРДЖЕНО

ГЮИК.502700.022 ИЗ

РОЗРОБКА КОМПОНЕНТІВ ПІДСИСТЕМИ ТЕМАТИЧНОГО АНАЛІЗУ

СПІЛЬНОТ У СОЦІАЛЬНИХ МЕРЕЖАХ

«Керівництво користувача»

ГЮИК.502700.022 ИЗ

Аркушів 11

2019

ЗМІСТ

ВСТУП 87

Б.1 ПРИЗНАЧЕННЯ ТА УМОВИ ЗАСТОСУВАННЯ 88

Б.2 ОПИС ОПЕРАЦІЙ 89

ВСТУП

У ході виконання атестаційної роботи був розроблений веб-сайт для створення оголошень про спортивні змагання. Данний програмний засіб може бути викорисатний для сповіщення про спортивні події навчального закладу; для розміщення оголошень у соціальних мережах Facebook, Twitter; для створення онлайн розсилки за тематикою.

В можливості системи входять наступні функції:

• реєстрація користувача;

• додавання користувачем інформації про себе;

• підтвердження адміністратором інформації про користувача;

• запрошення адміністратором спортсмена для участі у спортивних змаганнях;

• підтвердження користувачем участі у змаганнях;

• автоматизоване створення турнірної таблиці змагань.

Перед початком роботи з розробленим сайтом, необхідно ознайомитись з керівництвом користувача, щоб повністю розуміти, як використовувати ту чи іншу функцію.