multy-stub/server/routers/questioneer/public/create.html
Primakov Alexandr Alexandrovich f91f821f86 fix navigation elements
2025-03-12 09:12:09 +03:00

187 lines
8.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Создать опрос</title>
<!-- Добавляем проверку на различные пути -->
<script>
// Определяем путь к статическим файлам с учетом prod и dev окружений
function getStaticPath() {
if (window.location.pathname.includes('/ms/questioneer')) {
// Для продакшна
return '/ms/questioneer/static';
} else {
// Для локальной разработки
const basePath = window.location.pathname.split('/create')[0];
// Проверяем, заканчивается ли путь на слеш
return basePath + (basePath.endsWith('/') ? 'static' : '/static');
}
}
// Динамически добавляем CSS
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = getStaticPath() + '/css/style.css';
document.head.appendChild(cssLink);
</script>
<!-- Добавляем jQuery и остальные скрипты с учетом переменного пути -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Динамически добавляем скрипты
const scriptPaths = [
'/js/common.js',
'/js/create.js'
];
const staticPath = getStaticPath();
scriptPaths.forEach(path => {
const script = document.createElement('script');
script.src = staticPath + path;
document.body.appendChild(script);
});
});
</script>
</head>
<body>
<!-- Навигационная шапка -->
<header class="nav-header">
<div class="nav-container">
<a href="javascript:;" id="nav-home-link" class="nav-logo">Анонимные опросы</a>
<nav class="nav-menu">
<a href="javascript:;" id="nav-main-link" class="nav-link">Главная</a>
<a href="javascript:;" id="nav-create-link" class="nav-link active">Создать опрос</a>
</nav>
</div>
</header>
<div class="container">
<h1>Создание нового опроса</h1>
<div class="form-container">
<form id="create-questionnaire-form">
<div class="form-group">
<label for="title">Название опроса *</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="description">Описание опроса</label>
<textarea id="description" name="description"></textarea>
</div>
<div class="form-group" style="display: none;">
<label for="display-type">Тип отображения</label>
<select id="display-type" name="display-type">
<option value="step_by_step">Пошаговый</option>
</select>
</div>
<div class="questions-container">
<h2>Вопросы</h2>
<div id="questions-list"></div>
<button type="button" id="add-question" class="btn btn-small">Добавить вопрос</button>
</div>
<div class="form-actions">
<a href="/questioneer" class="btn btn-secondary">Отмена</a>
<button type="submit" class="btn btn-primary">Создать опрос</button>
</div>
</form>
</div>
</div>
<!-- Шаблон для вопроса -->
<template id="question-template">
<div class="question-item" data-index="{{index}}">
<div class="question-header">
<h3>Вопрос {{number}}</h3>
<button type="button" class="btn-icon delete-question">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<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 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 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
</svg>
</button>
</div>
<div class="form-group">
<label for="question-text-{{index}}">Текст вопроса *</label>
<input type="text" id="question-text-{{index}}" class="question-text" name="questions[{{index}}][text]" required>
</div>
<div class="form-group">
<label for="question-type-{{index}}">Тип вопроса *</label>
<select id="question-type-{{index}}" class="question-type-select" name="questions[{{index}}][type]" required>
<option value="single_choice">Одиночный выбор</option>
<option value="multiple_choice">Множественный выбор</option>
<option value="text">Текстовый ответ</option>
<option value="scale">Шкала оценки</option>
<option value="tag_cloud">Облако тегов</option>
</select>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="questions[{{index}}][required]" value="true">
Обязательный вопрос
</label>
</div>
<div class="options-container" id="options-container-{{index}}">
<h4>Варианты ответа</h4>
<div class="options-list" id="options-list-{{index}}"></div>
<button type="button" class="btn btn-small add-option" data-question-index="{{index}}">Добавить вариант</button>
</div>
<div class="scale-container" id="scale-container-{{index}}" style="display: none;">
<h4>Настройки шкалы</h4>
<div class="form-group">
<label for="scale-min-{{index}}">Минимальное значение</label>
<input type="number" id="scale-min-{{index}}" class="scale-min" name="questions[{{index}}][scaleMin]" value="0" min="0">
</div>
<div class="form-group">
<label for="scale-max-{{index}}">Максимальное значение</label>
<input type="number" id="scale-max-{{index}}" class="scale-max" name="questions[{{index}}][scaleMax]" value="10" min="1" max="20">
</div>
<div class="form-group">
<label for="scale-min-label-{{index}}">Подпись минимального значения</label>
<input type="text" id="scale-min-label-{{index}}" class="scale-min-label" name="questions[{{index}}][scaleMinLabel]" value="Минимум">
</div>
<div class="form-group">
<label for="scale-max-label-{{index}}">Подпись максимального значения</label>
<input type="text" id="scale-max-label-{{index}}" class="scale-max-label" name="questions[{{index}}][scaleMaxLabel]" value="Максимум">
</div>
</div>
</div>
</template>
<!-- Шаблон для варианта ответа -->
<template id="option-template">
<div class="option-item" data-index="{{optionIndex}}">
<input type="text" name="questions[{{questionIndex}}][options][{{optionIndex}}][text]" placeholder="Вариант ответа">
<button type="button" class="btn-icon delete-option">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
</div>
</template>
<script>
// Добавляем корректные пути к ссылкам после загрузки страницы
document.addEventListener('DOMContentLoaded', function() {
// Определяем базовый путь с учетом /ms в продакшен-версии
const isMsPath = window.location.pathname.includes('/ms/questioneer');
const basePath = isMsPath ? '/ms/questioneer' : '/questioneer';
// Устанавливаем правильные ссылки
document.getElementById('nav-home-link').href = basePath;
document.getElementById('nav-main-link').href = basePath;
document.getElementById('nav-create-link').href = basePath + '/create';
});
</script>
</body>
</html>