Разработка веб-приложения - ежедневника (менеджер задач, "список дел") с функцией голосового управления
Описание файловой структуры веб-приложения - ежедневника с функцией голосового управления. Интерфейс с изображениями, отображающими процесс работы приложения. Примеры кода с пояснениями. Общее описание иерархии и взаимодействия компонентов приложения.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 17.05.2018 |
| Размер файла | 989,2 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
<td width="100%">{item.name}</td>
</tr>
)
}
}
export default TodoListItem;
TodoListItemEdit.jsx:
import React from 'react';
class TodoListItemEdit extends React.Component {
constructor(props) {
super(props);
}
handleSave() {
this.props.onSave({
id: this.props.item.id,
name: this.refs.name.value,
date: this.props.item.date,
time: this.refs.time.value,
done: this.props.item.done
});
this.props.onCancel();
}
componentDidMount() {
this.refs.name.focus();
}
render() {
return (
<tr>
<td colSpan="2" className="form-horizontal">
<div className="form-group">
<div className="col-sm-4">
<input type="time" defaultValue={this.props.item.time}
ref="time" className="form-control" tabIndex="2">
</input>
</div>
<div className="col-sm-8">
<input type="text" defaultValue={this.props.item.name}
ref="name" className="form-control" placeholder="Имя..." tabIndex="1">
</input>
</div>
</div>
<div className="form-group">
<div className="col-sm-4">
<input type="button" defaultValue="Отмена" tabIndex="3"
className="btn btn-default form-control"
onClick={this.props.onCancel}>
</input>
</div>
<div className="col-sm-8">
<input type="button" defaultValue="Сохранить" tabIndex="4"
className="btn btn-success form-control"
onClick={this.handleSave.bind(this)}>
</input>
</div>
</div>
</td>
</tr>
)
}
}
export default TodoListItemEdit;
TodoStore.js:
import { combineReducers } from 'redux';
import { createStore } from 'redux';
const todosReducer = (state = [], action) => {
switch (action.type) {
case 'TODOS_LOAD':
fetch('/todos/get', {
credentials: 'same-origin',
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({date: action.date})
})
.then((response) => {
return response.json();
})
.then((data) => {
store.dispatch({
type: 'TODOS_LOADED',
data: data
});
})
.catch(alert);
return state;
case 'TODOS_LOADED':
return action.data;
case 'TODOS_ADD':
fetch('/todos/add', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify(action.newItem)
})
.catch(alert);
return state;
case 'TODOS_CHANGE':
fetch('/todos/change', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify(action.item)
})
.catch(alert);
return state;
case 'TODOS_DELETE':
fetch('/todos/delete', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({id: action.id})
})
.catch(alert);
return state;
case 'TODOS_DELETE_DONE':
fetch('/todos/delete/done', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: ''
})
.catch(alert);
return state;
case 'TODOS_DELETE_ALL':
fetch('/todos/delete/all', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: ''
})
.catch(alert);
return state;
case 'TODOS_DELETE_OLD':
fetch('/todos/delete/old', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({date: action.date})
})
.catch(alert);
return state;
case 'TODOS_DELETE_ON_DAY':
fetch('/todos/delete/onday', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({date: action.date})
})
.catch(alert);
return state;
default:
return state;
}
}
const dateReducer = (state = new Date(), action) => {
switch (action.type) {
case "DATE_NEXT_DAY":
return new Date(state.setDate(state.getDate() + 1));
case "DATE_SET":
return new Date(action.date);
case "DATE_SET_MONTH":
return new Date(state.setMonth(action.month));
default:
return state;
}
}
const todoApp = combineReducers({
todos: todosReducer,
date: dateReducer
});
const store = createStore(todoApp);
export default store;
TodoStoreActions.js:
export function todosLoad(date) {
return {
type: 'TODOS_LOAD',
date: date
}
}
export function todosToggle(id) {
return {
type: 'TODOS_TOGGLE',
id: id
}
}
export function todosAdd(newItem) {
return {
type: 'TODOS_ADD',
newItem: newItem
}
}
export function todosChange(item) {
return {
type: 'TODOS_CHANGE',
item: item
}
}
export function todosDelete(id) {
return {
type: 'TODOS_DELETE',
id: id
}
}
export function todosDeleteDone() {
return {
type: 'TODOS_DELETE_DONE'
}
}
export function todosDeleteAll() {
return {
type: 'TODOS_DELETE_ALL'
}
}
export function todosDeleteOld(date) {
return {
type: 'TODOS_DELETE_OLD',
date: date
}
}
export function todosDeleteOnDay(date) {
return {
type: 'TODOS_DELETE_ON_DAY',
date: date
}
}
export function dateSet(day) {
return {
type: 'DATE_SET',
date: day
}
}
export function dateNextDay() {
return {
type: 'DATE_NEXT_DAY'
}
}
export function dateSetMonth(month) {
return {
type: 'DATE_SET_MONTH',
month: month
}
}
TodoVoiceControl.jsx:
import React from 'react';
import '../styles/voice-control';
class TodoVoiceControl extends React.Component {
constructor(props) {
super(props);
this.state = {speaking: false};
}
handleClick() {
var self = this;
ya.speechkit.recognize({
doneCallback: function (text) {
self.refs.text.innerHTML = "Вы сказали: " + text;
self.props.onControl(text);
},
initCallback: function () {
self.refs.text.innerHTML = "Говорите...";
},
errorCallback: function (err) {
self.refs.text.innerHTML = "Ошибка: " + err;
},
model: 'freeform', // Model name for recognition process
lang: 'ru-RU', //Language for recognition process
apiKey: '570fd671-7f9a-4555-be3a-3af792c9d4b2'
});
}
render() {
return (
<div>
<div className="voice-button" onClick={this.handleClick.bind(this)}>
<i className="glyphicon glyphicon-volume-up"></i>
</div>
<span ref="text"></span>
</div>
)
}
}
export default TodoVoiceControl;
todolist.scss:
table#app {
td {
vertical-align: top;
}
}
.todo-alert {
position: absolute;
right: 30px;
bottom: 0px;
width: 300px;
text-align: center;
vertical-align: middle;
padding: 30px;
}
.to-do-list {
min-width: 400px;
font-size: 20px;
.form-group:last-child {
margin-bottom: 0;
}
table {
width: 100%;
}
tr {
td, th {
padding: 10px;
}
}
table tr {
position: relative;
&:hover {
cursor: pointer;
background: #ebebeb;
.todo-item-control {
visibility: visible;
}
}
td {
position: relative;
}
&.success td {
text-decoration: line-through;
background: #5cb85c !important;
color: #fff;
}
.todo-item-control {
position: absolute;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
right: 0;
top: 0;
visibility: hidden;
span {
top: 0;
margin-right: 10px;
}
}
.todo-item-time {
text-align: center;
min-width: 72px;
vertical-align: middle !important;
span.glyphicon {
vertical-align: middle;
font-size: 25px;
top: 0px;
}
}
}
.task-add-block {
padding: 0 10px;
input {
margin-top: 15px;
}
}
}
.calendar, .right-sidebar, .calendar-date-nav {
border: solid #ccc 1px;
border-radius: 6px;
}
.calendar, .to-do-list, .right-sidebar, .calendar-date-nav {
margin: 30px;
}
.calendar {
.DayPicker-Body {
font-size: 16px;
.DayPicker-Day {
padding: 7px;
&:hover:not(.DayPicker-Day-selected) {
background: #ccc;
}
}
}
}
.right-sidebar, .calendar-date-nav {
padding: 20px;
}
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
.login-form {
width: 400px;
padding: 30px 30px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid #ccc 1px;
border-radius: 6px;
}
.DayPicker-Day-active {
background: lightblue;
}
voice-control.scss:
.voice-button {
position: relative;
margin: 40px;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: 50%;
font-size: 30px;
box-shadow: 0 3px 20px rgba(0, 0, 0, .25),
inset 0 2px 0 rgba(255, 255, 255, .6),
0 2px 0 rgba(0, 0, 0, .1),
inset 0 0 20px rgba(0, 0, 0, .1);
&:hover {
box-shadow: inset 0 0 20px rgba(0, 0, 0, .2),
0 2px 0 rgba(255, 255, 255, .4),
inset 0 2px 0 rgba(0, 0, 0, .1);
}
.glyphicon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="toDoListApp"></div>
<script type="text/javascript" src="//download.yandex.ru/webspeechkit/webspeechkit-1.0.0.js"></script>
<script type="text/javascript" src="//download.yandex.ru/webspeechkit/webspeechkit-settings.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="scripts/bundle.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<form action="/login" method="post" class="login-form">
<div class="form-group">
<label for="username">Пользователь:</label>
<input id="username" type="text" name="username" class="form-control" placeholder="Имя..."/>
</div>
<div class="form-group">
<label for="password">Пароль:</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Пароль..." />
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</form>
<script>document.forms[0].username.focus();</script>
</body>
</html>
export.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
<script type="text/javascript" src="https://rawgithub.com/nwcell/ics.js/master/ics.deps.min.js"></script>
</head>
<body style="padding: 30px;">
<a class="btn btn-primary" href="/">Вернуться на главную</a>
<div class="btn btn-primary" onclick="loadCSI()">Экспорт в CSI</div>
<script>
function loadCSI() {
fetch('/todos/get/all', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'same-origin'
}).then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
var cal = ics();
for (var i in data) {
var d = new Date(data[i].date);
var dstring = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
if (data[i].time) dstring += ' ' + data[i].time;
console.log(dstring);
cal.addEvent(data[i].name, ' ', ' ', dstring, dstring);
}
cal.download();
})
.catch(alert);
}
</script>
</body>
</html>
Размещено на Allbest.ru
...Подобные документы
Разработка консольного приложения: описание и сценарий использования программы, интерфейс пользователя. Поэтапное описание создание кода компьютерной игры "Крестики нолики". Функциональные и нефункциональные требования, описание исключительных ситуаций.
методичка [819,6 K], добавлен 12.05.2013Описание технологии asp.net. Страницы веб-приложения, тестирование системы. Описание функциональной, динамической модели системы. Диаграммы вариантов использования, последовательности, база данных приложения. Реализация программы, интерфейс, тестирование.
курсовая работа [3,2 M], добавлен 30.01.2013Мультимедийное представление информации. Разработка структуры сайта, макетов страниц, серверной логики и компьютерного кода, интерфейса. Описание шагов для размещения презентации в сети интернет. Затраты на разработку приложения и экономический эффект.
дипломная работа [539,0 K], добавлен 18.10.2015Создание многоуровневого приложения с Web-интерфейсом выставления оценки фильму и просмотра оценок других пользователей. Клиентская часть приложения. Разработка многопользовательского веб-приложения на ASP.NET MVC 3 с разграничением доступа к данным.
курсовая работа [949,7 K], добавлен 22.02.2015Назначение и возможности разработанного приложения для контроля активности сетевых и периферийных устройств предприятия. Язык программирования Java. Распределенные многоуровневые приложения. Структура базы данных, интерфейс разработанного приложения.
курсовая работа [1,0 M], добавлен 16.12.2012Описание визуальных компонентов. Использование чужеродных компонентов-CTIVEX, компонент Grid. Набор свойств, которые имеет каждый визуальный компонент, их установка программно или при проектировании приложения. Примеры приложения с компонентами.
реферат [976,6 K], добавлен 19.10.2008Основные преимущества и возможности объектно-ориентированного языка программирования С#. Руководство пользователя: установка приложения, эксплуатация ежедневника, назначение полей, кнопок и пунктов меню. Руководство программиста. Событие элемента Timer.
курсовая работа [4,5 M], добавлен 16.08.2012Основные инструменты построения Web-приложения. Язык сценариев PHP. Системный анализ предметной области базы данных. Коды SQL запросов на создание таблиц. Разработка Web-приложения. Описание функциональности модулей. Система управления содержимым статей.
курсовая работа [4,8 M], добавлен 28.04.2014Общее определение JavaScript-библиотеки, виды библиотек. Создание клиентского приложения с использованием одного из существующий JS-фреймворков. Значение, виды и выбор фреймворка. Выбор приложения и его тематики. Написание программного кода, итоги работы.
курсовая работа [545,8 K], добавлен 21.12.2013Создание приложения для получения информации о расписании движения междугороднего транспорта Владимирской области. Параметры совместимости приложения с различными версиями Android. Схема взаимодействия между классами. Описание внешнего вида интерфейса.
контрольная работа [2,5 M], добавлен 17.02.2016Общая схема работы приложения Android. Разработка обучающего приложения для операционной системы Android, назначение которого - развитие речи посредством произнесения скороговорок. Описание компонентов разработанного приложения, его тестирование.
дипломная работа [1,2 M], добавлен 04.02.2016Спецификация требований к разрабатываемому приложению. Разработка структурной схемы интерфейса. Описание алгоритма шифрования DES. Разработка программного кода приложения "DES". Проведение исследования основных шагов для генерации ключей и шифрования.
курсовая работа [398,4 K], добавлен 13.12.2022Основные концепции разработки приложения в трёхуровневой архитектуре. Проектное решение, реализующее модель реляционной БД. Спецификация на разработку интерфейса. Описание выполнения транзакций прибытия и убытия судна. Инсталляционные файлы приложения.
курсовая работа [4,0 M], добавлен 26.12.2011Проектирование вариантов использования приложения. Анализ существующей версии приложения. Обоснование выбора инструментальных программных средств. Проектирование интерфейса пользователя. Адаптация под мобильные устройства. Описание программного продукта.
курсовая работа [2,8 M], добавлен 25.06.2017Анализ моделируемого приложения и постановка задачи. Диаграмма прецедентов, деятельности объектов и состояния классов. Разработка приложения-игры, выбор языка программирования и среды для разработки проекта, интерфейс приложения и ресурсы проекта.
курсовая работа [308,5 K], добавлен 14.10.2011Реализация проекта по оптимизации отделений почтовой связи. Направления деятельности в области кадровой политики. Автоматизация обработки получаемой техническим отделом информации. Разработка приложения клиент-сервер. Описание клиентского приложения.
курсовая работа [34,3 K], добавлен 07.08.2013Общее описание разрабатываемого приложения, его актуальность и сферы практического применения. Выбор среды разработки и языка программирования, 3D-движка. Архитектура приложения, интерфейса и его главных элементов, взаимодействие с пользователем.
дипломная работа [317,5 K], добавлен 10.07.2017Разработка приложения, которое будет выполнять функции показа точного времени и точной даты. Определение дополнительных функций разработанного приложения. Рассмотрение основных этапов создания программного продукта. Результаты тестирования приложения.
курсовая работа [2,2 M], добавлен 14.04.2019Описание приложения в виде пользовательского сценария. Проектирование обмена сообщениями между модулями. Разработка общей структуры приложения. Обзор структуры файлов. Разработка получения данных со страницы. Характеристика результата работы программы.
дипломная работа [1,5 M], добавлен 22.03.2018Описание предметной области. Характеристика программных средств. Описание компонентов, интерфейс программы. Описание процедур и функций. Вызов и загрузка программы. Испытание методом белого и черного ящика на ошибки кода программного приложения.
курсовая работа [2,2 M], добавлен 26.04.2015
