Templated index.php
This commit is contained in:
Alexandre Bourlier
parent
c2a2d19713
commit
7fc0f489f7
26
Gruntfile.js
26
Gruntfile.js
@ -18,37 +18,19 @@ module.exports = function(grunt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
concat: {
|
|
||||||
options: {
|
|
||||||
stripBanners: true
|
|
||||||
},
|
|
||||||
dist: {
|
|
||||||
src: ['src/html/header.html', 'src/html/*.html', '!src/html/footer.html', 'src/html/footer.html'],
|
|
||||||
dest: 'index.html'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//uglify: {
|
|
||||||
//options: {},
|
|
||||||
//dist: {
|
|
||||||
//src: '<%= concat.dist.dest %>',
|
|
||||||
//dest: 'dist/<%= pkg.name %>.min.js'
|
|
||||||
//}
|
|
||||||
//},
|
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
files: ['src/**/*'],
|
files: ['src/scss/**/*.scss'],
|
||||||
tasks: ['concat', 'sass'],
|
tasks: ['sass'],
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// These plugins provide necessary tasks.
|
// These plugins provide necessary tasks.
|
||||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
//grunt.loadNpmTasks('grunt-contrib-concat');
|
||||||
grunt.loadNpmTasks('grunt-sass');
|
grunt.loadNpmTasks('grunt-sass');
|
||||||
//grunt.loadNpmTasks('grunt-contrib-uglify');
|
//grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
|
|
||||||
// Default task.
|
// Default task.
|
||||||
grunt.registerTask('default', ['concat', 'sass']);
|
grunt.registerTask('default', ['sass']);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -24,3 +24,24 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="mainContainer" class="container-fluid">
|
||||||
|
<div class="row pt-3">
|
||||||
|
<?php require_once('src/html/menu.html'); ?>
|
||||||
|
|
||||||
|
<main id="ldp-root" class="col-md-10">
|
||||||
|
<?php require_once('src/html/home.html'); ?>
|
||||||
|
<?php require_once('src/html/members.html'); ?>
|
||||||
|
<?php require_once('src/html/projects.html'); ?>
|
||||||
|
<?php require_once('src/html/groups.html'); ?>
|
||||||
|
<?php require_once('src/html/calendar.html'); ?>
|
||||||
|
<?php require_once('src/html/drive.html'); ?>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--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>
|
||||||
|
</html>
|
||||||
4
src/html/calendar.html
Normal file
4
src/html/calendar.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<div id="calendar" style="display: none">
|
||||||
|
<h1 class="page-title">Agenda</h1>
|
||||||
|
<ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
|
||||||
|
</div>
|
||||||
3
src/html/drive.html
Normal file
3
src/html/drive.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<div id="drive" style="display: none">
|
||||||
|
<h1 class="page-title">Drive</h1>
|
||||||
|
</div>
|
||||||
@ -1,2 +0,0 @@
|
|||||||
</body>
|
|
||||||
</html>
|
|
||||||
6
src/html/groups.html
Normal file
6
src/html/groups.html
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<div id="groups" style="display: none">
|
||||||
|
<h1 class="page-title">Groupes</h1>
|
||||||
|
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
|
||||||
|
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
|
||||||
|
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
|
||||||
|
</div>
|
||||||
5
src/html/home.html
Normal file
5
src/html/home.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div id="home" style="display: none">
|
||||||
|
<div id="logoContainer">
|
||||||
|
<img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,146 +0,0 @@
|
|||||||
<div id="mainContainer" class="container-fluid">
|
|
||||||
<div class="row pt-3">
|
|
||||||
|
|
||||||
<!-- Menu -->
|
|
||||||
<div class="col-md-2 menu">
|
|
||||||
<div id="menu-title">HAPPY APP</div>
|
|
||||||
<ldp-router root="ldp-root" default-route="home">
|
|
||||||
<ldp-route name="members">Membres</ldp-route>
|
|
||||||
<ldp-route name="projects">Projets</ldp-route>
|
|
||||||
<ldp-route name="groups">Groupes</ldp-route>
|
|
||||||
<ldp-route name="calendar">Agenda</ldp-route>
|
|
||||||
<ldp-route name="drive">Drive</ldp-route>
|
|
||||||
<!-- <ldp-route name="home">Home</ldp-route> -->
|
|
||||||
</ldp-router>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main id="ldp-root" class="col-md-10">
|
|
||||||
<!-- HOME -->
|
|
||||||
<div id="home" style="display: none">
|
|
||||||
<div id="logoContainer">
|
|
||||||
<img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MEMBERS -->
|
|
||||||
<div id="members" style="display: none">
|
|
||||||
<h1 class="page-title">Membres</h1>
|
|
||||||
|
|
||||||
<ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
|
|
||||||
|
|
||||||
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
|
|
||||||
set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->
|
|
||||||
|
|
||||||
<!-- test direct dans data-fields -->
|
|
||||||
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></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>
|
|
||||||
|
|
||||||
<!-- PROJECTS -->
|
|
||||||
<div id="projects" style="display: none">
|
|
||||||
<h1 class="page-title" id="projectsListTitle">Projets</h1>
|
|
||||||
<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>
|
|
||||||
<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=" €"></ldp-display>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- project view -->
|
|
||||||
<ldp-display id="projectTitle" data-fields="title, space, number" value-space=" - "></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=" €"></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>
|
|
||||||
|
|
||||||
<!-- GROUPS -->
|
|
||||||
<div id="groups" style="display: none">
|
|
||||||
<h1 class="page-title">Groupes</h1>
|
|
||||||
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
|
|
||||||
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
|
|
||||||
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CALENDAR -->
|
|
||||||
<div id="calendar" style="display: none">
|
|
||||||
<h1 class="page-title">Agenda</h1>
|
|
||||||
<ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- DRIVE -->
|
|
||||||
<div id="drive" style="display: none">
|
|
||||||
<h1 class="page-title">Drive</h1>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--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>
|
|
||||||
29
src/html/members.html
Normal file
29
src/html/members.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<div id="members" style="display: none">
|
||||||
|
<h1 class="page-title">Membres</h1>
|
||||||
|
|
||||||
|
<ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
|
||||||
|
|
||||||
|
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
|
||||||
|
set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->
|
||||||
|
|
||||||
|
<!-- test direct dans data-fields -->
|
||||||
|
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></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>
|
||||||
11
src/html/menu.html
Normal file
11
src/html/menu.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<div class="col-md-2 menu">
|
||||||
|
<div id="menu-title">HAPPY APP</div>
|
||||||
|
<ldp-router root="ldp-root" default-route="home">
|
||||||
|
<ldp-route name="members">Membres</ldp-route>
|
||||||
|
<ldp-route name="projects">Projets</ldp-route>
|
||||||
|
<ldp-route name="groups">Groupes</ldp-route>
|
||||||
|
<ldp-route name="calendar">Agenda</ldp-route>
|
||||||
|
<ldp-route name="drive">Drive</ldp-route>
|
||||||
|
<!-- <ldp-route name="home">Home</ldp-route> -->
|
||||||
|
</ldp-router>
|
||||||
|
</div>
|
||||||
64
src/html/projects.html
Normal file
64
src/html/projects.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<div id="projects" style="display: none">
|
||||||
|
<h1 class="page-title" id="projectsListTitle">Projets</h1>
|
||||||
|
<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>
|
||||||
|
<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=" €"></ldp-display>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- project view -->
|
||||||
|
<ldp-display id="projectTitle" data-fields="title, space, number" value-space=" - "></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=" €"></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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user