-
-
-
)}
- {!open && (
-
-
-
)}
-
+
+
+
)}
+ {!open && (
+
+
+
)}
+ -
- {currentUser && (
- menuItemsForRegisteredUsers.map((item) => (
- LeftButtonComponentRender(item)
- )))
- }
- {!currentUser && (
- menuItemsForUnregisteredUsers.map((item) => (
-
-
+ {currentUser && (
+ menuItemsForRegisteredUsers.map((item) => (
+ LeftButtonComponentRender(item)
+ )))
+ }
+ {!currentUser && (
+ menuItemsForUnregisteredUsers.map((item) => (
+
+
-
+
e.stopPropagation() || handleDrawerChange()}
className={clsx(classes.menuButton, false && classes.menuButtonHidden)}
title={"Меню"}
>
-
-
+
+
- Medical web app
-
-
+ Medical web app
+
+
+
+
+
+
+
+
+
+
{currentUser && (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
+
+
{((AuthService.getCurrentUser())) ?
@@ -928,11 +962,25 @@ function App(props) {
{AuthService.getCurrentUser() ?
+
+
+
+
+
- {AuthService.getCurrentUser() ?
+
+ {AuthService.getCurrentUser() ?
+ (
+ (
+
diff --git a/med-web-app-front/src/components/ButtonDrawer.js b/med-web-app-front/src/components/ButtonDrawer.js
new file mode 100644
index 00000000..e344a017
--- /dev/null
+++ b/med-web-app-front/src/components/ButtonDrawer.js
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import {Add, AddCircleOutlineSharp, PostAdd, Style} from "@material-ui/icons";
+import {Link} from "react-router-dom";
+import {IconButton} from "@material-ui/core"
+
+
+type Anchor = 'bottom';
+
+
+export default function ButtonDrawer(props){
+ const [state, setState] = React.useState({
+ bottom: false
+ });
+
+ const toggleDrawer =
+ (anchor: Anchor, open: boolean) =>
+ (event: React.KeyboardEvent | React.MouseEvent) => {
+ if (
+ event.type === 'keydown' &&
+ ((event).key === 'Tab' ||
+ (event).key === 'Shift')
+ ) {
+ return;
+ }
+
+ setState({ ...state, [anchor]: open });
+ };
+
+ const links = props.links//["/edit", "/files/view", "/files/upload", '/login'];
+ const icons = props.icons//[
+ const list = (anchor: Anchor) => (
+
+
+ );
+ return (
+
this.state = {
currentUser: user,
@@ -145,9 +237,24 @@ class UploadAttachmentsComponent extends Component {
message: [],
fileInfos: [],
dragEnter: false,
+ links: links,
+ icons: icons,
+ titles: titles,
+ positions: positions,
+ icon: icon,
+ open: false
};
}
+ handleOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+
deleteElement(index) {
let files = [...this.state.selectedFiles];
files.splice(index, 1);
@@ -241,6 +348,36 @@ class UploadAttachmentsComponent extends Component {
);
}
+ drawListFiles(classes, selectedFiles) {
+ return
+
+
+
+ }
+
async upload(idx, file) {
let _progressInfos = [...this.state.progressInfos];
let _currentUser = this.state.currentUser;
@@ -302,42 +439,51 @@ class UploadAttachmentsComponent extends Component {
render() {
const {selectedFiles, progressInfos, message, dragEnter} = this.state;
const {classes} = this.props;
+ const msgText = message.join(' ')
+
return (
+
+
+
+
+
-
-
+ {titles.map((text,index) => (
+
+ {(positions).map((anchor) => (
+
+
+ {iconDrawer}
+
+
+ {list(anchor)}
+
+
+ ))}
+
+ );
+}
diff --git a/med-web-app-front/src/components/attachments/upload-attachments.component.js b/med-web-app-front/src/components/attachments/upload-attachments.component.js
index f77bd6c7..73f67ffb 100644
--- a/med-web-app-front/src/components/attachments/upload-attachments.component.js
+++ b/med-web-app-front/src/components/attachments/upload-attachments.component.js
@@ -15,11 +15,20 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
+import ViewListIcon from '@material-ui/icons/ViewList';
+import FolderIcon from '@mui/icons-material/Folder';
+import ButtonDrawer from "../ButtonDrawer";
+import {Hidden} from "@material-ui/core";
+import clsx from "clsx";
+import Modal from 'react-bootstrap/Modal';
const useStyles = theme => ({
+ listIcon: {
+ marginTop: theme.spacing(3),
+ },
paper: {
marginTop: theme.spacing(3),
- marginLeft: theme.spacing(1),
padding: theme.spacing(1),
color: "black",
},
@@ -30,7 +39,19 @@ const useStyles = theme => ({
},
mainGrid: {
display: 'flex',
- minWidth: 1000,
+ [theme.breakpoints.only("xs")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("sm")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("md")]: {
+ gap: 3
+ },
+
+ "@media (min-width: 1280px)": {
+ gap: 50
+ },
},
avatar: {
width: 130,
@@ -51,9 +72,8 @@ const useStyles = theme => ({
}
},
buttonUpload: {
- width: 100,
+ marginTop: theme.spacing(5),
backgroundColor: '#f50057',
- margin: theme.spacing(2, 3, 3, 5),
color: '#fff',
'&:hover': {
backgroundColor: '#ff5983',
@@ -64,10 +84,10 @@ const useStyles = theme => ({
},
},
infoTab: {
- margin: theme.spacing(0, 5, 0, 5),
},
grid: {
- margin: theme.spacing(1),
+ textAlign: "center",
+ marginTop: theme.spacing(1),
alignItems: 'center',
flexDirection: 'column',
display: 'flex',
@@ -94,8 +114,10 @@ const useStyles = theme => ({
},
gridContent: {
height: "100%",
+ textAlign: "center",
display: 'flex',
fontSize: '18px',
+
flexDirection: 'column',
borderRadius: 20,
border: "dashed gray 3px",
@@ -120,6 +142,71 @@ const useStyles = theme => ({
height: '100%',
width: '100%',
},
+ fileCell: {
+ textAlign: "center",
+ display: 'inline-block',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+
+ "@media (min-width: 0px)": {
+ maxWidth: "50px"
+ },
+ "@media (min-width: 315px)": {
+ maxWidth: "100px"
+ },
+ "@media (min-width: 360px)": {
+ maxWidth: "135px"
+ },
+ "@media (min-width: 410px)": {
+ maxWidth: "175px"
+ },
+ "@media (min-width: 450px)": {
+ maxWidth: "225px"
+ },
+ "@media (min-width: 530px)": {
+ maxWidth: "275px"
+ },
+ "@media (min-width: 600px)": {
+ maxWidth: "125px"
+ },
+ "@media (min-width: 960px)": {
+ maxWidth: "200px"
+ },
+
+ "@media (min-width: 1280px)": {
+ maxWidth: "275px"
+ },
+ },
+ alertMessage: {
+ [theme.breakpoints.down("xs")]: {
+ width: '150px',
+ },
+ [theme.breakpoints.only("sm")]:{
+ width: '300px',
+ },
+ [theme.breakpoints.only("md")]:{
+ width: '425px',
+ },
+ "@media (min-width: 1280px)" :{
+ width: '475px',
+ },
+ display: 'inline-block',
+ wordWrap: 'break-word',
+ },
+ buttonModal: {
+ backgroundColor: '#f50057',
+ marginRight: "auto",
+ marginLeft: "auto",
+ color: '#fff',
+ '&:hover': {
+ backgroundColor: '#ff5983',
+ color: '#fff',
+ },
+ '&:disabled': {
+ backgroundColor: '#819ca9',
+ },
+ },
})
class UploadAttachmentsComponent extends Component {
@@ -137,6 +224,11 @@ class UploadAttachmentsComponent extends Component {
this.fileInput = React.createRef();
const user = AuthService.getCurrentUser();
+ const links = ["/profile/" + user.username, "/files/view"];
+ const icons = [Загрузка файлов
+
-
-
-
-
-
-
-
- {progressInfos &&
- progressInfos.map((progressInfo, index) => (
-
Загрузка файлов
-
- {progressInfo.fileName}
-
+
+
+
useEffect(() => {
AttachmentService.getAttachmentsForUser(currentUser.username).then((response) => {
setUserFilesInfo(response.data)
@@ -94,8 +158,8 @@ function ViewAttachmentsComponent(props) {
-
- Переименовать {props.name}{props.currentFileType}
+
+ Переименовать {props.name}{props.currentFileType}
@@ -133,9 +197,9 @@ function ViewAttachmentsComponent(props) {
return (
<>
-
+
setModalShow(false)}/>
@@ -175,9 +239,9 @@ function ViewAttachmentsComponent(props) {
return (
<>
-
+
setModalShow(false)}/>
@@ -203,52 +267,60 @@ function ViewAttachmentsComponent(props) {
var re = /(?:\.([^.]+))?$/;
return re.exec(name)[0];
}
+
return (
-
-
-
-
-
- Загруженные файлы
-
-
-
+
+
+
+
+ Загруженные файлы
+
+ {userFilesInfo.length != 0 ?
+
{getName(el.initialName)}
-
-
{new Date(el.creationTime).toLocaleDateString()}
-
-
-
-
+
+
+
+
+
- ))}
-
-
-
+ {index + 1 != userFilesInfo.length ?
+
+
+
+
+
+ style={{textDecoration: 'none'}}>
@@ -260,8 +332,9 @@ function ViewAttachmentsComponent(props) {
-
+
+
);
diff --git a/med-web-app-front/src/components/main/HomeCard.js b/med-web-app-front/src/components/main/HomeCard.js
new file mode 100644
index 00000000..6bb2c2cd
--- /dev/null
+++ b/med-web-app-front/src/components/main/HomeCard.js
@@ -0,0 +1,141 @@
+import { Col } from "react-bootstrap";
+import React from 'react'
+import {isWidthDown, withStyles} from "@material-ui/core";
+import clsx from "clsx"
+import { Link } from "react-router-dom";
+import {Grid} from "@material-ui/core";
+
+const useStyles = theme => ({
+ homeCard: {
+ cursor: "pointer",
+ },
+ homeCardBox: {
+ boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
+ position: "relative",
+ borderRadius: "30px",
+ overflow: "hidden",
+ "@media (min-width : 0px) and (max-width: 359px)": {
+ maxWidth: "280px",
+ maxHeight: "208px",
+ },
+ "@media (min-width: 360px)": {
+ width: "330px",
+ height: "232px",
+ },
+ "@media (min-width: 450px)": {
+ width: "416px",
+ height: "308px",
+ },
+
+ "&::before": {
+ content: '""',
+ background: "linear-gradient(90.21deg, #5218a8 -5.91%, #00ffff 111.58%)",
+ opacity: 0.85,
+ position: "absolute",
+ width: "100%",
+ height: 0,
+ transition: "0.4s ease-in-out",
+ },
+ "&:hover::before": {
+ height: "100%",
+ },
+ "&:hover": {
+ '& $textBox': {
+ opacity: 1,
+ top: "50%",
+ },
+ },
+ },
+
+ textBox: {
+ position: "absolute",
+ textAlign: "center",
+ top: "65%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ transition: "0.5s ease-in-out",
+ opacity: 0,
+ width: "100%",
+
+ },
+
+ textSelection: {
+ color: "#FFF",
+ },
+
+ titleText: {
+ fontSize: "30px",
+ fontWeight: 700,
+ letterSpacing: "0.8px",
+ lineHeight: "1.1em",
+ },
+
+ descriptionText: {
+ fontStyle: "italic",
+ fontWeight: 400,
+ fontSize: "15px",
+ letterSpacing: "0.8px",
+ },
+
+ imgCard: {
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+})
+
+
+
+function HomeCard(props) {
+ const {classes} = props
+ const {title} = props
+ const {description} = props
+ const {status} = props
+ const {imgUrl} = props
+ const {url} = props
+ let isDicom = title === "Получите отчет от искусственного интеллекта"
+
+ const handleClick = (event) => {
+ event.preventDefault();
+ window.open('http://localhost:3000/local', '_blank');
+ };
+
+ function getContent() {
+ return(
+
-
-
- Второе мнение по медицинским снимкам
-
-
-
-
-
- Ранняя диагностика и правильный диагноз могут спасти вашу жизнь!
-
-
-
-
- Если вы пациент и хотите получить дополнительное мнение по вашему снимку:
-
-
-
-
-
-
+
+
+
+
-
-
+
+
+
+
+
-
-
-
- ) : (
- Нет выбранных файлов
- )}
-
-
-
+ {selectedFiles ? (
+ <>
+
+ {this.drawListFiles(classes, selectedFiles)}
+
+
+
+
+
+
+ Текущий список файлов
+
+
+
+ {this.drawListFiles(classes, selectedFiles)}
+
+
+
+
+
+
+
+
+ ) : (
+ Нет выбранных файлов
+ )}
+
+
- {message.length > 0 && (
-
+ {message.length > 0 && (
+
+ {message.map((item, i) => {
+ return {item};
+ })}
+
+ )}
+
+
+
+
+
+
@@ -431,10 +587,10 @@ class UploadAttachmentsComponent extends Component {
-
+
+
-
);
}
}
diff --git a/med-web-app-front/src/components/attachments/view-attachments.component.js b/med-web-app-front/src/components/attachments/view-attachments.component.js
index 65b3dbd6..3d621acf 100644
--- a/med-web-app-front/src/components/attachments/view-attachments.component.js
+++ b/med-web-app-front/src/components/attachments/view-attachments.component.js
@@ -2,15 +2,23 @@ import React, {useEffect, useState} from "react";
import AuthService from "../../services/auth.service";
import AttachmentService from "../../services/attachment.service";
import Button from "@material-ui/core/Button";
-import {Divider, Grid, Paper, Typography, withStyles} from "@material-ui/core";
+import {Divider, Grid, Hidden, Paper, Typography, withStyles} from "@material-ui/core";
import {Link} from "react-router-dom";
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/DeleteOutlined';
import Modal from 'react-bootstrap/Modal';
import TextField from '@material-ui/core/TextField';
import InputAdornment from '@mui/material/InputAdornment';
+import ButtonDrawer from "../ButtonDrawer";
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import ViewListIcon from '@material-ui/icons/ViewList';
+import {IconButton} from "@material-ui/core"
const useStyles = theme => ({
+ listIcon: {
+ marginTop: theme.spacing(3),
+ },
button: {
width: 200,
margin: theme.spacing(1),
@@ -24,6 +32,7 @@ const useStyles = theme => ({
paper: {
marginTop: theme.spacing(3),
padding: theme.spacing(1),
+ textAlign: "center",
// display: 'flex',
},
paper2: {
@@ -32,7 +41,19 @@ const useStyles = theme => ({
},
mainGrid: {
display: 'flex',
- minWidth: 1000,
+ [theme.breakpoints.only("xs")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("sm")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("md")]: {
+ gap: 3
+ },
+
+ "@media (min-width: 1280px)": {
+ gap: 50
+ },
},
grid: {
margin: theme.spacing(1),
@@ -41,13 +62,47 @@ const useStyles = theme => ({
display: 'flex',
},
grid2: {
- margin: theme.spacing(1),
- alignItems: 'center',
- flexDirection: 'row',
+ marginTop: theme.spacing(3),
+ marginBottom: theme.spacing(3),
display: 'flex',
+ gap: 10
},
+ grid3: {
+ [theme.breakpoints.only("xs")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("sm")]: {
+ gap: 50
+ },
+ [theme.breakpoints.only("md")]: {
+ gap: 75
+ },
+
+ "@media (min-width: 1280px)": {
+ gap: 100
+ },
+ },
+
title: {
padding: theme.spacing(3),
+ textAlign: "center",
+ color: "black",
+ [theme.breakpoints.down("xs")]: {
+ width: '200px',
+ fontSize: theme.spacing(2.75)
+ },
+ [theme.breakpoints.only("sm")]:{
+ width: '370px',
+ fontSize: theme.spacing(4)
+ },
+ [theme.breakpoints.up("md")]:{
+ width: '450px',
+ fontSize: theme.spacing(5)
+ },
+
+ display: 'inline-block',
+ wordWrap: 'break-word',
+
},
download: {
backgroundColor: '#f50057',
@@ -64,6 +119,15 @@ function ViewAttachmentsComponent(props) {
const user = AuthService.getCurrentUser();
const [currentUser, setCurrentUser] = useState(user)
const [userFilesInfo, setUserFilesInfo] = useState([])
+ const links = ["/profile/" + AuthService.getCurrentUser().username, "/files/upload"];
+ const icons = [
- {progressInfo.percentage}%
-
+ {progressInfos &&
+ progressInfos.map((progressInfo, index) => (
+
+ {progressInfo.fileName}
+
+ ))}
+
+
- ))}
+
+ {progressInfo.percentage}%
this.dropHandler(e)}>
-
+
{ !dragEnter ? (
Перетащите сюда файлы или нажмите на кнопку ниже
@@ -358,65 +504,75 @@ class UploadAttachmentsComponent extends Component {Загружаемые файлы:
- {selectedFiles ? ( -
-
- )}
-
-
- -
- {message.map((item, i) => {
- return
- {item} ; - })} -
+
+
+
+
+
+
+ 
+
+ )
+ }
+
+ function getCardContent(){
+ if (isDicom){
+ return(
+
+ {getContent()}
+
+ );
+ }
+ else{
+ return(
+
+ {getContent()}
+
+ );
+ }
+ }
+
+
+ return(
+ getCardContent()
+ );
+}
+
+export default withStyles(useStyles)(HomeCard)
\ No newline at end of file
diff --git a/med-web-app-front/src/components/main/LeftPatientPicture.png b/med-web-app-front/src/components/main/LeftPatientPicture.png
deleted file mode 100644
index d3608ec0..00000000
Binary files a/med-web-app-front/src/components/main/LeftPatientPicture.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/MiddleBottomPatientPicture.png b/med-web-app-front/src/components/main/MiddleBottomPatientPicture.png
deleted file mode 100644
index 59c800fe..00000000
Binary files a/med-web-app-front/src/components/main/MiddleBottomPatientPicture.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/MiddleUpperPatientPicture.png b/med-web-app-front/src/components/main/MiddleUpperPatientPicture.png
deleted file mode 100644
index bbabc2f3..00000000
Binary files a/med-web-app-front/src/components/main/MiddleUpperPatientPicture.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/MirfImage.jpeg b/med-web-app-front/src/components/main/MirfImage.jpeg
deleted file mode 100644
index d69978d1..00000000
Binary files a/med-web-app-front/src/components/main/MirfImage.jpeg and /dev/null differ
diff --git a/med-web-app-front/src/components/main/MirfImageNotHQ.png b/med-web-app-front/src/components/main/MirfImageNotHQ.png
deleted file mode 100644
index 23cfc1fb..00000000
Binary files a/med-web-app-front/src/components/main/MirfImageNotHQ.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/MirfImageWithoutText.png b/med-web-app-front/src/components/main/MirfImageWithoutText.png
deleted file mode 100644
index afff734c..00000000
Binary files a/med-web-app-front/src/components/main/MirfImageWithoutText.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/RightPatientPicture.png b/med-web-app-front/src/components/main/RightPatientPicture.png
deleted file mode 100644
index 398ce6b5..00000000
Binary files a/med-web-app-front/src/components/main/RightPatientPicture.png and /dev/null differ
diff --git a/med-web-app-front/src/components/main/ai.jpg b/med-web-app-front/src/components/main/ai.jpg
new file mode 100644
index 00000000..1e2ff4d0
Binary files /dev/null and b/med-web-app-front/src/components/main/ai.jpg differ
diff --git a/med-web-app-front/src/components/main/backgroundHome.jpg b/med-web-app-front/src/components/main/backgroundHome.jpg
new file mode 100644
index 00000000..0b3126c2
Binary files /dev/null and b/med-web-app-front/src/components/main/backgroundHome.jpg differ
diff --git a/med-web-app-front/src/components/main/doctor.jpg b/med-web-app-front/src/components/main/doctor.jpg
new file mode 100644
index 00000000..2eb4ad27
Binary files /dev/null and b/med-web-app-front/src/components/main/doctor.jpg differ
diff --git a/med-web-app-front/src/components/main/forum.jpg b/med-web-app-front/src/components/main/forum.jpg
new file mode 100644
index 00000000..16d7c329
Binary files /dev/null and b/med-web-app-front/src/components/main/forum.jpg differ
diff --git a/med-web-app-front/src/components/main/newHome.component.js b/med-web-app-front/src/components/main/newHome.component.js
index ca1e95da..e069400d 100644
--- a/med-web-app-front/src/components/main/newHome.component.js
+++ b/med-web-app-front/src/components/main/newHome.component.js
@@ -1,298 +1,202 @@
-import {Component, useRef} from "react";
+import {Component} from "react";
import {Typography} from "@mui/material";
-import {Grid, Paper, withStyles} from "@material-ui/core";
-import MirfImage from './MirfImageWithoutText.png';
-import LeftPatientPicture from './LeftPatientPicture.png';
-import MiddleUpperPatientPicture from './MiddleUpperPatientPicture.png';
-import MiddleBottomPatientPicture from './MiddleBottomPatientPicture.png';
-import RightPatientPicture from './RightPatientPicture.png';
+import {Grid, withStyles} from "@material-ui/core";
+import Forum from './forum.jpg';
+import Doctor from './doctor.jpg';
+import AI from './ai.jpg';
+import HomeCard from "./HomeCard";
+import 'animate.css';
+import "@fontsource/unbounded";
+import clsx from "clsx"
+import React, { useState, useEffect, useRef } from 'react'
-const useStyles = theme => ({
- bigTitle: {
- position: "absolute",
- width: "1287px",
- height: "62px",
- left: "93px",
- top: "176px",
-
- fontFamily: 'Roboto',
- fontStyle: "inherit",
- fontWeight: 500,
- fontSize: "80px",
- lineHeight: "47px",
- textAlign: "center",
- color: "#000000",
- },
-
- secondTitle: {
- position: "absolute",
- width: "750px",
- height: "42px",
- left: "362px",
- top: "302px",
-
- fontFamily: 'Roboto',
- fontStyle: "normal",
- fontWeight: 400,
- fontSize: "32px",
- lineHeight: "38px",
- textAlign: "center",
- color: "#5A5A5A",
- },
-
- thirdTitle: {
- position: "absolute",
- width: "818px",
- height: "55px",
- left: "305px",
- top: "498px",
- fontFamily: 'Roboto',
- fontStyle: "normal",
- fontWeight: 500,
- fontSize: "24px",
- lineHeight: "28px",
- textAlign: "center",
- },
- fourthTitle: {
- position: "absolute",
- width: "818px",
- height: "55px",
- left: "305px",
- top: "1058px",
- fontFamily: 'Roboto',
- fontStyle: "normal",
- fontWeight: 500,
- fontSize: "24px",
- lineHeight: "28px",
- textAlign: "center",
- },
-
- div: {
- margin: theme.spacing(3, 0, 1, 0),
+const useStyles = theme => ({
+ mainGrid: {
+ marginBottom: theme.spacing(5),
+ flexGrow: 1,
+ overflowX: 'hidden',
+ overflowY: 'hidden',
},
- // Левая пикча с логотипом
- leftBrain: {
- position: "absolute",
- width: "350px",
- height: "313px",
- left: "15px",
- top: "60.77px",
-
- transform: "rotate(-46deg)",
-
- },
- // Правая пикча с логотипом
- rightBrain: {
+ backgroundImageRight: {
+ top: 0,
position: "absolute",
- width: "350px",
- height: "313px",
- left: "calc(45% - 350px/2 + 652.1px)",
- top: "calc(70% - 313px/2 - 200.5px)",
- transform: "rotate(27deg)",
+ width: "100%",
+ height: "100%",
+ right: 0,
+ zIndex: -4,
},
-
- leftPatientBox: {
- boxSizing: "border-box",
-
- position: "absolute",
- width: "377px",
- height: "441px",
- left: "85px",
- top: "561px",
-
- background: "#FFFFFF",
- border: "1px solid rgba(0, 0, 0, 0.5)",
+
+ textSelection: {
+ color: "#FFF",
+ backgroundColor: "#0049FF",
},
- leftPatientPicture: {
- position: "absolute",
- width: "300px",
- height: "300px",
- left: "130px",
- top: "593px",
+ boxes: {
+ "@media (max-width: 957px)": {
+ marginTop: theme.spacing(7),
+ },
+ alignItems:"center",
},
- leftPatientText: {
- position: "absolute",
- width: "350px",
- height: "303px",
- left: "98px",
- top: "918px",
-
- fontFamily: 'Roboto',
- fontStyle: "normal",
+ bigTitle: {
+ [theme.breakpoints.down("xs")]: {
+ fontSize: theme.spacing(3.5),
+ lineHeight: "27px",
+ },
+ [theme.breakpoints.between("sm", "md")]: {
+ fontSize: theme.spacing(4),
+ lineHeight: "37px",
+ },
+ "@media (min-width: 1280px)": {
+ fontSize: theme.spacing(5),
+ lineHeight: "47px",
+ },
+ alignContent: "center",
+ justifyContent: "center",
+ margin: 0,
+ padding: 0,
+ display: "flex",
+ fontStyle: "inherit",
fontWeight: 500,
- fontSize: "24px",
- lineHeight: "28px",
textAlign: "center",
-
- color: "#000000",
-
- },
-
- middlePatientBox: {
- boxSizing: "border-box",
-
- position: "absolute",
- width: "375px",
- height: "443px",
- left: "550px",
- top: "559px",
- background: "#FFFFFF",
- border: "1px solid rgba(0, 0, 0, 0.5)",
- },
- middleUpperPatientPicture: {
- position: "absolute",
- width: "350px",
- height: "133px",
- left: "568px",
- top: "593px",
- },
- middleBottomPatientPicture: {
- position: "absolute",
- width: "340px",
- height: "133px",
- left: "573px",
- top: "735px",
- },
- middlePatientText: {
- position: "absolute",
- width: "363px",
- height: "303px",
- left: "556px",
- top: "918px",
-
- fontFamily: 'Roboto',
- fontStyle: "normal",
+ color: "#fff",
+ },
+ littleTitle: {
+ [theme.breakpoints.down("xs")]: {
+ lineHeight: "25px",
+ fontSize: theme.spacing(1.75),
+ },
+ [theme.breakpoints.between("sm", "md")]: {
+ lineHeight: "30px",
+ fontSize: theme.spacing(2),
+ },
+ "@media (min-width: 1280px)": {
+ lineHeight: "34px",
+ fontSize: theme.spacing(2.25),
+ },
+ alignContent: "center",
+ justifyContent: "center",
+ margin: 0,
+ padding: 0,
+ display: "flex",
+ fontStyle: "inherit",
fontWeight: 500,
- fontSize: "24px",
- lineHeight: "28px",
textAlign: "center",
},
- rightPatientBox: {
- boxSizing: "border-box",
-
- position: "absolute",
- width: "377px",
- height: "441px",
- left: "1003px",
- top: "561px",
-
- background: "#FFFFFF",
- border: "1px solid rgba(0, 0, 0, 0.5)",
- },
- rightPatientPicture: {
- position: "absolute",
- width: "339px",
- height: "284px",
- left: "1020px",
- top: "584px",
- },
- rightPatientText: {
- position: "absolute",
- width: "355px",
- height: "310px",
- left: "1018px",
- top: "920px",
-
- fontFamily: 'Roboto',
- fontStyle: "normal",
- fontWeight: 500,
- fontSize: "24px",
- lineHeight: "28px",
- textAlign: "center",
- color: "#000000",
- }
-
+ card: {
+ "@media (min-width : 0px) and (max-width: 359px)": {
+ padding: "0.75rem",
+ maxWidth: 280,
+ },
+ "@media (min-width : 360px)": {
+ padding: "1rem",
+ width: 330,
+ },
+ "@media (min-width : 450px)": {
+ width: 400,
+ },
+ "@media (min-width : 600px)": {
+ padding: "1.5rem",
+ width: 520,
+ },
+ "@media (min-width : 960px)": {
+ width: 880,
+
+ },
+ "@media (min-width: 1280px)": {
+ width: 1200,
+ },
+
+ background: "rgba( 255, 255, 255, 0.15 )",
+ boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
+ backdropFilter: "blur( 18px )",
+ borderRadius: "30px",
+
+ zIndex: 10,
+ color: "whitesmoke",
+ },
+
+
})
+
class newHome extends Component {
constructor(props) {
super(props);
this.state = {
- content: ""
+ content: "",
};
}
- render() {
- const {classes} = this.props;
- return (
-
+
+
+ {title}
+ {description} +{status}
+
- 
-
-
-
-
-
-
-
-
-
-
- Разместите пост на форуме
-
-
-
-
- 
-
-
-
-
- Выберите подходящего врача
-
-
+ render() {
+ const {classes} = this.props;
+ const cards = [
+ {
+ title: "Разместите пост на форуме",
+ description: "Форум",
+ status: "Мгновенный отклик от врачей",
+ imgUrl: Forum,
+ url: "/records/view",
+ },
+ {
+ title: "Выберите подходящего врача",
+ description: "Поиск",
+ status: "Высококвалифицированные специалисты",
+ imgUrl: Doctor,
+ url: "/search",
+ },
+ {
+ title: "Получите отчет от искусственного интеллекта",
+ description: "DICOM Viewer",
+ status: "Нейросеть, обученная на большом объеме данных",
+ imgUrl: AI,
+ url: "http://localhost:3000/local",
+ },
+ ];
+ const styles = {
+ root: {
+ fontFamily: 'Unbounded, cursive',
+
+ },
+ };
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/*For admin board:
-
-
-
-
- For admin board:
- {this.state.currentUser !== null && this.state.currentUser.username === "admin" &&
- (
-
- )
-
- }*/}
-
-
- );
- }
-}
class PipelinesComponent extends Component {
@@ -156,6 +127,11 @@ class PipelinesComponent extends Component {
this.onFileDropdownSelected = this.onFileDropdownSelected.bind(this);
this.submitPipeline = this.submitPipeline.bind(this);
+ const links = ["/files/view", "/files/upload", "/pipelines/results", "/pipelines/save"];
+ const icons = [
this.state = {
currentUser: user,
pipelines: [],
@@ -163,7 +139,12 @@ class PipelinesComponent extends Component {
message: [],
selectedFile: null,
selectedPipeline: null,
- submitted: false
+ submitted: false,
+ links: links,
+ icons: icons,
+ titles: titles,
+ positions: positions,
+ icon: icon,
};
}
@@ -245,118 +226,102 @@ class PipelinesComponent extends Component {
const {classes} = this.props;
return (
-
-
-
-
-
- Автоматический анализ снимка
-
-
- 
-
-
- 
-
-
-
-
- Получите отчет от искусственного интеллекта
-
-
+
-
+
+ return (
+
+ { this.divElement = divElement } }>
+
+
+
+
+
+
+ {
+ cards.map((card, index) => {
+ return (
+
+
);
-
-
}
-
-
}
export default withStyles(useStyles)(newHome)
\ No newline at end of file
diff --git a/med-web-app-front/src/components/pipelines/pipeline-results.component.js b/med-web-app-front/src/components/pipelines/pipeline-results.component.js
index 9ccb0e35..47196818 100644
--- a/med-web-app-front/src/components/pipelines/pipeline-results.component.js
+++ b/med-web-app-front/src/components/pipelines/pipeline-results.component.js
@@ -11,8 +11,20 @@ import {
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import {Link} from "react-router-dom";
+import ViewListIcon from '@material-ui/icons/ViewList';
+import ButtonDrawer from "../ButtonDrawer";
+import {Hidden} from "@material-ui/core"
+import CachedIcon from '@material-ui/icons/Cached';
+import clsx from "clsx"
const useStyles = theme => ({
+ results: {
+ display: 'inline-block',
+ wordWrap: 'break-word',
+ },
+ listIcon: {
+ marginTop: theme.spacing(3),
+ },
button: {
width: 200,
margin: theme.spacing(1),
@@ -29,7 +41,6 @@ const useStyles = theme => ({
},
mainGrid: {
display: 'flex',
- minWidth: 1000,
},
paper: {
marginTop: theme.spacing(3),
@@ -39,7 +50,7 @@ const useStyles = theme => ({
minHeight: 400,
},
paper2: {
- margin: theme.spacing(3),
+ marginTop: theme.spacing(3),
padding: theme.spacing(3),
color: "black",
},
@@ -51,6 +62,7 @@ const useStyles = theme => ({
},
title: {
padding: theme.spacing(3),
+
},
})
@@ -65,11 +77,21 @@ class PipelineResultsComponent extends Component {
this.handleClose = this.handleClose.bind(this)
const user = AuthService.getCurrentUser();
+ const links = ["/pipelines/create"];
+ const icons = [
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
);
}
}
diff --git a/med-web-app-front/src/components/pipelines/pipelines.component.js b/med-web-app-front/src/components/pipelines/pipelines.component.js
index 121705df..32ac3ecd 100644
--- a/med-web-app-front/src/components/pipelines/pipelines.component.js
+++ b/med-web-app-front/src/components/pipelines/pipelines.component.js
@@ -6,32 +6,46 @@ import PipelineJobService from "../../services/pipelinejob.service"
import AttachmentService from "../../services/attachment.service"
import {Button, Divider, FormControl, Grid, Paper, Typography, withStyles} from "@material-ui/core";
import {Link} from "react-router-dom";
+import ViewListIcon from '@material-ui/icons/ViewList';
+import FolderIcon from '@mui/icons-material/Folder';
+import ButtonDrawer from "../ButtonDrawer";
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import SaveAltIcon from '@material-ui/icons/SaveAlt';
+import DataUsageIcon from '@material-ui/icons/DataUsage';
+import {Hidden} from "@material-ui/core";
const useStyles = theme => ({
+ listIcon: {
+ marginTop: theme.spacing(3),
+ },
paper: {
marginTop: theme.spacing(3),
//padding: theme.spacing(1),
//display: 'flex',
flexGrow: 1,
- [theme.breakpoints.down("xs")]: {
- width: "250px",
- marginLeft: "5%",
- },
- "@media (min-width: 424px)": {
- width: "80%",
- marginLeft: theme.spacing(5)
- }
+
},
paper2: {
- margin: theme.spacing(3),
+ marginTop: theme.spacing(3),
padding: theme.spacing(3),
},
mainGrid: {
display: 'flex',
- minWidth: 1000,
-
-
+ height: "calc(100vh - 80px)",
+ [theme.breakpoints.only("xs")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("sm")]: {
+ gap: 10
+ },
+ [theme.breakpoints.only("md")]: {
+ gap: 3
+ },
+
+ "@media (min-width: 1280px)": {
+ gap: 50
+ },
},
button: {
marginTop: theme.spacing(3),
@@ -72,75 +86,32 @@ const useStyles = theme => ({
},
title: {
padding: theme.spacing(3),
+ textAlign: "center"
},
content: {
//margin: theme.spacing(1),
+ display: 'inline-block',
+ wordWrap: 'break-word',
padding: theme.spacing(1),
marginLeft: 7,
},
- CenterContainer: {
- spacing: theme.spacing(3),
- justifyContent: "center",
- // paddingLeft : theme.spacing(4),
- "@media (max-width: 768px)": {
- justifyContent: "flex-start"
+ select: {
+ margin: theme.spacing(1),
+ display: 'inline-block',
+ wordWrap: 'break-word',
+ },
+ viewList: {
+ [theme.breakpoints.down("xs")]: {
+ width: '28px', // изменяем ширину иконки
+ height: '28px'
+ },
+ [theme.breakpoints.up("sm")]:{
+ width: '35px', // изменяем ширину иконки
+ height: '35px'
},
-
}
})
-function rightSideRender(classes) {
- if (window.innerWidth >= 958) {
- return (
- 
-
- Консультации врачей онлайн: получите второе мнение, не покидая дома
+
-
-
+
+
-
-
@@ -214,19 +209,26 @@ class PipelineResultsComponent extends Component {
+
Результаты:
@@ -180,31 +200,6 @@ class PipelineResultsComponent extends Component {
style={{marginLeft: 5}}>Скачать
- {/*
))}
- this.handleClickOpen()}>
-
-
- */}
+
+
+