Se crea el componente y los estilos para la ventana de registro de pueblos (ab69c340) · Commits · Lorenzo Trujillo Rojas / PueblosMagicosConIAFK

web/src/components/sa_panel_town/sa_panel_town_register/css/styles.css

0 → 100644

+155 −0

Original line number	Diff line number	Diff line
		*{
		user-select: none;
		}

		.town_register_wrap {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 70vw;
		height: 90vh;
		background: green;
		display: flex;
		flex-direction: column;
		}

		.town_register_header {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 5px;
		}

		.town_register_close_btn{
		display: inline-block;
		cursor: pointer;
		position: absolute;
		right: 5px;
		}

		.town_register_content {
		background: white;
		width: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		}

		.town_register_content form{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		}

		.town_description_image_cont {
		width: 100%;
		background: lightgray;
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		}

		.town_desc{
		height: 100%;
		width: 55%;
		display: flex;
		flex-direction: column;
		padding: 20px;
		}

		.image_container {
		height: 100%;
		width: 45%;
		background: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		}

		.image_container div {
		justify-content: center;
		align-items: center;
		}

		.town_desc div{
		display: flex;
		align-items: center;
		justify-content: center;
		}

		.towm_desc_input_cnt{
		height: 100%;
		width: 100%;
		flex-grow: 1;
		}

		.towm_desc_input_cnt textarea{
		width: 100%;;
		height: 100%;
		padding: 5px;
		overflow-y: auto;
		resize: none;
		}

		.state_select{
		display: flex;
		flex-direction: column;
		width: 40%;
		justify-content: center;
		align-items: center;
		}

		.state_select label {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		}

		.state_select select{
		width: 60%;
		}

		.town_name_state_input {
		display: flex;
		flex-direction: row;
		margin-top: 5px;
		margin-bottom: 5px;
		}

		.town_name_input{
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		}

		.town_name_input input{
		width: 70%;
		border-radius: 3px;
		}

		.town_name_input .form_input::focus {
		border-width: 1px;
		}

		.language_change_cnt{
		width: 20%;
		}

		.change_lang_btn{
		cursor: pointer;
		}

		.language_change_cnt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
		No newline at end of file

web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx

0 → 100644

+111 −0

Original line number	Diff line number	Diff line
		import { faWindowClose, faLanguage } from "@fortawesome/free-solid-svg-icons";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import './css/styles.css'
		import { ImageDropzone } from "../../image_dropzone/image_dropzone";
		import { Dispatch, SetStateAction, useState } from "react";
		import { useTownRegister } from "../../../hooks/useTownRegister";

		interface props {
		setWindowActive: Dispatch<SetStateAction<boolean>>,
		setShowRegisterPanel: Dispatch<SetStateAction<boolean>>
		}

		export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel}:props) => {
		const {
		statesList,
		register,
		setValue,
		handleSubmit,
		errors,
		onSubmit
		} = useTownRegister();
		const [isEnglish, setIsEnglish] = useState(false);
		const [spanishDescription, setSpanishDescription] = useState("");
		const [englishDescription, setEnglishDescription] = useState("");

		return (
		<div className="town_register_wrap">
		<div className="town_register_header">
		Registra el pueblo mágico
		<FontAwesomeIcon icon={faWindowClose} className="town_register_close_btn"
		onClick={() => {setShowRegisterPanel(false); setWindowActive(false)}}/>
		</div>
		<div className="town_register_content">
		<form onSubmit={handleSubmit(onSubmit)}>
		<div className="town_name_state_input">
		<div className="language_change_cnt">
		<label>
		{isEnglish ?
		"Inglés"
		:
		"Español"
		}
		</label>
		<FontAwesomeIcon icon={faLanguage}
		className="change_lang_btn"
		onClick={ () =>
		setIsEnglish(!isEnglish)
		}
		/>
		</div>
		<div className="town_name_input">
		<label className="form_label">Nombre del pueblo mágico</label>
		<input className="form_input"
		type="text"
		{...register('name')}
		required/>
		</div>
		<div className="state_select">
		<label>Estado al que pertenece el pueblo</label>
		{statesList == null ?
		<label>No hay estados</label>
		:
		<select
		{...register('state')}
		required>
		{statesList.map((state) => {
		return (
		<option key={state.stateId} value={state.stateId}>{state.name}</option>
		);
		})}
		</select>
		}
		</div>
		</div>
		<div className="town_description_image_cont">
		<div className="town_desc">
		<div>Descripción del pueblo mágico</div>
		<div className="towm_desc_input_cnt">
		{
		isEnglish ?
		<textarea id="0" className="town_desc_textarea"
		value={englishDescription}
		{...register('descriptionEN',{
		onChange(event) {
		setEnglishDescription(event.target.value);
		},
		})}
		required/>
		:
		<textarea id="1" className="town_desc_textarea"
		value={spanishDescription}
		{...register('descriptionES',{
		onChange(event) {
		setSpanishDescription(event.target.value);
		},
		})}
		required/>
		}
		</div>
		</div>
		<div className="image_container">
		<div>Fotografía representativa del pueblo</div>
		<ImageDropzone setValue={setValue}/>
		<input type="submit"/>
		</div>
		</div>
		</form>
		</div>
		</div>
		);
		}
		No newline at end of file