Skip to content

Commit

Permalink
add front
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rudezoo
Rudezoo committed Jun 16, 2021
1 parent e8752a5 commit 3680d7d
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 58 deletions.
82 changes: 44 additions & 38 deletions client/src/components/timeline.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import "../style/timeline.css";
import { Chrono } from "react-chrono";
import { Row, Col, Select, Button, Divider, Card, Typography, Image, Spin } from "antd";
import { Row, Col, Select, Button, Divider, Card, Typography, Image, Spin, Pagination } from "antd";
import axios from 'axios';
import instance from "../module/instance";

Expand Down Expand Up @@ -38,21 +38,21 @@ const Timeline = () => {

let nums = []

let datas=[]
let cinfos=[]
let datas = []
let cinfos = []

if (yearval === '2019') {
setdata([])


await instance.get('/cluster')
.then(response => {
.then(response => {
let ordered = [];
ordered = response.data.clusterInfo;
ordered.sort(date_ascending);
setcInfo(ordered);
ordered.map(x=>nums.push(x.cId));
cinfos=ordered;
ordered.map(x => nums.push(x.cId));
cinfos = ordered;
}) // SUCCESS
.catch(response => { console.log(response) }); // ERROR

Expand All @@ -70,7 +70,7 @@ const Timeline = () => {
), Promise.resolve([]))

results.then(response => {

// temp=response
// temp.map((x)=>datas.push(x))
setdata(response)
Expand All @@ -89,13 +89,13 @@ const Timeline = () => {


useEffect(() => {
data.length>0? setbtndisable(false):setbtndisable(true)
data.length > 0 ? setbtndisable(false) : setbtndisable(true)
}, [data]);



const SetData = () => {
console.log('change')
console.log('change')

if (yearval !== '0') {
console.log(data)
Expand All @@ -114,7 +114,7 @@ const Timeline = () => {
title: temptitle,
img: cloud,
articles: data[i].data.newsInfo,
date:date
date: date
};

tempitem.push(temp);
Expand Down Expand Up @@ -168,61 +168,67 @@ const Timeline = () => {
allowDynamicUpdate
cardPositionHorizontal='TOP'
theme={{ primary: "rgba(0, 30, 165, 1)", secondary: "white" }}
>
{/* <div className="chrono-icons">
{
items.map((v)=>{
return (<div className="timelinebutton ">{v.date.substring(5,7)}</div>)
})
}
</div> */}
>
<div className="chrono-icons">
{
items.map((v) => {
return (<div className="timelinebutton " onClick={() => console.log('clicked')}>{v.date.substring(5, 7)}</div>)
})
}

</div>
{
items.map((v) => {
return (

<div key={v} className="Card">
<div className="clusterhead">
<Text className="clusterhead" mark>
{v.title}
</Text>
<div style={{
marginTop:"2em"
}}>
<Text className="clusterdate">
{v.date}
</Text>
</div>
<div className="clusterdate">
{v.date}
</div>
<div>
<Image width={400} src={'http://13.209.70.51:5000' + v.img}>

</Image>
<div>
<Image width={400} src={'http://13.209.70.51:5000' + v.img} className="wordcloud" />
</div>
{v.articles.map((article) => {
return (
<>

<Card key={article} hoverable
className="articleCard" style={
className="articleCard" /*style={
article.img !== '/images/no-image.png' ?
{
backgroundImage: "url(" + article.img + ")",
} : { backgroundImage: "url('http://www.the-pr.co.kr/news/photo/201607/14976_49069_3617.jpg')", }} onClick={() => OnHandleClick({ url: article.url })}



>
} : { backgroundImage: "url('http://www.the-pr.co.kr/news/photo/201607/14976_49069_3617.jpg')", }}*/ onClick={() => OnHandleClick({ url: article.url })}
>

<Row>
<Col span={12}>
<Col span={24}>
<div>
<Title style={{
fontSize:"2em"
fontSize: "2em"
}}>
{article.headline}
</Title>
</div>
<div>
<div className='articlecontent'>
<Text code>
{article.category}
</Text>
<Text code>
{article.press}
</Text>
<Text>
{article.text}...
</Text>

</div>

</Col>
<Col span={12}>
<div>
Expand All @@ -233,7 +239,7 @@ const Timeline = () => {
</Card>
</>)
})}

<Pagination defaultCurrent={1} total={50} />
</div>
);
})
Expand All @@ -246,7 +252,7 @@ const Timeline = () => {
:
<div className="wait">
INTIMES
<Spin size='large' className="spin"/>
<Spin size='large' className="spin" />
</div>
}

Expand Down
7 changes: 7 additions & 0 deletions client/src/style/cover.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@
font-weight: 100;
}

@font-face {
font-family: 'malgun';
src: url('../assets/fonts/malgun.ttf') format("truetype");
font-style: normal;
font-weight: 100;
}

.background {
position: relative;
width: 100vw;
Expand Down
106 changes: 86 additions & 20 deletions client/src/style/timeline.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.timeline{
width: 100%;
height: 100vh;

font-family: malgun;
}

.selectSection{
Expand All @@ -24,8 +26,11 @@
border-radius: 0% !important;
background-color: white !important;
box-shadow: none !important;

}
.css-eh4k5x-TimelineMainWrapper.horizontal {
height: 10rem !important;
}


.css-8myp9a-TimelineNavButton {
width: 10vmax !important;
Expand All @@ -36,6 +41,7 @@




.ant-btn:hover{
border-color: rgb(14, 0, 66) !important;
}
Expand All @@ -46,16 +52,18 @@


width: 95vw;
height: 20vh;
height: 30vh;
margin-top: 10px;

background-position: right;
background-position-y: 0;
background-position-y: 5;
background-size: 50%;
background-repeat: no-repeat;
border-radius: 30px;




}


Expand Down Expand Up @@ -83,35 +91,71 @@
}

.clusterdate{
margin-top: 30px;
font-weight: bold;
font-size: 1em;
font-size: 2em;
}

.css-7xkfgz-TitleWrapper{
font-size: 0.9em !important;
}

/* .timeline-item-title{
background-color: rgba(0, 0, 0, 0) !important;
.timeline-item-title{

color: rgb(255, 255, 255) !important;
background-color: rgb(0, 7, 104) !important;
width: 100% !important;

border-radius: 10px !important;
height: 4em !important;
width: 13em !important;
transition: background-color 0.3s ease-in-out;

}

border: 2px black solid;
.css-q2kzzt-Circle.active.using-icon {
border-color: brown;
}

.css-7xkfgz-TitleWrapper.active{
transition: color 0.3s ease-in-out;
color: white !important;
background-color: rgb(0, 87, 250) !important;
}
.css-7xkfgz-TitleWrapper.active::after{

content: '';
position: absolute;
border-style: solid;
border-width: 15px 16px 0px 17.5px;
border-color: rgb(0, 87, 250) transparent;
display: block;
width: 0;
z-index: 1;
top: 50px;
left: 40%;

z-index: 4;
}

.timeline-item-title::after{

content: '';
position: absolute;
border-style: solid;
border-width: 20px 16px 0px 17.5px;
border-color: #140c0c transparent;
border-width: 15px 16px 0px 17.5px;
border-color: rgb(0, 7, 104) transparent;
display: block;
width: 0;
z-index: 1;
top: 55px;
left: 83px;
} */
top: 50px;
left: 40%;

/* .css-3iqrge-TimelineTitleContainer{
margin-top: -1.5rem !important;
} */
z-index: 4;
}

.css-3iqrge-TimelineTitleContainer{
margin-top: -2.1rem !important;
}

.wait{
width: 100%;
Expand Down Expand Up @@ -147,14 +191,36 @@
width: 100%;
font-size: 0.8em;
font-weight: bold;
height: 1.5em;
height: 1.7em;

padding-bottom: 2px;

border: 2px rgba(0, 30, 165, 1) solid;
border-radius: 50%;



z-index: 0;
}

.timelinebutton:hover{
border: 2px rgb(149, 149, 184) solid;
/* transition: border 0.5s ease-in;
border: 1px rgb(0, 87, 250) solid; */
}


.css-q2kzzt-Circle.active.using-icon{
transition: background-color 0.2s ease-in;
color: white;
background-color: rgb(0, 87, 250);
border-color: rgb(0, 87, 250) !important;
}

.articlecontent{
width: 100%;
display: flex;
justify-content: left;

text-align: left;

flex-direction: column;
}

0 comments on commit 3680d7d

Please sign in to comment.