341 lines
16 KiB
HTML
341 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Storage Service</title>
|
||
<script src="https://kit.fontawesome.com/008e1ef4e8.js" crossorigin="anonymous"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Шаблон верхнего меню -->
|
||
<template id="main-menu">
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container-fluid">
|
||
<div class="Logo__box">
|
||
</div>
|
||
<a class="h3 text-light navbar-brand text-wrap m-0" href="/">Storage Service</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
|
||
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" aria-current="page" href="/">Главная</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="/api">Список хранилищ</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="/logs">Журнал</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
|
||
<!-- Шаблон карточек на главной-->
|
||
<template id="main-statistic">
|
||
<div class="card-group mt-2 justify-content-center">
|
||
<div class="card bg-warning mb-3 ml-3" style="max-width: 18rem;">
|
||
<div class="card-header h5">Статистика</div>
|
||
<div class="card-body">
|
||
<div class="card-title h5 row">
|
||
<div class="col-sm-7 w-auto pr-0">Хранилищ:</div>
|
||
<div class="col-sm-2 ml-auto w-auto">0</div>
|
||
</div>
|
||
<div class="card-title h5 row">
|
||
<div class="col-sm-7 w-auto pr-0">Сервисов:</div>
|
||
<div class="col-sm-2 ml-auto w-auto">0</div>
|
||
</div>
|
||
<div class="card-title h5 row">
|
||
<div class="col-sm-7 w-auto pr-0">Авторов:</div>
|
||
<div class="col-sm-2 ml-auto w-auto">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card text-body bg-info mb-3 ml-3" style="max-width: 18rem;">
|
||
<div class="card-header h5">Ошибки</div>
|
||
<div class="card-body">
|
||
<div class="card-title h5 row ">
|
||
<div class="col-sm-10 w-auto pr-0">Критические:</div>
|
||
<div class="col-sm-2 ml-auto w-auto">0</div>
|
||
</div>
|
||
<div class=" card-title h5 row">
|
||
<div class="col-sm-10 w-auto pr-0">Ошибки запросов:</div>
|
||
<div class="col-sm-2 ml-auto w-auto">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон содержимого главной-->
|
||
<template id="main-content">
|
||
<div class="d-flex justify-content-center m-0">
|
||
<p class="h5 text-center text-wrap m-0 w-50">Добро пожаловать в приложение Storage Service</p>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон контейнера страниц-->
|
||
<template id="page-container">
|
||
<div class="PageContainer"></div>
|
||
</template>
|
||
<!-- Шаблон кнопки-->
|
||
<template id="button">
|
||
<button type="button" class="btn btn-outline-primary"></div>
|
||
</template>
|
||
|
||
<!-- Шаблон страниц -->
|
||
<template id="page">
|
||
<div class="Page"></div>
|
||
</template>
|
||
|
||
<!-- Шаблон Modal -->
|
||
<template id="universal-modal">
|
||
<div class="Modal">
|
||
<div class="Modal__window modal">
|
||
<div class="Modal__container modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"></h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body"></div>
|
||
<div class="modal-footer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон универсальной таблицы -->
|
||
<template id="uni-table">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-hover">
|
||
<thead>
|
||
<tr></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</template>
|
||
<!-- Шаблон колонки заголовка универсильной таблицы -->
|
||
<template id="uni-table-th">
|
||
<th></th>
|
||
</template>
|
||
<!-- Шаблон строки универсальной таблицы -->
|
||
<template id="uni-table-row">
|
||
<tr></tr>
|
||
</template>
|
||
|
||
<!-- Шаблон пагинации -->
|
||
<template id="pagination">
|
||
<nav aria-label="Page navigation example">
|
||
<ul class="pagination justify-content-center"></ul>
|
||
</nav>
|
||
</template>
|
||
|
||
<!-- Шаблон фильтра серверных логов страницы logs -->
|
||
<template id="logs-filters">
|
||
<form class="row p-3 m-0">
|
||
<div class="col-12 col-xl-10">
|
||
<div class="row">
|
||
<!-- Общий фильтр -->
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-type" class="form-label">Тип журнала</label>
|
||
<select class="form-select" id="logs-filter-type"></select>
|
||
</div>
|
||
<!-- Фильтры для таблицы серверных ошибок -->
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-log-type" class="form-label">Тип записи</label>
|
||
<input type="text" class="form-control" id="logs-filter-log-type" placeholder="Введите текст">
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-message" class="form-label">Сообщение</label>
|
||
<input type="text" class="form-control" id="logs-filter-message" placeholder="Введите текст">
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-trace" class="form-label">Стек</label>
|
||
<input type="text" class="form-control" id="logs-filter-trace" placeholder="Введите текст">
|
||
</div>
|
||
<!-- Фильтры для таблицы клиентских запросов -->
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-type" class="form-label">Результат запроса</label>
|
||
<input type="text" class="form-control" id="logs-filter-request-type"
|
||
placeholder="Введите текст">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-xl-2 d-flex align-items-end">
|
||
<button type="submit" class="btn btn-primary mb-3">Поиск</button>
|
||
</div>
|
||
</form>
|
||
</template>
|
||
|
||
<!-- Шаблон кнопки -->
|
||
<template id="test-button">
|
||
<button type="button" class="btn btn-primary">Проверка сборки</button>
|
||
</template>
|
||
<!-- Шаблон колонки таблицы -->
|
||
<template id="table-column">
|
||
<th scope="col" class="Table__column"></th>
|
||
</template>
|
||
<!-- Шаблон строки таблицы -->
|
||
<template id="table-row">
|
||
<tr class="Table__body-row">
|
||
<th class="Body__row-index"></th>
|
||
</tr>
|
||
</template>
|
||
<!-- Шаблон панели фильтрации -->
|
||
<template id="filter-container">
|
||
<div class="Filter__container">
|
||
<form class="Filter__form row p-3 m-0">
|
||
<div class="col-md-auto">
|
||
<div class="Filter__inputs-box row">
|
||
</div>
|
||
</div>
|
||
<div class="Filter__button-box col d-flex align-items-end">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
<!-- Шаблон инпута фильтра таблицы -->
|
||
<template id="filter-input">
|
||
<div class="Filter__input-box col mb-3">
|
||
<label for="logs-filter-log-type" class="Filter__label form-label"></label>
|
||
<input type="text" class="Filter__input form-control" name="" placeholder="Введите текст">
|
||
</div>
|
||
</template>
|
||
<!-- Шаблон главной таблицы -->
|
||
<template id="main-table">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped">
|
||
<thead class="Table__head">
|
||
<tr class="Table__head-row">
|
||
<th scope="col" class="Table__column">#</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="Table__body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
<!-- Шаблон информации об апи -->
|
||
<template id="api-info">
|
||
<div class="card text-center Info__container">
|
||
<div class="Info__header">
|
||
<h3 class="Info__title"></h3>
|
||
</div>
|
||
<div class="Info__body">
|
||
<div class="Info__service_name">
|
||
</div>
|
||
<div class="Info__controls">
|
||
<button class="Button__edit">
|
||
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil" fill="currentColor"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd"
|
||
d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
|
||
<path fill-rule="evenodd"
|
||
d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
|
||
</svg>
|
||
</button>
|
||
<button class="Button__delete">
|
||
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash" fill="currentColor"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
|
||
<path fill-rule="evenodd"
|
||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<code contenteditable class="Info__editor"></code>
|
||
<div data-toggle="collapse" data-target="#descriptionCollapse" aria-expanded="false"
|
||
aria-controls="collapseExample" style="text-align: center; cursor: pointer;">
|
||
Краткое описание
|
||
</div>
|
||
<div class="collapse" id="descriptionCollapse">
|
||
<div class="Info__description card card-body">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Info__footer">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблоны форм для просмотры логов -->
|
||
<template id="logs-view-form">
|
||
<div class="h-100 overflow-auto">
|
||
<p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
|
||
<form class="p-3"></form>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон FormControl компонента -->
|
||
<template id="form-control">
|
||
<div class="mb-3">
|
||
<label class="form-label"></label>
|
||
<div class="form-text"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон для Модального Сайдбара -->
|
||
<template id="modal-sidebar">
|
||
<div class="ModalSidebar row justify-content-end m-0">
|
||
<div class="ModalSidebar__window col-12 col-md-9 col-lg-8 col-xl-7 p-0">
|
||
<button class="ModalSidebar__close d-flex justify-center align-items-center" type="button">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон для создания апи -->
|
||
<template id="create-api">
|
||
<div class="card text-center Info__container">
|
||
<div class="card-header">
|
||
<h3 class="Create__title">Новая база данных</h3>
|
||
</div>
|
||
<div class="Create__body">
|
||
<div class="Create__inputs">
|
||
<form class="Create__form">
|
||
<div class="form-group Create__input">
|
||
<label for="key">Api key</label>
|
||
<input type="text" class="Create__key form-control" name="key"
|
||
placeholder="Имя базы данных">
|
||
</div>
|
||
<div class="form-group Create__input">
|
||
<label for="serviceName">Service name</label>
|
||
<input type="text" class="Create__serviceName form-control" name="serviceName"
|
||
placeholder="Название проекта">
|
||
</div>
|
||
<div class="form-group Create__input">
|
||
<label for="description">description</label>
|
||
<input type="textarea" class="Create__description form-control" name="description"
|
||
placeholder="Краткое описание БД">
|
||
</div>
|
||
<div class="form-group Create__input">
|
||
<label for="author">author</label>
|
||
<input type="text" class="Create__author form-control" name="author"
|
||
placeholder="Автор базы данных">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<code contenteditable class="Create__editor"></code>
|
||
</div>
|
||
<div class="Create__footer">
|
||
<div class="Create__error-container"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</body>
|
||
|
||
</html> |