Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • ext-yannis.huber/dieguete_voisipartage
1 result
Show changes
Commits on Source (9)
# VoisiPartage - DieGuete
Voici les contributions de chacun des membres:
- Adrian Buntschu: add item, modify item
- Loïc Freiburghaus: object list, object list item, homepage, merging
- Yannis Huber: toolbar, searchbar, search results, routing, merging
- Yael Iseli: détails d'un objet, responsive toolbar
- Stefan Pahud
# VoisiPartage - DieGuete
Dans le cadre du cours IHM2, nous développons une application Web dans le but d'appliquer les concepts vu en cours. Notre groupe a développé un projet dans le but de simplifier le partage d'objets.
## Membres
Adrian Buntschu
Loïc Freiburghaus
Yannis Huber
Yael Iseli
Stefan Pahud
## Concept
Bien souvent, nous avons besoin d'un objet précis pour un usage unique ou au contraire, nous le possédons mais ne l'utilisons que très rarement. L'application web **VoisiPartage** permet aux personnes d'une même commune de gérer le prêt et l'emprunt d'objets entre eux. Elle permet aux utilisateurs de mettre à disposition un objet ou de trouver ce dont ils ont besoin. Toute personne est libre de vouloir uniquement prêter ou emprunter. Chaque prêt/emprunt est réglementé mais peut tout de même être défini différemment entre les deux personnes à travers un *chat* ou de vive voix. L'application est aussi disponible pour les mobiles.
L'idée de ce projet est de mettre le sens du partage et de la vie communautaire au centre du village dans le but de renforcer les liens et de réduire le gaspillage.
## React
Le site Web développé dans le cadre de ce cours utilise React comme *framework frontend*. Pour lancer l'application, il faut suivre les étapes suivantes depuis le répertoire Frontend:
> $ yarn install
> $ yarn start
......@@ -2,11 +2,13 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="ee9349d1-cbef-48d1-835e-2446868dd9b4" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/../AUTHORS.md" afterDir="false" />
<change afterPath="$PROJECT_DIR$/../README.md" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/toolbar/ResponsiveNavigationBar.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/objectDetails/Details.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/objectDetails/Details.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/objectDetails/MyObject.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/objectDetails/MyObject.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/objectDetails/Owner.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/objectDetails/Owner.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/objectDetails/SimpleBreadcrumb.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/objectDetails/SimpleBreadcrumb.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
......@@ -52,6 +54,7 @@
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="nodejs_package_manager_path" value="yarn" />
<property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
<property name="ts.external.directory.path" value="C:\Users\Yael\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\192.6817.14\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external" />
</component>
<component name="RecentsManager">
......@@ -114,6 +117,8 @@
<workItem from="1575366730253" duration="13961000" />
<workItem from="1575467720585" duration="8416000" />
<workItem from="1575535982372" duration="4426000" />
<workItem from="1575578719721" duration="8178000" />
<workItem from="1575587250905" duration="198000" />
</task>
<servers />
</component>
......
{
"name": "frontend",
"version": "0.1.0",
"version": "1.0.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.7.0",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.34",
"avant": "^0.2.0",
"infinite-react-carousel": "^1.2.1",
"material-ui-chip-input": "^2.0.0-beta.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-responsive": "^8.0.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.2.0"
},
......
......@@ -10,6 +10,8 @@ import { ThemeProvider } from "@material-ui/core/styles";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import MyObject from "./components/objectDetails/MyObject";
import MyItems from "./components/MyItems";
import { useMediaQuery } from "react-responsive";
import ResponsiveNavigationBar from "./components/toolbar/ResponsiveNavigationBar";
const theme = createMuiTheme({
spacing: 2,
......@@ -39,17 +41,18 @@ const theme = createMuiTheme({
});
function App() {
const isSmall = useMediaQuery({ query: "(max-width: 1000px)" });
return (
<ThemeProvider theme={theme}>
<Router>
<NavigationBar />
{isSmall ? <ResponsiveNavigationBar /> : <NavigationBar />}
<Switch>
<Route path="/details/:id" component={MyObject}></Route>
<Route path="/details/:id" component={MyObject} />
<Route path="/myitems" component={MyItems} />
<Route path="/additem">
<AddItem />
</Route>
<Route path="/modifyitem/:id" component={ModifyItem}></Route>
<Route path="/modifyitem/:id" component={ModifyItem} />
<Route path="/">
<Homepage />
</Route>
......
......@@ -135,6 +135,7 @@ class AddItem extends React.Component {
/>
<br />
<SelectImages
images={[]}
onImagesChange={images => {
console.log("Images selection change: " + images);
}}
......
......@@ -35,7 +35,6 @@ const styles = {
};
class ModifyItem extends React.Component {
constructor(props) {
super(props);
......@@ -48,7 +47,6 @@ class ModifyItem extends React.Component {
const params = this.props.match.params;
const object = data.find(e => e.id === params.id);
this.state = {
isModified: false,
areImagesModified: false,
......@@ -115,9 +113,7 @@ class ModifyItem extends React.Component {
hasChanged(modName, modDescription, modTags) {
const params = this.props.match.params;
const object = data.find(e => e.id === params.id);
return !(
modName === object.title && modDescription === object.description
);
return !(modName === object.title && modDescription === object.description);
}
render() {
......
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import ToolbarGroup from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { Link } from "react-router-dom";
import List from "@material-ui/core/List";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Drawer from "@material-ui/core/Drawer";
import Button from "@material-ui/core/Button";
import { Avatar } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import DashboardIcon from "@material-ui/icons/Dashboard";
import MenuIcon from "@material-ui/icons/Menu";
const useStyles = makeStyles(theme => ({
homeLink: {
textDecoration: "none",
color: "white"
},
btns: {
color: "white"
},
drawer: {
backgroundColor: "#689f38"
}
}));
export default function ResponsiveNavigationBar() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false
});
const toggleDrawer = (side, open) => event => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
<ListItem button>
<ListItemIcon>
<Avatar>AB</Avatar>
</ListItemIcon>
<ListItemText primary={"Albert !"} className={classes.btns} />
</ListItem>
<ListItem button className={classes.btns}>
<ListItemIcon className={classes.btns}>
<AddIcon />
</ListItemIcon>
<ListItemText primary={"Ajouter"} className={classes.btns} />
</ListItem>
<ListItem button className={classes.btns}>
<ListItemIcon className={classes.btns}>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary={"Mes objets"} className={classes.btns} />
</ListItem>
</List>
</div>
);
return (
<AppBar position="static" style={{ padding: "0px 15%" }}>
<Toolbar style={{ padding: "0" }}>
<ToolbarGroup float="left" style={{ paddingLeft: "0" }}>
<Button onClick={toggleDrawer("left", true)} className={classes.btns}>
<MenuIcon />
</Button>
</ToolbarGroup>
<Drawer
open={state.left}
onClose={toggleDrawer("left", false)}
classes={{ paper: classes.drawer }}
>
{sideList("left")}
</Drawer>
<ToolbarGroup float="left" style={{ paddingLeft: "0" }}>
<Link to="/" className={classes.homeLink}>
<Typography variant="h5">VoisiPartage</Typography>
</Link>
</ToolbarGroup>
</Toolbar>
</AppBar>
);
}
......@@ -1949,6 +1949,11 @@ autoprefixer@^9.6.1:
postcss "^7.0.17"
postcss-value-parser "^4.0.0"
avant@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/avant/-/avant-0.2.0.tgz#15e9b61650e72695f21bdc45f8f219c6e2cc8240"
integrity sha1-Fem2FlDnJpXyG9xF+PIZxuLMgkA=
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
......@@ -3003,6 +3008,11 @@ css-loader@2.1.1:
postcss-value-parser "^3.3.0"
schema-utils "^1.0.0"
css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
css-prefers-color-scheme@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
......@@ -4875,7 +4885,7 @@ https-browserify@^1.0.0:
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
hyphenate-style-name@^1.0.3:
hyphenate-style-name@^1.0.0, hyphenate-style-name@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
......@@ -6331,6 +6341,13 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
matchmediaquery@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.0.tgz#6f672bcdbc44de16825c6917fbcdcfb9b82607b1"
integrity sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==
dependencies:
css-mediaquery "^0.1.2"
material-ui-chip-input@^2.0.0-beta.2:
version "2.0.0-beta.2"
resolved "https://registry.yarnpkg.com/material-ui-chip-input/-/material-ui-chip-input-2.0.0-beta.2.tgz#d306ccd99d7c336a279add8163551fbc9dc2378c"
......@@ -8393,6 +8410,16 @@ react-is@^16.8.1, react-is@^16.8.4:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f"
integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==
react-responsive@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-8.0.1.tgz#38022665dfb759227880f4221c475438a06a1771"
integrity sha512-caseFCvFFV4QW+JOl7inzDme+avoX4r7GPpQJ+04NCzIgbroV3BU0noPgHGxVCEFKm9IsgcKOBAf+6MqIUeQIg==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.3.0"
prop-types "^15.6.1"
shallow-equal "^1.1.0"
react-router-dom@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
......@@ -9110,6 +9137,11 @@ shallow-clone@^3.0.0:
dependencies:
kind-of "^6.0.2"
shallow-equal@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
......