Architecture and models setup for members and projects. Chat and css missing

This commit is contained in:
Alexandre Bourlier 2018-04-05 14:09:42 +02:00
parent 420c68bd6e
commit bdfa78a945
12 changed files with 164 additions and 88 deletions

1
.gitignore vendored
View File

@ -10,3 +10,4 @@ dist/html/*
# Files # Files
index.html index.html
issues.md

View File

@ -22,6 +22,7 @@
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" /> <link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
<link rel="import" href="dist/lib/ldp-display/ldp-router.html" /> <link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
<link rel="import" href="dist/lib/ldp-display/ldp-form.html" />
</head> </head>
<body> <body>
@ -29,11 +30,9 @@
<main id="mainContainer" class="container-fluid"> <main id="mainContainer" class="container-fluid">
<?php require_once('src/html/members.html'); ?> <?php require_once('src/html/members.html'); ?>
<?php require_once('src/html/member.html'); ?>
<?php require_once('src/html/projects.html'); ?>
<?php require_once('src/html/project.html'); ?>
</main> </main>
<!--Profil Modal-->
<div id="profileDiv" style="display: none;">
<ldp-display id="profileDetail" data-fields="profil-modal" set-profil-modal="picture, profil-content" widget-picture="ldp-display-img" set-profil-content="name, languages, country"></ldp-display>
</div>
</body> </body>
</html> </html>

16
src/html/member.html Normal file
View File

@ -0,0 +1,16 @@
<div id="member" style="display: none">
<div class="page-header">
<h1>Profil</h1>
</div>
<ldp-display
id="profile"
set-name="firstname, name-separator, lastname"
value-name-separator="&nbsp;"
set-location="city, city-separator, country"
value-city-separator=",&nbsp;"
data-fields="avatar, name, location"
widget-avatar="ldp-display-img"
bind-resource
></ldp-display>
</div>

View File

@ -5,31 +5,14 @@
<ldp-display <ldp-display
id="profilesList" id="profilesList"
data-src="http://localhost:8000/users/" data-src="http://localhost:8000/members/"
set-name="firstname, name-separator, lastname" set-name="firstname, name-separator, lastname"
value-name-separator="&nbsp;" value-name-separator="&nbsp;"
set-location="city, city-separator, country" set-location="city, city-separator, country"
value-city-separator=",&nbsp;" value-city-separator=",&nbsp;"
data-fields="avatar, name, location" data-fields="avatar, name, location"
widget-avatar="ldp-display-img" widget-avatar="ldp-display-img"
search-fields="city" search-fields="firstname, lastname"
next="member"
></ldp-display> ></ldp-display>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var profilesListElt = document.querySelector('#profilesList');
var profileDivElt = document.querySelector('#profileDiv');
var profileDetailElt = document.querySelector('#profileDetail');
profilesListElt.addEventListener('select', function (event) {
profileDivElt.style.display = 'flex';
profileDetailElt.setAttribute("data-src", event.detail.resource['@id']);
});
profileDivElt.addEventListener('click', function (event) {
if (event.target.id == "profileDiv") {
profileDivElt.style.display = 'none';
}
});
});
</script>
</div> </div>

View File

@ -8,10 +8,12 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="members"> <ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="members">
<ldp-route class="nav-item active" name="members">Membres</ldp-route> <ldp-route class="nav-item active" name="members">Membres</ldp-route>
<ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">Membre</ldp-route>
<ldp-route class="nav-item" name="projects">Projets</ldp-route> <ldp-route class="nav-item" name="projects">Projets</ldp-route>
<ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">Projet</ldp-route>
<ldp-route class="nav-item" name="groups">Groupes</ldp-route> <ldp-route class="nav-item" name="groups">Groupes</ldp-route>
<ldp-route class="nav-item" name="calendar">Agenda</ldp-route> <!--<ldp-route class="nav-item" name="calendar">Agenda</ldp-route>-->
<ldp-route class="nav-item" name="drive">Drive</ldp-route> <!--<ldp-route class="nav-item" name="drive">Drive</ldp-route>-->
</ldp-router> </ldp-router>
</div> </div>
</nav> </nav>

60
src/html/project.html Normal file
View File

@ -0,0 +1,60 @@
<div id="project" style="display: none">
<div class="page-header">
<h1>Project</h1>
</div>
<ldp-display
id="projectTitle"
set-label="number, label-separator, name"
value-label-separator="&nbsp;-&nbsp;"
data-fields="label"
bind-resource
></ldp-display>
<div id="projectDiv" style="display: none;">
<div class="container-fluid" id="projectContainer">
<div class="row">
<div class="col-md-9" id="projectLeftCol">
<div class="chat-box">
<img src=".\img\chat_image.PNG" alt="Chat box">
</div>
</div>
<div class="col-md-3" id="projectRightCol">
<ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
<button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
</div>
<!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var projectsListElt = document.querySelector('#projectsList');
var projectsTableElt = document.querySelector('#projectsTable');
var projectDivElt = document.querySelector('#projectDiv');
var projectDetailElt = document.querySelector('#projectDetail');
var projectTitleElt = document.querySelector('#projectTitle');
var projectsListTitleElt = document.querySelector('#projectsListTitle');
projectsListElt.addEventListener('select', function (event) {
projectsTableElt.style.display = 'none';
projectsListTitleElt.style.display = 'none';
projectDivElt.style.display = 'block';
projectTitleElt.style.display ='block';
projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
});
projectDivElt.addEventListener('click', function (event) {
if (event.target.id == "projectDivBackButton") {
projectDivElt.style.display = 'none';
projectTitleElt.style.display = 'none';
projectsTableElt.style.display = 'block';
projectsListTitleElt.style.display = 'block';
}
});
});
</script>
</div>

View File

@ -1,64 +1,27 @@
<div id="projects" style="display: none"> <div id="projects" style="display: none">
<h1 class="page-title" id="projectsListTitle">Projets</h1> <div class="page-header">
<div id="projectsTable"> <h1>Projets</h1>
<ol>
<li id="categorieNumber">Numéro</li>
<li id="categorieNumberAlt"></li>
<li id="categorieTitle">Titre</li>
<li id="categorieAssociate">Associé</li>
<li id="categorieIncome">CA</li>
<li id="categorieState">Etat</li>
</ol>
<ldp-display id="projectsList" data-src="http://lucky.alwaysdata.net/api/projects/" data-fields="number, title, associate, income-div, state" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
</div> </div>
<!-- project view -->
<ldp-display id="projectTitle" data-fields="title, space, number" value-space="&#160-&#160"></ldp-display>
<div id="projectDiv" style="display: none;">
<div class="container-fluid" id="projectContainer">
<div class="row">
<div class="col-md-9" id="projectLeftCol">
<div class="chat-box">
<img src=".\img\chat_image.PNG" alt="Chat box">
</div>
</div>
<div class="col-md-3" id="projectRightCol">
<ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
<button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
</div>
<!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var projectsListElt = document.querySelector('#projectsList');
var projectsTableElt = document.querySelector('#projectsTable');
var projectDivElt = document.querySelector('#projectDiv');
var projectDetailElt = document.querySelector('#projectDetail');
var projectTitleElt = document.querySelector('#projectTitle');
var projectsListTitleElt = document.querySelector('#projectsListTitle');
projectsListElt.addEventListener('select', function (event) {
projectsTableElt.style.display = 'none';
projectsListTitleElt.style.display = 'none';
projectDivElt.style.display = 'block';
projectTitleElt.style.display ='block';
projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
});
projectDivElt.addEventListener('click', function (event) {
if (event.target.id == "projectDivBackButton") {
projectDivElt.style.display = 'none';
projectTitleElt.style.display = 'none';
projectsTableElt.style.display = 'block';
projectsListTitleElt.style.display = 'block';
}
});
});
</script>
</div>
<!--<div id="projectsTable">-->
<!--<ol>-->
<!--<li id="categorieNumber">Numéro</li>-->
<!--<li id="categorieNumberAlt">N°</li>-->
<!--<li id="categorieTitle">Titre</li>-->
<!--<li id="categorieAssociate">Associé</li>-->
<!--<li id="categorieIncome">CA</li>-->
<!--<li id="categorieState">Etat</li>-->
<!--</ol>-->
<!--</div>-->
<ldp-display
id="projectsList"
data-src="http://localhost:8000/projects/"
set-label="number, label-separator, name"
value-label-separator="&nbsp;-&nbsp;"
data-fields="label"
search-fields="number, name"
next="project"
></ldp-display>
</div>

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

View File

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

52
src/models.py Normal file
View File

@ -0,0 +1,52 @@
from django.db import models
class Member(models.Model):
avatar = models.URLField()
firstname = models.CharField(max_length=255, default='')
lastname = models.CharField(max_length=255, default='')
email = models.CharField(max_length=255, default='')
number = models.CharField(max_length=255, default='')
cell = models.ForeignKey("Cell")
country = models.CharField(max_length=255, default='')
skills = models.ManyToManyField("Skill")
projects = models.ManyToManyField("Project")
def __str__(self):
return self.firstname +' '+ self.lastname
class Skill(models.Model):
name = models.CharField(max_length=255, default='')
def __str__(self):
return self.name
class Project(models.Model):
name = models.CharField(max_length=255, default='')
number = models.PositiveIntegerField(default='0')
client = models.OneToOneField("Client")
def __str__(self):
return self.name
class Client(models.Model):
name = models.CharField(max_length=255, default='')
address = models.CharField(max_length=255, default='')
def __str__(self):
return self.name
class Cell(models.Model):
name = models.CharField(max_length=255, default='')
city = models.CharField(max_length=255, default='')
country = models.CharField(max_length=255, default='')
def __str__(self):
return self.name