aswi2020merlot-gitlab/resources/views/categories/index.blade.php @ 977060b9
1 |
@extends('layouts.art') |
---|---|
2 |
|
3 |
@section('title', 'Categories') |
4 |
|
5 |
@section('content') |
6 |
@if(isset($user)) |
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 |
25 |
</div>
|
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>"); |
92 |
|
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 |
}
|
135 |
|
136 |
for(var i = 1; i <= countButtons; i++)
|
137 |
{
|
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"; |
140 |
}
|
141 |
}
|
142 |
|
143 |
var countButtons = document.getElementById("canvas").getElementsByTagName('button').length; |
144 |
randomCategoryPos("cat-", countButtons); |
145 |
</script> |
146 |
@else |
147 |
<ul class="list-group"> |
148 |
<li class="list-group-item"> |
149 |
<h3>Not found the USER in the database with number id {{$user->id}}!</h3> |
150 |
</li>
|
151 |
</ul>
|
152 |
@endif |
153 |
@endsection |