Commit 86cbc357 authored by Nezael's avatar Nezael
Browse files

Merge branch 'paperboard' into 159-renommer-un-tableau-collaboratif

parents 303572e3 e06832b5
......@@ -7194,4 +7194,37 @@ textarea.fullWidth, input.fullWidth {
.panel-body {
text-align: justify;
}
/***PAPERBOARD***/
#board
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
#commands
{
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
}
#commands>button
{
margin-right: 20px;
}
#commands>input
{
margin-right: 20px;
}
#drawZone
{
position: relative;
border: 2px solid black;
}
\ No newline at end of file
......@@ -97,15 +97,28 @@
</div>
</div>
</div>
<div style="position: absolute;bottom: 20px;text-align:center;width: 100%">
<button style="margin-top: 10px"
ng-if="detailsWorkshopCtrl.workshop.running && !detailsWorkshopCtrl.workshop.connected"
ui-sref="project.workshops.details({elementId:workshop.id})">
{{::_labels.connectWorkshopBtn}}
</button>
</div>
</div><!-- Bouton rejoindre l'atelier, condition non remplis-->
<!-- <div style="position: absolute;bottom: 20px;text-align:center;width: 100%">
<button style="margin-top: 10px"
ng-if="detailsWorkshopCtrl.workshop.running && !detailsWorkshopCtrl.workshop.connected"
ui-sref="project.workshops.details({elementId:workshop.id})">
{{::_labels.connectWorkshopBtn}}
</button>
</div> -->
<div style="position: absolute;bottom: 20px;text-align:center;width: 100%">
<button style="margin-top: 10px"
ng-if="workshop.type!=1"
ui-sref="project.workshops.details({elementId:workshop.id})">
{{::_labels.connectWorkshopBtn}}
</button>
</div>
<div style="position: absolute;bottom: 20px;text-align:center;width: 100%">
<button style="margin-top: 10px"
ng-if="workshop.type==1"
ui-sref="project.workshops.paperboard({elementId:workshop.id})">
{{::_labels.connectWorkshopBtn}}
</button>
</div>
</div>
</div>
......
......@@ -197,5 +197,3 @@ root.controller('OverviewWorkshopCtrl', ['$scope', '$stateParams', '$http', '$wo
}
}]);
<button class="pull-right"
ng-click="leaveBoard()"
ui-sref="project.workshops.overview">{{::_labels.disconnectWorkshopBtn}}
</button>
<div class="clearfix group-overview">
<div class="group-overview-title">
<h4 style="text-align: center"><span ng-bind="::_labels.workshops"></span></h4>
<div class="sepator" style="background: #f08317; height: 2px; width: 200px; margin: 0 auto 40px auto;"></div>
</div>
<div id="board">
<canvas id="drawZone" width="500" height="500" style="border: thin solid black; margin: 0 auto"></canvas>
<div id="commands">
<input type="color" name="personnalized-color" id="personnalized-color">
<button ng-click="paperBoardCtrl.blackPaint()">Black</button>
<button ng-click="paperBoardCtrl.bluePaint()">Blue</button>
<button ng-click="paperBoardCtrl.redPaint()">Red</button>
<button>Cursor</button>
<button ng-click="paperBoardCtrl.penMode()">Pen</button>
<button>Circle</button>
<button>Square</button>
<button>Add Post-It</button>
<button>Erase</button>
<label for="lineWidth"> Line Width :
<input type="range" name="lineWidth" id="lineWidth" min="1" max="15" value="3" step="1">
</label>
</div>
</div>
</div>
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
'use strict';
/* Controllers */
root.controller('PaperBoardCtrl', ['$scope', '$stateParams', '$http', '$state', '$paperboardFactory', '$languageFactory', '$utilsFactory', function ($scope, $stateParams, $http, $state, $paperboardFactory, $languageFactory, $utilsFactory) {
let paperBoardCtrl = this;
let canvas = document.querySelector('#drawZone');
let ctx = canvas.getContext("2d");
let rect;
let mouseX = 0;
let mouseY = 0;
let lineWidth = 3;
let isDrawing = false;
let style = "#000";
let pen = false;
paperBoardCtrl.getPaperBoardDetails = function (paperBoardDetails) {
if (!paperBoardDetails) var paperBoardDetails = {"id": $stateParams.elementId};
$scope._showAlert({status: 2, message: $languageFactory._labels.alerts_loadingpaperBoardDetails});
$paperboardFactory.getPaperBoardDetails($scope._getProject(), paperBoardDetails.id, function (data)
{
if (data.status == "success")
{
let paperboard = data.details[0];
paperBoardCtrl.paperboard = JSON.parse(paperboard.params);
paperBoardCtrl.paperboard.id = paperboard.id;
paperBoardCtrl.paperboard.type = 1;
$scope._showAlert({status: 1, message: $languageFactory._labels.alerts_loadingpaperBoardDetailsSuccess});
}
else
{
$scope._showAlert({status: 3, message: $languageFactory._labels.alerts_loadingpaperBoardDetailsFailure});
}
});
}
paperBoardCtrl.lineDraw = function (ctx, x1, y1, x2, y2, styleColor, lineWidth)
{
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineCap = ctx.lineJoin = 'round';
ctx.strokeStyle = styleColor;
ctx.shadowColor = styleColor;
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.closePath();
}
paperBoardCtrl.penMode = function ()
{
pen = true;
}
$scope.leaveBoard = function(){
alert("Vous venez de quitter l'atelier");
}
paperBoardCtrl.getPaperBoardDetails();
document.querySelector('#lineWidth').addEventListener('change', e =>
{
lineWidth = document.querySelector('#lineWidth').value;
});
canvas.addEventListener('mousedown', e=>
{
rect = canvas.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
console.log("position souris X: " + e.clientX + "position canvas X: " + rect.left);
console.log("position souris Y: " + e.clientY + "position canvas Y: " + rect.top)
console.log("X: " + mouseX + " : Y: " + mouseY);
isDrawing = true;
});
canvas.addEventListener('mousemove', e=>
{
if(isDrawing)
{
if(pen)
{
console.log("après dessin X: " + mouseX + " : Y: " + mouseY);
paperBoardCtrl.lineDraw(ctx,mouseX,mouseY,e.clientX - rect.left, e.clientY - rect.top, style, lineWidth);
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}
}
});
canvas.addEventListener('mouseup', e =>
{
isDrawing = false;
});
document.querySelector('#personnalized-color').addEventListener('change', e =>
{
style = document.querySelector('#personnalized-color').value;
})
paperBoardCtrl.blackPaint = function ()
{
style = "#000";
document.querySelector('#personnalized-color').value = "#000";
}
paperBoardCtrl.bluePaint = function ()
{
style = "#0000FF";
document.querySelector('#personnalized-color').value = "#0000FF";
}
paperBoardCtrl.redPaint = function ()
{
style = "#FF0000";
document.querySelector('#personnalized-color').value = "#FF0000";
}
}]);
......@@ -417,7 +417,7 @@ angular.module('myApp', [
})
//$stateProvider.state({url:'/p/:projectName/workshops/new', templateUrl: __root+'components/projects/workshops/new.html', controller: 'NewWorkshopCtrl'})
// Page quand on clique sur "rejoindre un atelier"
$stateProvider.state('project.workshops.details', {
url: '/:elementId',
templateUrl: __root + 'components/projects/workshops/details.html',
......@@ -430,6 +430,20 @@ angular.module('myApp', [
}
}
})
$stateProvider.state('project.workshops.paperboard', {
url: '/:elementId',
templateUrl: __root + 'components/projects/workshops/paperboard.html',
controller: 'PaperBoardCtrl',
controllerAs: "paperBoardCtrl",
params: {
section: {
elementId: true,
value: null
}
}
})
$stateProvider.state('project.workshops.overview', {
url: '/overview/:section',
templateUrl: __root + 'components/projects/workshops/overview.html',
......
......@@ -3,6 +3,14 @@ function $paperboardFactory($rootScope, $serverFactory) {
var returns = {}
/**
* [getPaperboard description]
* @param {[int]} projectId [description]
* @param {[text]:title} params [description]
* @param {[type]} success [description]
* @param {[type]} failure [description]
* @return {[type]} [description]
*/
returns.addPaperBoard = function (projectId, params, success, failure){
return $serverFactory.runCommand("post_paperboard", {
projectId: projectId,
......@@ -12,7 +20,7 @@ function $paperboardFactory($rootScope, $serverFactory) {
/**
* [getPaperboard description]
* @param {[int]} projectId [description]
* @param {[int]} projectId [description]
* @param {[type]} success [description]
* @param {[type]} failure [description]
* @return {[type]} [description]
......@@ -23,6 +31,21 @@ function $paperboardFactory($rootScope, $serverFactory) {
}, success, failure);
};
/**
* [getPaperboard description]
* @param {[int]} projectId [description]
* @param {[int]} id [description]
* @param {[type]} success [description]
* @param {[type]} failure [description]
* @return {[type]} [description]
*/
returns.getPaperBoardDetails = function (projectId, id, success, failure) {
return $serverFactory.runCommand("get_paperboard_details", {
projectId: projectId,
id: id
}, success, failure);
};
return returns;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment