<commit_before>import React from 'react';
import content from '../../content';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Carousel from 'react-bootstrap/Carousel';
import { ViewHeader, ViewContainer, Image } from '../../components';
import Modal from 'react-bootstrap/Modal'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCarBattery, faEye, faDharmachakra, faVrCardboard, faBolt, faWaveSquare, faCogs, faTools, faRocket } from '@fortawesome/free-solid-svg-icons';
import './styles.scss';

export default class Projects extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            showPopup: false,
            popupContent: 
            {
                "image": "electrical.jpg",
                "header": "You shouldn't be able to see me.",
                "body": "",
                "bodyFull": "",
                "carousel": 
                {
                   "images": [],
                   "caption": ""
                },
            },
        }
    }

    editAndShowPopup = (props) => {
        this.setState({
            showPopup: true,
            popupContent: props
        });
    }

    hidePopup = () => {
        this.setState({
            showPopup: false
        });
    }
    render() {

        // For Popup content
        const RenderHTML=(content)=>{
            return(
            <div dangerouslySetInnerHTML={ {__html: content} } />
            )
        }

        const projectIcons = {
            software: [
                faEye, // Computer Vision
                faDharmachakra, // Controls
                faVrCardboard, // Simulations
            ],
            electrical: [
                faBolt, 
                faWaveSquare, // signals
                faCarBattery, // power
            ],
            mechanical: [
                faCogs, 
                faTools,
                faRocket,
            ]
        }

        const ProjectDetailButtonList = (list, team) => {
            const proj_list = list.map((proj, index) => {
                return <button className="ProjectDetailButton" onClick={()=>this.editAndShowPopup(proj)}>
                    <div className="ProjectButtonInnerIcon">
                    <FontAwesomeIcon className="ProjectIconSmall" icon={projectIcons[team][index]} size="lg" />
                    </div>
                    <div className="ProjectButtonInnerText">{proj.header}</div>
                    </button>
            })
            return(
                <div className="ProjectDetailButtonList">
                    {proj_list}
                </div>
            )
        }

        return (
            <ViewContainer>
                <ViewHeader title={content.projects.title} blurb={content.projects.blurb} disableImage={true}/>
                <Row>
                    <Col sm={1}>
                    </Col>
                    <Col>
                        <h4 className="VideoHeader">
                            {content.projects.project.header}
                        </h4>
                        <hr/>
                        <Row>
                            <Col sm={6}>
                                <div className="VideoBody">
                                  {content.projects.project.body}
                                </div>
                            </Col>
                            <Col sm={6}>
                                <div className="ProjectImageContainer">
                                <iframe height="400" width="700"src="https://www.youtube.com/embed/Oo7kQUQVeRs "> </iframe>
                                </div>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={1}>
                    </Col>
                </Row>
                <div className="ContentSeperatorTop"/>
                    <div className="ContentContainer">
                        <Row>
                            <Col sm={1}>
                            </Col>
                            <Col>
                                <h4 className="ProjectSubheader">
                                    {content.projects.project.software.header}
                                </h4>
                                <hr/>
                                <Row>
                                    <Col sm={6}>
                                        <div className="CarouselContainerDark">
                                            <Row>
                                                <Col>
                                                    <Carousel className="ProjectsCarousel" fade="true">
                                                        {content.projects.project.carousels.software.images.map((item, index) => (
                                                            <Carousel.Item key={index}>
                                                                <div className="ProjectsImageContainer"><commit_msg>fix video iframe too wide on certain screens<commit_after>import React from 'react';
import content from '../../content';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Carousel from 'react-bootstrap/Carousel';
import { ViewHeader, ViewContainer, Image } from '../../components';
import Modal from 'react-bootstrap/Modal'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCarBattery, faEye, faDharmachakra, faVrCardboard, faBolt, faWaveSquare, faCogs, faTools, faRocket } from '@fortawesome/free-solid-svg-icons';
import './styles.scss';

export default class Projects extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            showPopup: false,
            popupContent: 
            {
                "image": "electrical.jpg",
                "header": "You shouldn't be able to see me.",
                "body": "",
                "bodyFull": "",
                "carousel": 
                {
                   "images": [],
                   "caption": ""
                },
            },
        }
    }

    editAndShowPopup = (props) => {
        this.setState({
            showPopup: true,
            popupContent: props
        });
    }

    hidePopup = () => {
        this.setState({
            showPopup: false
        });
    }
    render() {

        // For Popup content
        const RenderHTML=(content)=>{
            return(
            <div dangerouslySetInnerHTML={ {__html: content} } />
            )
        }

        const projectIcons = {
            software: [
                faEye, // Computer Vision
                faDharmachakra, // Controls
                faVrCardboard, // Simulations
            ],
            electrical: [
                faBolt, 
                faWaveSquare, // signals
                faCarBattery, // power
            ],
            mechanical: [
                faCogs, 
                faTools,
                faRocket,
            ]
        }

        const ProjectDetailButtonList = (list, team) => {
            const proj_list = list.map((proj, index) => {
                return <button className="ProjectDetailButton" onClick={()=>this.editAndShowPopup(proj)}>
                    <div className="ProjectButtonInnerIcon">
                    <FontAwesomeIcon className="ProjectIconSmall" icon={projectIcons[team][index]} size="lg" />
                    </div>
                    <div className="ProjectButtonInnerText">{proj.header}</div>
                    </button>
            })
            return(
                <div className="ProjectDetailButtonList">
                    {proj_list}
                </div>
            )
        }

        return (
            <ViewContainer>
                <ViewHeader title={content.projects.title} blurb={content.projects.blurb} disableImage={true}/>
                <Row>
                    <Col sm={1}>
                    </Col>
                    <Col>
                        <h4 className="VideoHeader">
                            {content.projects.project.header}
                        </h4>
                        <hr/>
                        <Row>
                            <Col sm={6}>
                                <div className="VideoBody">
                                  {content.projects.project.body}
                                </div>
                            </Col>
                            <Col sm={6}>
                                <div className="ProjectImageContainer">
                                <iframe height="400" width="100%"src="https://www.youtube.com/embed/Oo7kQUQVeRs "> </iframe>
                                </div>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={1}>
                    </Col>
                </Row>
                <div className="ContentSeperatorTop"/>
                    <div className="ContentContainer">
                        <Row>
                            <Col sm={1}>
                            </Col>
                            <Col>
                                <h4 className="ProjectSubheader">
                                    {content.projects.project.software.header}
                                </h4>
                                <hr/>
                                <Row>
                                    <Col sm={6}>
                                        <div className="CarouselContainerDark">
                                            <Row>
                                                <Col>
                                                    <Carousel className="ProjectsCarousel" fade="true">
                                                        {content.projects.project.carousels.software.images.map((item, index) => (
                                                            <Carousel.Item key={index}>
                                                                <div className="ProjectsImageContainer">
{'fraction_non_alphanumeric': 0.10393591772151899, 'fraction_numerical': 0.003362341772151899, 'mean_word_length': 0.9560928433268859, 'pattern_counts': {'":': 14, '<': 107, '<?xml version=': 0, '>': 121, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 38, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2866945', 'n_tokens_mistral': 2364, 'n_tokens_neox': 2197, 'n_words': 434}