)
}
function Card({ title, src, id, handleClickCar, text }) {
return (
<>
{title}
{text}
)
}
function Separator() {
return (
)
}
//Sections
function CardOptionsByYear({ handleYear, handleClickCard, text, bannerUrl, cardsInfo }) {
const biplData = React.useContext(BiplContext);
const year = biplData[0];
const cardSelected = biplData[1];
const commune = biplData[2];
let cardsInfoToShow = [];
//Validate how many cards there are in a certain year and just take that date from cards info array
try {
Object.keys(dataFilesInfo[commune][year]).forEach(folderName => {
cardsInfoToShow.push(cardsInfo.find(cardInfo => cardInfo.id === folderName));
})
} catch (e) {
console.log(e);
}
return (
<>
{text}
{year == "Seleccion el año de visualizacion" &&
Para continuar es necesario eligir un año de visualizacion. arrow_downward
}
{year != "Seleccion el año de visualizacion" &&
Año {year}
{cardsInfoToShow.map(cardinfo =>
)}
}
)
}
function FichasOrMgaList({ handleBackBtn, cardInfo, text, bannerUrl }) {
let dataListFiles;
const bilpData = React.useContext(BiplContext);
const year = bilpData[0];
const cardSelected = bilpData[1];
const commune = bilpData[2];
let acts;
let matrixOrPpts;
try {
dataListFiles = dataFilesInfo[commune][year][cardSelected];
} catch {
dataListFiles = false;
}
acts = dataListFiles.filter(item => item.name.includes('ACTA'));
matrixOrPpts = dataListFiles.filter(item => !item.name.includes('ACTA'));
return (
)
}
//Foooter
function Footer() {
return (
)
}
//Main page
function Bipl() {
const cardInfoList = [
{
title: "Recolección de insumos",
id: "RI",
text: "Es el momento en el que, bajo el direccionamiento del Departamento Administrativo de Planeación, con el apoyo de las dependencias y entes descentralizados, se procederá con el ejercicio de recolección de insumos mediante encuentros con participación abierta de la ciudadanía, donde se puntualizará en los instrumentos provistos y con los elementos necesarios para iniciar con la formulación de los proyectos de inversión. " +
"Aquí se generan dos insumos técnicos: las matrices de recolección de dichos insumos donde los asistentes plasman sus propuestas y las actas que respaldan dichos espacios. ",
imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Recoleccion-de-insumos-card-scaled.jpg",
bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-3-1536x227.jpg.pagespeed.ic.oOMYI0eAMO.webp"
},
{
title: "Fichas Perfil",
id: "FP",
text: "Fichas formuladas bajo el direccionamiento técnico de la Unidad de Planeación del Desarrollo Municipal y Local – UPDML, de la Subdirección Social y Económica del Departamento Administrativo de Planeación, del Distrito Especial de Ciencia, Tecnología e Innovación de Medellín, con el acompañamiento de las distintas secretarias y entes descentralizados.",
imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/5-Asi-va-la-ruta.jpg",
bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-3-1536x227.jpg.pagespeed.ic.oOMYI0eAMO.webp"
},
{
title: "Socialización",
id: "SC",imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Fichas-ppt-card-scaled.jpg",
text: "Es el momento en el que, una vez se tengan los perfiles de proyecto formulados, las dependencias y entes descentralizados socializarán los proyectos en sesión a los Consejos Comunales y Corregimentales de Planeación, los cuales, atendiendo a las directrices técnicas impartidas por el Departamento Administrativo de Planeación plasmaran ajustes a estos proyectos al nivel de ficha perfil, los cuales de ser considerados viables por las dependencias y entes descentralizados serán incorporados en los mismos. Aquí se generan dos insumos técnicos: los formatos de presentación de proyectos y las actas que respaldan dichos espacios. ",
bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
},
{
title: "Fichas PPT ajustadas",
id: "FPPT",
text: "Fichas resumen de los proyectos perfil que incorporan los ajustes realizados por los respectivos Concejos Comunales y Corregimentales de Planeación – CCCP en el marco de la Socialización de proyectos. ",
imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Socializacion-card-scaled.jpg",
bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
},
{
title: "Proyectos MGA",
id: "MGA",
text: "Proyectos formulados por las distintas secretarias y entes descentralizados que fueron priorizados en las respectivas votaciones de presupuesto participativo, registrados en la Unidad de Inversión Pública y Banco de Proyectos – UIPBP, bajo la Metodología General Ajustada – MGA, para su posterior ejecución. ",
imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/8-Instrumentos-PDL.jpg",
bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
},
]
const [year, setYear] = React.useState('Seleccion el año de visualizacion');
const [cardSelected, setCardSelected] = React.useState('');
const [commune, setCommune] = React.useState('C15');
const [selectedCardInfo, setSelectedCardInfo] = React.useState()
const [currentPage, setCurrecPage] = React.useState('YearOptions')
const handleOptionsChange = (e) => {
setYear(e.target.value);
}
const handleClickCard = (e) => {
setCardSelected(e.target.id);
setSelectedCardInfo(cardInfoList.find(cardInfo => cardInfo.id === e.target.id))
setCurrecPage('fichasOrMga');
}
const handleBackBtn = (e) => {
setCurrecPage('YearOptions');
}
return (
