From 7fc0f489f7dd34f7ad7ac11403b3fad8b773cd64 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Sat, 17 Mar 2018 18:34:32 +0100
Subject: [PATCH] Templated index.php
---
Gruntfile.js | 26 +-----
src/html/header.html => index.php | 21 +++++
src/html/calendar.html | 4 +
src/html/drive.html | 3 +
src/html/footer.html | 2 -
src/html/groups.html | 6 ++
src/html/home.html | 5 +
src/html/index.html | 146 ------------------------------
src/html/members.html | 29 ++++++
src/html/menu.html | 11 +++
src/html/projects.html | 64 +++++++++++++
11 files changed, 147 insertions(+), 170 deletions(-)
rename src/html/header.html => index.php (52%)
create mode 100644 src/html/calendar.html
create mode 100644 src/html/drive.html
delete mode 100644 src/html/footer.html
create mode 100644 src/html/groups.html
create mode 100644 src/html/home.html
delete mode 100644 src/html/index.html
create mode 100644 src/html/members.html
create mode 100644 src/html/menu.html
create mode 100644 src/html/projects.html
diff --git a/Gruntfile.js b/Gruntfile.js
index 358fcf9c..a8aa8554 100644
--- a/Gruntfile.js
+++ b/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: {
- files: ['src/**/*'],
- tasks: ['concat', 'sass'],
+ files: ['src/scss/**/*.scss'],
+ tasks: ['sass'],
}
});
// These plugins provide necessary tasks.
- grunt.loadNpmTasks('grunt-contrib-concat');
+ //grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
- grunt.registerTask('default', ['concat', 'sass']);
+ grunt.registerTask('default', ['sass']);
};
diff --git a/src/html/header.html b/index.php
similarity index 52%
rename from src/html/header.html
rename to index.php
index c98523b6..c046cf83 100644
--- a/src/html/header.html
+++ b/index.php
@@ -24,3 +24,24 @@
</head>
<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>
diff --git a/src/html/calendar.html b/src/html/calendar.html
new file mode 100644
index 00000000..a5cfd4de
--- /dev/null
+++ b/src/html/calendar.html
@@ -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>
diff --git a/src/html/drive.html b/src/html/drive.html
new file mode 100644
index 00000000..efcbb4ba
--- /dev/null
+++ b/src/html/drive.html
@@ -0,0 +1,3 @@
+<div id="drive" style="display: none">
+ <h1 class="page-title">Drive</h1>
+</div>
diff --git a/src/html/footer.html b/src/html/footer.html
deleted file mode 100644
index b605728e..00000000
--- a/src/html/footer.html
+++ /dev/null
@@ -1,2 +0,0 @@
- </body>
-</html>
diff --git a/src/html/groups.html b/src/html/groups.html
new file mode 100644
index 00000000..d5c27419
--- /dev/null
+++ b/src/html/groups.html
@@ -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>
diff --git a/src/html/home.html b/src/html/home.html
new file mode 100644
index 00000000..14c027aa
--- /dev/null
+++ b/src/html/home.html
@@ -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>
diff --git a/src/html/index.html b/src/html/index.html
deleted file mode 100644
index 39176c97..00000000
--- a/src/html/index.html
+++ /dev/null
@@ -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>
diff --git a/src/html/members.html b/src/html/members.html
new file mode 100644
index 00000000..b9364d7a
--- /dev/null
+++ b/src/html/members.html
@@ -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>
diff --git a/src/html/menu.html b/src/html/menu.html
new file mode 100644
index 00000000..2a7f4ea7
--- /dev/null
+++ b/src/html/menu.html
@@ -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>
diff --git a/src/html/projects.html b/src/html/projects.html
new file mode 100644
index 00000000..9f302e93
--- /dev/null
+++ b/src/html/projects.html
@@ -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>
+
--
GitLab