Skip to content

Instantly share code, notes, and snippets.

@rogeriorioli
Last active December 18, 2020 16:46
Show Gist options
  • Save rogeriorioli/3bf3630737327fdd7cb559edc385e29d to your computer and use it in GitHub Desktop.
Save rogeriorioli/3bf3630737327fdd7cb559edc385e29d to your computer and use it in GitHub Desktop.
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import Button from '../../../Components/Common/Button';
import Card from '../../../Components/Common/Card';
import Body2 from '../../../Components/Common/Tipography/Body2';
import Caption from '../../../Components/Common/Tipography/Caption';
import H4 from '../../../Components/Common/Tipography/H4';
import H5 from '../../../Components/Common/Tipography/H5';
import Container from './[id]Styles';
import Hero from '../../../Components/System/Hero';
import { SideBarDir } from '../../../Components/System/SideBar/SideBarDir';
import Authenticator from '../../../Helpers/Authenticator';
import LayoutDir from '../../../Layouts/LayoutDir';
import LayoutAside from '../../../Layouts/LayoutAside';
import LayoutContent from '../../../Layouts/LayoutContent';
import Tabs from '../../../Components/Tabs';
import Tab from '../../../Components/Tabs/Tab';
import { useRouter } from 'next/router';
import { api } from '../../../Services';
import Modal from '../../../Components/Modal';
import PropTypes from 'prop-types';
import { withTranslation } from './../../../../i18n';
import { shadows } from '../../../Styles/shadows';
import WrappedMap from '../../../Components/Map';
import Mark from '../../../Components/Map/Marker';
const Subestacion = ({ t, tReady }) => {
const route = useRouter();
const [activo, setActivo] = useState([]);
const [org_token_id, setOrgTokenId] = useState<string>('');
const [token_id, setTokenId] = useState('');
const [successModal, setSuccessModal] = useState<boolean>(false);
const [successModalMessage, setSuccessModalMessage] = useState<string>('');
const { id } = route.query;
console.log('Activo', activo);
const deleteActivo = async (activo_id) => {
console.log('use', org_token_id);
await api
.delete(`/services/organization/${org_token_id}/assets/${activo_id}`, {
headers: {
Authorization: `Bearer ${token_id}`
}
})
.then((success) => {
console.log('foi');
setSuccessModal(!successModal);
setSuccessModalMessage('Acitvio deletado com sucesso');
})
.catch((error) => {
console.log(' não foi');
setSuccessModal(!successModal);
setSuccessModalMessage('Algun error Ocurrio');
});
};
useEffect(() => {
const id_token = sessionStorage.getItem('id_token');
const org = sessionStorage.getItem('org_id');
setOrgTokenId(org);
setTokenId(id_token);
api
.get(`services/organization/${org}/assets/${id}`, {
headers: {
Authorization: `Bearer ${id_token}`
}
})
.then((success) => {
const { data } = success;
setActivo(data);
console.log(data);
});
}, []);
console.log('activo', activo);
return (
<Authenticator>
<LayoutDir>
<LayoutAside>
<SideBarDir logo="/static/images/logo-seis-blue.svg" />
</LayoutAside>
{activo.length !== 0 && (
<LayoutContent>
{activo.map((act) => (
<Hero
key={act.serial}
bsize="cover"
bcolor="#212121"
title={act.name}
description={act.description}
bgimage={act.picture}
>
<Button
rounded
whiteOutline
marginRight="10px"
text={t('button.delete')}
onClick={() => deleteActivo(id)}
/>
<Link href={`/dir/subestaciones/editar/${[id]}`}>
<a className="btn btn-whiteOutline rounded">
{t('button.edit')}
</a>
</Link>
</Hero>
))}
<Container>
<Tabs type={'dir'}>
<Tab title={t('tab.detail.label')}>
<Card
borderRadius={'16px'}
padding={'lg'}
backgroundColor={'#fff'}
shadow={shadows.xs}
>
{activo.map((act) => (
<section key={act.coordinator_id.$oid}>
<header>
<H4
marginBottom={'sm'}
text={t('tab.detail.general-information.title')}
/>
<Body2
marginBottom={'md'}
text={t(
'tab.detail.general-information.description'
)}
/>
</header>
<main>
<Body2 marginBottom={'md'} text={act.description} />
<div className="list-data">
<ul>
{act.name && (
<li>
<Caption text={'name'} />
<H5 text={act.name} />
</li>
)}
{act.trademark && (
<li>
<Caption
text={t(
'tab.detail.general-information.data.brand'
)}
/>
<H5 text={act.trademark} />
</li>
)}
{act.model && (
<li>
<Caption
text={t(
'tab.detail.general-information.data.model'
)}
/>
<H5 text={act.model} />
</li>
)}
{act.serial && (
<li>
<Caption
text={t(
'tab.detail.general-information.data.serial'
)}
/>
<H5 text={act.serial} />
</li>
)}
{act.mnemonic && (
<li>
<Caption
text={t(
'tab.detail.general-information.data.mnemonic'
)}
/>
<H5 text={act.mnemonic} />
</li>
)}
{act.manufacturing_date && (
<li>
<Caption
text={t(
'tab.detail.general-information.data.manufacturing-date'
)}
/>
<H5
text={act.manufacturing_date.replaceAll(
'-',
'/'
)}
/>
</li>
)}
</ul>
</div>
</main>
</section>
))}
</Card>
<Card
borderRadius={'16px'}
padding={'lg'}
backgroundColor={'#fff'}
shadow={shadows.xs}
>
<section>
<header>
<H4 marginBottom={'sm'} text={'Ubicacíon del Activo'} />
<Body2
marginBottom={'md'}
text={'informacion Geografica'}
/>
</header>
<main>
<WrappedMap
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.NEXT_PUBLIC_MAP_KEY}`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `392px` }} />}
mapElement={<div style={{ height: `100%` }} />}
>
{activo.map((asset) => (
<Mark
key={asset._id.$oid}
places={[
{
id: asset._id.$oid,
alt: asset.name,
lat: parseFloat(asset.dependencies.latitude),
long: parseFloat(
asset.dependencies.longitude
),
pin: asset.name,
description: asset.description,
picture: asset.picture
}
]}
/>
))}
</WrappedMap>
</main>
</section>
</Card>
<Card
borderRadius={'16px'}
padding={'lg'}
backgroundColor={'#fff'}
shadow={shadows.xs}
>
<section>
<header>
<H4
marginBottom={'sm'}
text={t('tab.detail.dependencies.title')}
/>
<Body2
marginBottom={'md'}
text={t('tab.detail.dependencies.description')}
/>
</header>
<main>
{activo &&
activo.map((dependency) => (
<div className="list-data" key={dependency.name}>
<ul>
{dependency.dependencies.type_installation && (
<li>
<Caption
text={t(
'tab.detail.dependencies.data.superior-dependency'
)}
/>
<H5 text={dependency.zone[0].name} />
</li>
)}
{dependency.dependencies
.start_dependence_date && (
<li>
<Caption
text={t(
'tab.detail.dependencies.data.initial-date'
)}
/>
<H5
text={dependency.dependencies.start_dependence_date.replaceAll(
'-',
'/'
)}
/>
</li>
)}
{dependency.dependencies
.end_dependence_date && (
<li>
<Caption
text={t(
'tab.detail.dependencies.data.end-date'
)}
/>
<H5
text={dependency.dependencies.end_dependence_date.replaceAll(
'-',
'/'
)}
/>
</li>
)}
{dependency.dependencies.latitude && (
<li>
<Caption text={'Latituide'} />
<H5
text={dependency.dependencies.latitude}
/>
</li>
)}
{dependency.dependencies.longitude && (
<li>
<Caption text={'Latituide'} />
<H5
text={dependency.dependencies.longitude}
/>
</li>
)}
</ul>
</div>
))}
</main>
</section>
</Card>
</Tab>
<Tab title={t('tab.specs.label')}>
<Card
borderRadius={'16px'}
padding={'lg'}
backgroundColor={'#fff'}
shadow={shadows.xs}
>
<section>
<header>
<H4 marginBottom={'sm'} text={'Especs generales'} />
<Body2
marginBottom={'md'}
text={'Información general del activo'}
/>
</header>
<main></main>
</section>
</Card>
</Tab>
</Tabs>
</Container>
</LayoutContent>
)}
{successModal && (
<Modal
text={successModalMessage}
stateClass={`fade-in ${!successModal && 'fade-out'} `}
>
<Link href="/dir/activos">
<a className="btn btn-default"> Volver a activos</a>
</Link>
</Modal>
)}
</LayoutDir>
</Authenticator>
);
};
Subestacion.getInitialProps = async () => ({
namespacesRequired: ['dir-assets-asset']
});
Subestacion.propTypes = {
t: PropTypes.func.isRequired
};
export default withTranslation(['dir-assets-asset'])(Subestacion);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment