Материал: Мизніков Діплом Бакалавр

);

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; для створення онлайн розсилки за тематикою.

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

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

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

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

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

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

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

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

Б.1 Призначення та умови застосування

Розроблений програмний засіб створено з ціллю отримання інформації про спортивні заходи з конкретного виду спорту, а також автоматизації роботи організаторів змагань.

Кожен користувач має можливість переглядати оголошення про спортивні заходи.

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

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

Розроблений програмний засіб є веб-сайтом. З цього слідує, що для отримання доступу до функцій цього ресурсу користувач має бути підключений до мережі Internet.

Б.2 Опис операцій

В даному розділі описується покрокове керівництво для того для того, щоб користувач веб-сайту розумів, як використовувати всі доступні функції.

При переході на сайт, користувач потрапляє на сторінку авторизації, де повинен внести дані, заповнені при реєстрації аккаунту. На рисунку 1.1 представлена сторінка авторизації.

Рис. 1.1 – Сторінка авторизації

Для того щоб створити новий аккаунт, користувач повинен натиснути на кнопку «Create account». На риснку 1.2 представлена сторінка реєстрації.

Рис. 1.2 – Сторінка реєстрації

Для входу до системи користувачеві, необхідно натиснути на кнопку «Sign in», що знаходиться на головній сторінці, представленій на рисунку 1.1. На рисунку 1.3 представлена головна сторінка веб сайту.

Рис. 1.3 – Головна сторінка сайту

На головній сторінці сайту, користувач бачить макети, у якості головного контенту, посилання до галіреї оголошень, посилання до налаштувань профіля. Крім цього користувач може скористуватися пошуком по ключовим словам, та по тегам. На рисунку 1.4 представлені результати пошуку за ключивими словами «final score» та за тегом «Athletics».

Рис. 1.4 – Приклад результату пошуку макету

Обравши потрібний макет, користувач потрапляє до сторінки створення оголошення. На рисунку 1.5 представлена сторінка створення оголошення.

Рис. 1.5 – Сторінка створення оголошення

В лівій частині сайта знаходиться сайдбар, де користувач повинен внести інформацію про вибрану спортивну подію. Інформація, яку необхідно вносити залежить від макету оголошення. Якщо це результат спортивної подію, то необхідно внести:

• назви команд суперників;

• ключові моменти, наприклад, хто забив гол і на якій хвилині;

• кінцевий рахунок;

• назву оголошення;

• додатковий текст.

Якщо це оголошення про дату проведення спортивної подію, то потрібно вносити іншу інформацію.

Коли користувач натискає на кнопку «Publish», що знаходиться зверху, він потрапляє до кінцевого вигляду оголошення. На риснку 1.6 представлений кінцевий вигляд оголошення.

Рис. 1.6 – Оголошення сформоване системою