508 lines
25 KiB
HTML
508 lines
25 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="MainMenu navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container-fluid d-flex">
|
||
<div class="MainMenu__logoBox d-flex align-items-center">
|
||
<img src="./img/logo.svg" alt="logo" class="MainMenu__logo mr-2">
|
||
<a class="h3 text-light navbar-brand text-wrap m-0">Storage Service</a>
|
||
</div>
|
||
<button class="navbar-toggler ml-auto" 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 ml-5" id="navbarNavDropdown">
|
||
<ul class="navbar-nav mr-auto"></ul>
|
||
<div>
|
||
<div class="MainMenu__avatar"></div>
|
||
</div>
|
||
<button type="button" class="btn btn-outline-dark MainMenu__exitButton">Выйти</button>
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
|
||
<!-- Шаблон карточек на главной-->
|
||
<template id="main-statistic">
|
||
<div class="h-100">
|
||
<div class="container h-100 d-flex align-items-center">
|
||
<div class="row">
|
||
<div class="d-flex align-items-center justify-content-center">
|
||
<div class="d-flex align-items-center">
|
||
<div class="col mr-2">
|
||
<img class="col MainStatistic__logo" src="./img/logo.svg" alt="logo">
|
||
</div>
|
||
<div class="col">
|
||
<p class="mb-0 text-nowrap">Добро пожаловать в</p>
|
||
<p class="h1 mb-0 text-nowrap">Storage Service</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex justify-content-center mt-4 mb-4">
|
||
<p class="MainStatistic__text">Storage Service - <span class="font-weight-light">
|
||
это платформа для быстрого создания JSON хранилищ с удобным API для внедрения в
|
||
Web-приложения
|
||
</span></p>
|
||
</div>
|
||
<div class="d-flex justify-content-center MainStatistic__notifyContainer">
|
||
<button type="button" class="col btn btn-info MainStatistic__notify">
|
||
Хранилищ <span class="badge bg-warning text-dark MainStatistic__storeCount">0</span>
|
||
</button>
|
||
<button type="button" class="col btn btn-info MainStatistic__notify">
|
||
Сервисов <span class="badge bg-warning text-dark MainStatistic__serviceCount">0</span>
|
||
</button>
|
||
<button type="button" class="col btn btn-info MainStatistic__notify">
|
||
Авторов <span class="badge bg-warning text-dark MainStatistic__authorCount">0</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон страницы логина-->
|
||
<template id="login-page">
|
||
<div class="Login__page">
|
||
<div class="Login__page-container btn-prymary">
|
||
<div class="Login__logo-box">
|
||
<img class="Login__logo" alt="logo">
|
||
</div>
|
||
<div class="Login__title h3"></div>
|
||
<form class="Login__form needs-validation" novalidate>
|
||
<div class="Login__inputContainer"></div>
|
||
<div class="form-group form-check Login__check">
|
||
<input type="checkbox" class="form-check-input" id="check">
|
||
<label class="form-check-label" for="check">Оставаться в системе</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary Login__submit">Войти</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- Шаблон содержимого страницы 404-->
|
||
<template id="not-found-content">
|
||
<div class="d-flex row justify-content-center">
|
||
<img src="./img/error-404.svg" class="NotFound__image" alt="404">
|
||
<div class="h5 m-1">
|
||
<div class="m-0 text-center">404. Страница не найдена</div>
|
||
<div class="NotFound__text text-center"></div>
|
||
</div>
|
||
<button type="button" class="btn btn-primary NotFound__redirectButton w-auto">На главную</button>
|
||
</div>
|
||
</template>
|
||
<!-- Шаблон содержимого личного кабинета-->
|
||
<template id="profile-content">
|
||
<div class="d-flex">
|
||
<form class="ProfilePage__form p-3 flex-grow-1">
|
||
<div class="h6 text-center">Смена пароля</div>
|
||
<div class="ProfilePage__inputContainer m-1" id="oldpass"></div>
|
||
<button type="submit" class="btn btn-outline-primary mt-3">Сохранить</button>
|
||
</form>
|
||
<div class="p-2 flex-grow-4">
|
||
<div class="ProfilePage__avatar m-2"></div>
|
||
<div class="h6 text-center ProfilePage__userName">login_name</div>
|
||
</div>
|
||
</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">
|
||
<caption></caption>
|
||
<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>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-log-type"
|
||
placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-message" class="form-label">Сообщение</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-message"
|
||
placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-trace" class="form-label">Стек</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-trace" placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Фильтры для таблицы клиентских запросов -->
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-data-base" class="form-label">База данных</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<select type="text" class="form-select" id="logs-filter-request-data-base">
|
||
<option value="">Любая</option>
|
||
<option value="production">production</option>
|
||
<option value="testing">testing</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-method" class="form-label">Метод</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<select type="text" class="form-select" id="logs-filter-request-method">
|
||
<option value="">Любой</option>
|
||
<option value="get">GET</option>
|
||
<option value="post">POST</option>
|
||
<option value="put">PUT</option>
|
||
<option value="delete">DELETE</option>
|
||
<option value="head">HEAD</option>
|
||
<option value="options">OPTIONS</option>
|
||
<option value="path">PATH</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-url" class="form-label">URL</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-request-url"
|
||
placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-status" class="form-label">Код ответа</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-request-status"
|
||
placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg mb-3">
|
||
<label for="logs-filter-request-message" class="form-label">Сообщение</label>
|
||
<div class="LogsFilters__inputWrapper">
|
||
<input type="text" class="form-control" id="logs-filter-request-message"
|
||
placeholder="Введите текст">
|
||
<button type="button" class="LogsFilters__clearButton">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</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>
|
||
<button type="button" class="btn btn-secondary mb-3 ml-2 LogsFilters__resetButton">Сбросить</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>
|
||
|
||
<!-- Шаблоны форм для просмотры логов -->
|
||
<template id="user-view-form">
|
||
<div class="h-100 overflow-auto d-flex flex-column">
|
||
<p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
|
||
<form class="p-3 h" autocomplete="off"></form>
|
||
<div class="mt-auto p-3 pr-5 border-top bg-light">
|
||
<button type="button" class="btn btn-primary UserViewForm__create">Создать</button>
|
||
<button type="button" class="btn btn-primary UserViewForm__save">Сохранить</button>
|
||
<button type="button" class="btn btn-warning UserViewForm__edit">Изменить</button>
|
||
<button type="button" class="btn btn-danger UserViewForm__delete">Удалить</button>
|
||
<button type="button" class="btn btn-secondary UserViewForm__cancel">Отмена</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблоны форм для просмотры api -->
|
||
<template id="api-view-form">
|
||
<div class="h-100 overflow-auto Api__view-container">
|
||
<p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
|
||
|
||
<form class="p-3"></form>
|
||
<div class="Api__view-controls stricky-bottom">
|
||
<button class="Button__edit btn btn-light">
|
||
<i class="fas fa-pencil-alt Edit__icon">
|
||
<span class="Button__edit-text"></span>
|
||
</i>
|
||
|
||
</button>
|
||
<button class="Button__delete btn btn-light">
|
||
<i class="far fa-trash-alt">
|
||
<span class="Button__delete-text"></span>
|
||
</i>
|
||
</button>
|
||
<button class="Button__cancel btn btn-light">
|
||
<i class="fas fa-ban">
|
||
<span class="Button__cancel-text"></span>
|
||
</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон FormControl компонента -->
|
||
<template id="form-control">
|
||
<div class="mb-3">
|
||
<label class="form-label"><span class="FormControl__label"></span><span class="FormControl__star text-danger"></span></label>
|
||
<div class="form-text invalid-feedback"></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>
|
||
|
||
<!-- Шаблон уведомления -->
|
||
<template id="notify-message">
|
||
<div class="toast Notify__element" role="alert" aria-live="assertive" aria-atomic="true">
|
||
<div class="toast-header">
|
||
<img class="rounded mr-2 Notify__icon" alt="toast_icon">
|
||
<strong class="mr-auto Notify__title"></strong>
|
||
<button type="button" class="ml-2 mb-1 close Notify__closeButton" data-dismiss="toast"
|
||
aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="toast-body Notify__message"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Контейнер для уведомлений -->
|
||
<template id="notify-container">
|
||
<div class="NotifyContainer"></div>
|
||
</template>
|
||
|
||
</body>
|
||
|
||
</html> |