Revize d80a6474
Přidáno uživatelem Jiří Noháč před asi 4 roky(ů)
- ID d80a647433e1e602b3704a26ff310fb9c9e5c6d8
- Rodič 977060b9
| app/Http/Controllers/CategoriesController.php | ||
|---|---|---|
| 14 | 14 |
$this->middleware('auth');
|
| 15 | 15 |
} |
| 16 | 16 |
|
| 17 |
public function calculateClusters($categoriesCount) |
|
| 18 |
{
|
|
| 19 |
if(isset($categoriesCount)) |
|
| 20 |
{
|
|
| 21 |
$min = PHP_INT_MAX; |
|
| 22 |
$max = PHP_INT_MIN; |
|
| 23 |
foreach($categoriesCount as $category) |
|
| 24 |
{
|
|
| 25 |
$c = count($category); |
|
| 26 |
if($c < $min) |
|
| 27 |
{
|
|
| 28 |
$min = $c; |
|
| 29 |
} |
|
| 30 |
|
|
| 31 |
if($c > $max) |
|
| 32 |
{
|
|
| 33 |
$max = $c; |
|
| 34 |
} |
|
| 35 |
} |
|
| 36 |
$center = $min + (($max - $min)/2); |
|
| 37 |
return array($min, $center, $max); |
|
| 38 |
} |
|
| 39 |
else |
|
| 40 |
{
|
|
| 41 |
return null; |
|
| 42 |
} |
|
| 43 |
} |
|
| 44 |
|
|
| 45 | 17 |
/** |
| 46 | 18 |
* Display a listing of the resource. |
| 47 | 19 |
* |
| ... | ... | |
| 53 | 25 |
{
|
| 54 | 26 |
$userId = Auth::user()->id; |
| 55 | 27 |
|
| 56 |
$categoryNames = Category::all();
|
|
| 28 |
$categoryNames = Category::orderBy('id')->get();
|
|
| 57 | 29 |
$countCategory = count($categoryNames); |
| 58 |
$categories = array(); |
|
| 59 |
for($i = 1; $i <= $countCategory;$i++) |
|
| 60 |
{
|
|
| 61 |
array_push($categories, Category::find($i)->artefacts()->get()); |
|
| 62 |
} |
|
| 63 |
$clusters = $this->calculateClusters($categories); |
|
| 64 |
|
|
| 65 |
$categorySizes = array(); |
|
| 66 |
if(isset($clusters)) |
|
| 67 |
{
|
|
| 68 |
foreach($categories as $category) |
|
| 69 |
{
|
|
| 70 |
$c = count($category); |
|
| 71 |
$type1 = abs($clusters['0'] - $c); |
|
| 72 |
$type2 = abs($clusters['1'] - $c); |
|
| 73 |
$type3 = abs($clusters['2'] - $c); |
|
| 74 |
|
|
| 75 |
if($type1 <= $type2 && $type1 <= $type3) |
|
| 76 |
{
|
|
| 77 |
array_push($categorySizes, 1); |
|
| 78 |
} |
|
| 79 |
else if($type2 <= $type1 && $type2 <= $type3) |
|
| 80 |
{
|
|
| 81 |
array_push($categorySizes, 2); |
|
| 82 |
} |
|
| 83 |
else |
|
| 84 |
{
|
|
| 85 |
array_push($categorySizes, 3); |
|
| 86 |
} |
|
| 87 |
} |
|
| 88 |
} |
|
| 89 | 30 |
|
| 90 | 31 |
$data = array( |
| 91 | 32 |
'title' => 'Categories', |
| 92 | 33 |
'user' => User::find($userId), |
| 93 | 34 |
'count' => $countCategory, |
| 94 |
'categories' => $categories, |
|
| 95 |
'categorySizes' => $categorySizes, |
|
| 96 | 35 |
'categoryNames' => $categoryNames |
| 97 | 36 |
); |
| 98 | 37 |
return view('categories.index') -> with($data);
|
| resources/sass/_custom.scss | ||
|---|---|---|
| 360 | 360 |
} |
| 361 | 361 |
} |
| 362 | 362 |
|
| 363 |
.monButton {
|
|
| 364 |
|
|
| 365 |
&:before {
|
|
| 366 |
background-image : url(../images/Button_Arrow_Small.png); |
|
| 367 |
//height: 0.9685rem; |
|
| 368 |
//width: 0.59055rem; |
|
| 369 |
} |
|
| 370 |
|
|
| 371 |
&:hover {
|
|
| 372 |
background-color: transparent; |
|
| 373 |
border-color: $theme-color-four; |
|
| 374 |
} |
|
| 363 |
.content {
|
|
| 364 |
position: relative; |
|
| 365 |
|
|
| 366 |
//Circle style button |
|
| 367 |
//Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories. |
|
| 368 |
.btn-circle.rounded-circle {
|
|
| 369 |
padding: 6px 0px; |
|
| 370 |
font-size: 16px; |
|
| 371 |
text-align: center; |
|
| 372 |
} |
|
| 375 | 373 |
|
| 376 |
&:focus {
|
|
| 377 |
background-color: transparent; |
|
| 378 |
border-color: $theme-color-four; |
|
| 379 |
outline: none !important; |
|
| 380 |
box-shadow: none !important; |
|
| 381 |
} |
|
| 374 |
.btn-categories {
|
|
| 375 |
position: absolute; |
|
| 376 |
border-width: 5px; |
|
| 377 |
background-color: $theme-color-five; |
|
| 378 |
border-color: $theme-color-four; |
|
| 379 |
color: $theme-color-four; |
|
| 380 |
outline: none !important; |
|
| 381 |
box-shadow: none !important; |
|
| 382 |
font-weight: $font-weight-two; |
|
| 382 | 383 |
|
| 383 | 384 |
&:active {
|
| 384 |
background-color: transparent !important;
|
|
| 385 |
border-color: transparent !important;
|
|
| 385 |
background-color: $theme-color-three;
|
|
| 386 |
border-color: $theme-color-four;
|
|
| 386 | 387 |
outline: none !important; |
| 387 | 388 |
box-shadow: none !important; |
| 389 |
color: $theme-color-five; |
|
| 388 | 390 |
} |
| 389 | 391 |
} |
| 392 |
} |
|
| 390 | 393 |
|
| 391 |
.content {
|
|
| 392 |
position: relative; |
|
| 394 |
//CATEGORIES - TILES |
|
| 395 |
.btn.btn-dark.cat-tile |
|
| 396 |
{
|
|
| 397 |
//STYLING |
|
| 398 |
border-color: $theme-color-four; |
|
| 399 |
border-radius: 0; |
|
| 400 |
border-style: solid; |
|
| 401 |
border-width: 2px; |
|
| 402 |
color: $theme-color-four; |
|
| 403 |
background-color: $theme-color-five; |
|
| 404 |
text-align: center; |
|
| 405 |
outline: none !important; |
|
| 406 |
box-shadow: none !important; |
|
| 393 | 407 |
|
| 394 |
//Circle style button |
|
| 395 |
//Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories. |
|
| 396 |
.btn-circle.rounded-circle {
|
|
| 397 |
padding: 6px 0px; |
|
| 398 |
font-size: 16px; |
|
| 399 |
text-align: center; |
|
| 400 |
} |
|
| 401 |
.btn-categories |
|
| 408 |
//FONT |
|
| 409 |
font-size: 8mm; |
|
| 410 |
word-wrap: break-word; |
|
| 411 |
|
|
| 412 |
//SPACING |
|
| 413 |
margin: 10pt 32pt; |
|
| 414 |
height: 40mm; |
|
| 415 |
width: 86%; |
|
| 416 |
|
|
| 417 |
&:active, &:focus |
|
| 402 | 418 |
{
|
| 403 |
position: absolute; |
|
| 404 |
border-width: 5px; |
|
| 405 |
background-color: $theme-color-five; |
|
| 419 |
background-color: $theme-color-three; |
|
| 406 | 420 |
border-color: $theme-color-four; |
| 407 |
color:$theme-color-four; |
|
| 408 | 421 |
outline: none !important; |
| 409 | 422 |
box-shadow: none !important; |
| 410 |
font-weight: $font-weight-two; |
|
| 411 |
|
|
| 412 |
&:active |
|
| 413 |
{
|
|
| 414 |
background-color: $theme-color-three; |
|
| 415 |
border-color: $theme-color-four; |
|
| 416 |
outline: none !important; |
|
| 417 |
box-shadow: none !important; |
|
| 418 |
color:$theme-color-five; |
|
| 419 |
} |
|
| 420 |
} |
|
| 421 |
|
|
| 422 |
.btn-sm |
|
| 423 |
{
|
|
| 424 |
width: 120px; |
|
| 425 |
height: 120px; |
|
| 426 |
} |
|
| 427 |
.btn-dm |
|
| 428 |
{
|
|
| 429 |
width: 240px; |
|
| 430 |
height: 240px; |
|
| 431 |
} |
|
| 432 |
.btn-xl |
|
| 433 |
{
|
|
| 434 |
width: 360px; |
|
| 435 |
height: 360px; |
|
| 423 |
color: $theme-color-five; |
|
| 436 | 424 |
} |
| 425 |
} |
|
| 437 | 426 |
|
| 427 |
//CATEGORIES - enter button |
|
| 428 |
.btn.button-square.cat-enter-butt |
|
| 429 |
{
|
|
| 430 |
position: fixed; |
|
| 431 |
bottom: 8%; |
|
| 432 |
right: 45%; |
|
| 433 |
display: none; |
|
| 438 | 434 |
} |
| 439 | 435 |
} |
| 440 | 436 |
|
| ... | ... | |
| 515 | 511 |
{
|
| 516 | 512 |
.head-title.text-center h1 |
| 517 | 513 |
{
|
| 518 |
font-size: 45pt; |
|
| 514 |
font-size: 23pt; |
|
| 515 |
padding-top: 50pt; |
|
| 516 |
margin-left: 36pt; |
|
| 517 |
white-space: nowrap; |
|
| 519 | 518 |
} |
| 520 | 519 |
|
| 521 | 520 |
.btn-circle.rounded-circle.btn-sm |
| resources/views/categories/index.blade.php | ||
|---|---|---|
| 1 |
@extends('layouts.art')
|
|
| 1 |
@extends('layouts.app')
|
|
| 2 | 2 |
|
| 3 | 3 |
@section('title', 'Categories')
|
| 4 | 4 |
|
| 5 | 5 |
@section('content')
|
| 6 | 6 |
@if(isset($user)) |
| 7 | 7 |
{{--<p><?php dd($categories); ?></p>--}}
|
| 8 |
<div> |
|
| 9 |
<button type="button" class="btn btn-primary button-image monButton"></button>
|
|
| 10 |
</div>
|
|
| 11 |
<div class="head-title text-center">
|
|
| 12 |
<h1>choose a few topics</h1>
|
|
| 13 |
</div>
|
|
| 14 |
<div class="content" id="canvas">
|
|
| 15 |
{{--@for($k = 1; $k <= count($categories);$k++)--}}
|
|
| 16 |
@for($k = 1; $k <= 10;$k++)
|
|
| 17 |
@if($categorySizes[$k-1] == 1)
|
|
| 18 |
<button type="button" class="btn btn-circle rounded-circle btn-categories btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
|
|
| 19 |
@elseif($categorySizes[$k-1] == 2)
|
|
| 20 |
<button type="button" class="btn btn-circle rounded-circle btn-categories btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
|
|
| 21 |
@else
|
|
| 22 |
<button type="button" class="btn btn-circle rounded-circle btn-categories btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
|
|
| 23 |
@endif
|
|
| 24 |
@endfor
|
|
| 8 |
<div class="cat-main-div" onclick="resetEnter()">
|
|
| 9 |
<div class="head-title text-center">
|
|
| 10 |
<h1>choose a few topics</h1>
|
|
| 11 |
</div>
|
|
| 12 |
<div class="row">
|
|
| 13 |
{{--@for($k = 1; $k <= count($categories);$k++)--}}
|
|
| 14 |
@for($k = 0; $k < $count;$k++)
|
|
| 15 |
<div class="col-md-2">
|
|
| 16 |
<button class="btn btn-dark cat-tile" onclick="showEnterButton({{$categoryNames[$k]->id}})">
|
|
| 17 |
{{$categoryNames[$k]->nameCZ}}
|
|
| 18 |
</button> |
|
| 19 |
</div>
|
|
| 20 |
@endfor
|
|
| 21 |
</div>
|
|
| 22 |
<div class="carousel-button">
|
|
| 23 |
<a class="btn button-square cat-enter-butt" role="button">enter</a>
|
|
| 24 |
</div>
|
|
| 25 | 25 |
</div> |
| 26 | 26 |
<script> |
| 27 |
function randomCategoryPos(name, countButtons) |
|
| 28 |
{
|
|
| 29 |
var DISTANCE = 360; |
|
| 30 |
var MAX_DISTANCE = 3.5 * DISTANCE; |
|
| 31 |
var sWidth = screen.width; |
|
| 32 |
var positionsX = []; |
|
| 33 |
var positionsY = []; |
|
| 34 |
var types = []; |
|
| 35 |
var offset = 50; |
|
| 36 |
|
|
| 37 |
if(sWidth <= 540) |
|
| 38 |
{
|
|
| 39 |
sWidth -= 100; |
|
| 40 |
DISTANCE = 190; |
|
| 41 |
MAX_DISTANCE = 3.5 * DISTANCE; |
|
| 42 |
offset = 25; |
|
| 43 |
} |
|
| 44 |
else |
|
| 45 |
{
|
|
| 46 |
if(sWidth > 720) |
|
| 47 |
{
|
|
| 48 |
sWidth = 720; |
|
| 49 |
} |
|
| 50 |
} |
|
| 51 |
console.log(DISTANCE+ "dis\n"); |
|
| 52 |
console.log(MAX_DISTANCE+ "max_dis\n"); |
|
| 53 |
for(var i = 0; i < countButtons; i++) |
|
| 54 |
{
|
|
| 55 |
var size = document.getElementById(name + (i+1)).className; |
|
| 56 |
var type; |
|
| 57 |
if(size.includes("btn-sm"))
|
|
| 58 |
{
|
|
| 59 |
if(sWidth <= 540) |
|
| 60 |
{
|
|
| 61 |
type = 45; |
|
| 62 |
} |
|
| 63 |
else |
|
| 64 |
{
|
|
| 65 |
type = 60; |
|
| 66 |
} |
|
| 67 |
} |
|
| 68 |
else if(size.includes("btn-dm"))
|
|
| 69 |
{
|
|
| 70 |
if(sWidth <= 540) |
|
| 71 |
{
|
|
| 72 |
type = 65; |
|
| 73 |
} |
|
| 74 |
else |
|
| 75 |
{
|
|
| 76 |
type = 120; |
|
| 77 |
} |
|
| 78 |
} |
|
| 79 |
else |
|
| 80 |
{
|
|
| 81 |
if(sWidth <= 540) |
|
| 82 |
{
|
|
| 83 |
type = 90; |
|
| 84 |
} |
|
| 85 |
else |
|
| 86 |
{
|
|
| 87 |
type = 180; |
|
| 88 |
} |
|
| 89 |
} |
|
| 90 |
console.log(type + "<br>"); |
|
| 91 |
//document.write(type + "<br>"); |
|
| 27 |
var catId = -1; |
|
| 28 |
var show = 0; |
|
| 92 | 29 |
|
| 93 |
var done = true; |
|
| 94 |
var topS; |
|
| 95 |
var rightS; |
|
| 96 |
while(done) |
|
| 97 |
{
|
|
| 98 |
if(i == 0) |
|
| 99 |
{
|
|
| 100 |
topS = offset + type; |
|
| 101 |
} |
|
| 102 |
else |
|
| 103 |
{
|
|
| 104 |
topS = (Math.floor(Math.random() * 2048) + offset) + type; |
|
| 105 |
} |
|
| 106 |
rightS = (Math.floor(Math.random() * sWidth) + 1) + type; |
|
| 107 |
console.log(topS + " " + rightS + "nn<br>"); |
|
| 108 |
|
|
| 109 |
//Check distancing from other circles |
|
| 110 |
var okay = true; |
|
| 111 |
for(var k = 0; k < positionsX.length; k++) |
|
| 112 |
{
|
|
| 113 |
var powX = Math.abs(positionsX[k] - topS); |
|
| 114 |
var powY = Math.abs(positionsY[k] - rightS); |
|
| 115 |
var tmp = Math.sqrt((powX*powX) + (powY*powY)); |
|
| 116 |
console.log(tmp+ "tmp<br>"); |
|
| 117 |
if(tmp < DISTANCE) |
|
| 118 |
{
|
|
| 119 |
okay = false; |
|
| 120 |
break; |
|
| 121 |
} |
|
| 122 |
} |
|
| 123 |
|
|
| 124 |
if(okay) |
|
| 125 |
{
|
|
| 126 |
done = false; |
|
| 127 |
} |
|
| 128 |
} |
|
| 129 |
|
|
| 130 |
//document.write("<br>");
|
|
| 131 |
positionsX.push(topS); |
|
| 132 |
positionsY.push(rightS); |
|
| 133 |
types.push(type); |
|
| 134 |
} |
|
| 30 |
function showEnterButton(id) |
|
| 31 |
{
|
|
| 32 |
catId = id; |
|
| 33 |
show = 1; |
|
| 34 |
$(".cat-enter-butt").css('display', "inline");
|
|
| 35 |
} |
|
| 135 | 36 |
|
| 136 |
for(var i = 1; i <= countButtons; i++) |
|
| 37 |
function resetEnter() |
|
| 38 |
{
|
|
| 39 |
if(show == 0) |
|
| 137 | 40 |
{
|
| 138 |
document.getElementById(name + i).style.top = (positionsX[i-1] - types[i-1]) + "px";
|
|
| 139 |
document.getElementById(name + i).style.right = (positionsY[i-1] - types[i-1]) + "px";
|
|
| 41 |
catId = -1;
|
|
| 42 |
$(".cat-enter-butt").css('display', "none");
|
|
| 140 | 43 |
} |
| 44 |
show = 0; |
|
| 141 | 45 |
} |
| 142 |
|
|
| 143 |
var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
|
|
| 144 |
randomCategoryPos("cat-", countButtons);
|
|
| 145 | 46 |
</script> |
| 146 | 47 |
@else |
| 147 | 48 |
<ul class="list-group"> |
Také k dispozici: Unified diff
Revert "Revert "Issue @7957 #4h""
This reverts commit 977060b91a62942235ea39795f4a9821cc89077f