nouffer/rogaining_srv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix Ranking code step1

Browse Source
This commit is contained in:
Akira Miyata
2024-11-12 07:19:18 +09:00
parent 19f12652b9
commit fccc55cf18
9 changed files with 4094 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

486
supervisor/html/ranking_bck.html Normal file
View File

@ -0,0 +1,486 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ランキング</title>
<style>
.flex-slave {
margin: 10px;
}
#map {
width: 800px;
height: 600px;
}
#best{
position: relative;
line-height: 1.5em;
background: #fff;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
margin: 0 auto;
margin-top: 20px;
border-radius:8px;
counter-increment: count-ex1-5;
content: counter(number);
padding: 0px 10px 10px 30px;
margin:0px 0px 0px 5px;
}
#best::marker{
font-weight:bold;
color: #ff0801;
}
#best li{
counter-increment: count-ex1-5;
content: counter(number);
padding: 8px 10px 0px 0px;
margin:8px 0px 0px 8px;
line-height: 2em;
}
li::marker{
font-weight:bold;
color: #ff0801;
line-height: 1;
}
#best::before {
position: absolute;
background: #ff0801;
color: #FFF;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 23px;
height: 23px;
line-height: 22px;
text-align: center;
top: 5px;
font-family: "Font Awesome 5 Free";
content: "\f521";
font-weight: 900;
margin:6px 0px 0px 10px;
}
.black{
background-color: #000;
}
h5 {
position: relative;
padding: 0px 0px 0px 70px;
background-image: linear-gradient(0deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
-webkit-background-clip: text;
color: transparent;
display:flex;
align-items: center;
height:60px;
}
h5 .span3 {
position: absolute;
top: -10px;
left: 0px;
display: inline-block;
width: 52px;
height: px;
text-align: center;
background: #fa4141;
}
h5 .span3:before,
h5 .span3:after {
position: absolute;
content: '';
}
h5 .span3:before {
right: -10px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid #d90606;
}
h5 .span3:after {
top: 50%;
left: 0;
display: block;
height: %;
border: 26px solid #fa4141;
border-bottom-width: 15px;
border-bottom-color: transparent;
}
h5 .span3 i {
position: relative;
z-index: 1;
color: #fff100;
padding-top: 10px;
font-size: 24px;
}
.best
select.name{
display: block;
margin-bottom: -10px;
}
.best2 li{
position: relative;
overflow: hidden;
padding: 1.5rem 2rem 1.5rem 130px;
word-break: break-all;
border-top: 3px solid #000;
border-radius: 12px 0 0 0;
margin: 10px 0px 0px 0px;
}
.best2 span{
font-size: 40px;
font-size: 4rem;
position: absolute;
top: 0;
left: 0;
display: block;
padding: 3px 20px;
color: #fff;
border-radius: 10px 0 20px 10px;
background: #000;
}
.button3{
color: #fff;
border: 2px solid #fff;
border-radius: 0;
background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
border-radius: 100vh;
font-family: "Arial", "メイリオ";
/*letter-spacing: 0.1em;*/
padding: 7px 25px 7px 25px;
}
.button3:hover{
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
color: #fff;
-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
font-family: "Arial", "メイリオ";
}
#best::before {
position: absolute;
background: #ff0801;
color: #FFF;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 23px;
height: 23px;
line-height: 22px;
text-align: center;
top: 5px;
font-family: "Font Awesome 5 Free";
content: "\f521";
font-weight: 900;
margin:6px 0px 0px 10px;
}
select {
display: block;
border-left: solid 10px #27acd9;
padding: 0.75rem 1.5rem;
border-color: transparent transparent transparent blue;
font-weight: bold;
box-shadow: 3px 5px 3px -2px #aaaaaa,3px 3px 2px 0px #ffffff inset;
margin-bottom: 10px;
width: 250px;
}
.box2{
position: relative;
line-height: 1.5em;
background: #fff;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
margin: 0 auto;
margin-top: 20px;
border-radius:8px;
counter-increment: count-ex1-5;
content: counter(number);
padding: 10px 10px 10px 30px;
margin:10px 0px 0px 5px;
}
.best2::before {
position: absolute;
background: #ff0801;
color: #FFF;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 23px;
height: 23px;
line-height: 22px;
text-align: center;
top: 5px;
font-family: "Font Awesome 5 Free";
content: "\f521";
font-weight: 900;
margin: 10px 0px 0px 10px;
}
h3{
margin: 3px 0px 0px 10px;
}
@media screen and (max-width: 767px) {
#best{
position: relative;
line-height: 1.5em;
background: #fff;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
margin: 0 auto;
margin-top: 20px;
border-radius:8px;
counter-increment: count-ex1-5;
content: counter(number);
padding: 0px 10px 10px 30px;
margin:0px 0px 0px 5px;
}
#best::marker{
font-weight:bold;
color: #ff0801;
}
#best li{
counter-increment: count-ex1-5;
content: counter(number);
padding: 8px 10px 0px 0px;
margin:8px 0px 0px 8px;
line-height: 2em;
margin: 10px 0px 0px 0px;
}
li::marker{
font-weight:bold;
color: #ff0801;
line-height: 1;
}
select{
width:100%;
}
.button3{
width: 100%;
text-align: center;
font-size: 24px;
}
select.name{
margin-bottom: -20px;
margin-top: -10px;
}
.arrow{
position: relative;
}
.arrow::after {
color: #828282;
position: absolute;
top:18px; /* 矢印の位置 */
right: 25px; /* 矢印の位置 */
width: 13px; /* 矢印の大きさ */
height: 13px; /* 矢印の大きさ */
border-top: 3px solid #58504A; /* 矢印の線 */
border-right: 3px solid #58504A; /* 矢印の線 */
-webkit-transform: rotate(135deg); /* 矢印の傾き */
transform: rotate(135deg); /* 矢印の傾き */
pointer-events: none; /* 矢印部分もクリック可能にする */
content: "";
border-color: #828282;
}
.arrow2{
position: relative;
}
.arrow2::after {
color: #828282;
position: absolute;
top:20px; /* 矢印の位置 */
right: 25px; /* 矢印の位置 */
width: 13px; /* 矢印の大きさ */
height: 13px; /* 矢印の大きさ */
border-top: 3px solid #58504A; /* 矢印の線 */
border-right: 3px solid #58504A; /* 矢印の線 */
-webkit-transform: rotate(135deg); /* 矢印の傾き */
transform: rotate(135deg); /* 矢印の傾き */
pointer-events: none; /* 矢印部分もクリック可能にする */
content: "";
border-color: #828282;
}
.score {
text-align: right;
}
</style>
</head>
<body>
<div id="ranking">
<div class="black">
<h5><span class="span3"><i class="fas fa-crown"></i></span>
<span style="font-size: 24px">ランキング</span></h5>
</div>
<form @submit.prevent="ranking_view">
<div class="arrow">
<select class="name" v-model="selectedEvent">
<option disabled value="">イベント一覧</option>
<option selected value="FC岐阜">with FC岐阜</option>
<!--
<option value="関ケ原2410">関ケ原-2024年10月</option>
<option value="養老2410">養老-2024年10月</option>
<option value="大垣2410">大垣-2024年10月</option>
<option value="各務原2410">各務原-2024年10月</option>
<option value="多治見2410">多治見-2024年10月</option>
<option value="美濃加茂2410">美濃加茂-2024年10月</option>
<option value="下呂2410">下呂-2024年10月</option>
<option value="郡上2410">郡上-2024年10月</option>
<option value="高山2410">高山-2024年10月</option>
<option value="関ケ原2409">関ケ原-2024年9月</option>
<option value="養老2409">養老-2024年9月</option>
<option value="大垣2409">大垣-2024年9月</option>
<option value="各務原2409">各務原-2024年9月</option>
<option value="多治見2409">多治見-2024年9月</option>
<option value="美濃加茂2409">美濃加茂-2024年9月</option>
<option value="下呂2409">下呂-2024年9月</option>
<option value="郡上2409">郡上-2024年9月</option>
<option value="高山2409">高山-2024年9月</option>
-->
<option value="美濃加茂">岐阜ロゲin美濃加茂</option>
<option value="養老ロゲ">養老町</option>
<option value="岐阜市">岐阜市</option>
<option value="大垣２">岐阜ロゲin大垣@イオンモール大垣</option>
<option value="大垣">岐阜ロゲin大垣</option>
<option value="多治見">岐阜ロゲin多治見</option>
<option value="各務原">岐阜ロゲin各務原</option>
<option value="下呂">岐阜ロゲin下呂温泉</option>
<option value="郡上">岐阜ロゲin郡上</option>
<option value="高山">岐阜ロゲin高山</option>
</select>
<div class="arrow2">
<select v-model="selectedClass">
<option selected value="top3">top3</option>
<option value="3時間一般">3時間一般</option>
<option value="3時間ファミリー">3時間ファミリー</option>
<option value="3時間自転車">3時間自転車</option>
<option value="3時間ソロ男子">3時間ソロ男子</option>
<option value="3時間ソロ女子">3時間ソロ女子</option>
<option value="3時間パラロゲ">3時間パラロゲ</option>
<option value="5時間一般">5時間一般</option>
<option value="5時間ファミリー">5時間ファミリー</option>
<option value="5時間自転車">5時間自転車</option>
<option value="5時間ソロ男子">5時間ソロ男子</option>
<option value="5時間ソロ女子">5時間ソロ女子</option>
</div>
</select>
<button class="button3" type="submit">CLICK</button>
</div>
</form>
<ol v-if="top_three_flag == false" >
<div id="best" v-for="team in team_list">
<li>
{{ team.team_name }}({{ team.zekken_number }})<br/><p class="score"><span class="span2">合計得点:{{ team.point }}</span>　<span class="span2">内減点: {{ team.late_point }}</span></p>
</li>
</div>
</ol>
<div v-if="top_three_flag == true">
<div class="box2" v-for="(teams, index) in team_list">
<h3> {{ index }} </h3>
<ol>
<div class="best3" v-for="team in teams">
<span class="span6"><li class="best2"></span>
{{ team.team_name }}({{ team.zekken_number }})<br/><p class="score">合計得点:{{ team.point }} 内減点: {{ team.late_point }}</p>
</li>
</ol>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
axios.defaults.baseURL = 'https://rogaining.sumasen.net/gifuroge';
axios.default.withCridentials = true;
(function() {
'use strict';
var vm = new Vue({
el: '#ranking',
data: {
selectedEvent: "FC岐阜",
selectedClass: "top3",
team_list: [],
top_three_flag: false,
three_pop: [],
interval: 1
},
mounted : function(){
var int = this.interval * 60 * 1000
setInterval(function() {this.ranking_view()}.bind(this), int);
},
methods: {
ranking_view: function(){
if (this.selectedClass == 'top3'){
this.top_three_flag = true
var url = "/all_ranking_top3?event=" + this.selectedEvent
axios
.get(url)
.then(response => ( this.team_list = response.data))}
else {
this.top_three_flag = false
var url = "/get_ranking?class=" + this.selectedClass + '&event=' + this.selectedEvent
axios
.get(url)
.then(response => ( this.team_list = response.data ))}
}
}
});
})();
</script>
</body>
</html>
</html>