Skip to content

Commit

Permalink
add link to detail page. close #2
Browse files Browse the repository at this point in the history
  • Loading branch information
new-village committed Oct 27, 2019
1 parent 28b713b commit ebfae02
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 22 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ This is the KEIBA (horse racing) data crowler.
* Python 3.7.4

## Reference
[Responder](https://responder.readthedocs.io/en/latest/)
[Responderを使ってDjangoチュートリアルをやってみた- RIGHTCODE](https://rightcode.co.jp/blog/information-technology/responder-django-tutorial-0)
[Pandasのjson_normalizeを詳しく調べてみる - Qiita](https://qiita.com/simonritchie/items/7e50b47ccadbbb0fba57)
[BootstrapVue](https://bootstrap-vue.js.org/)
[Responder](https://responder.readthedocs.io/en/latest/)
[Responderを使ってDjangoチュートリアルをやってみた- RIGHTCODE](https://rightcode.co.jp/blog/information-technology/responder-django-tutorial-0)
[Pandasのjson_normalizeを詳しく調べてみる - Qiita](https://qiita.com/simonritchie/items/7e50b47ccadbbb0fba57)
[Vuetify](https://vuetifyjs.com/ja/)
[Material Design Icon](https://materialdesignicons.com/)
6 changes: 6 additions & 0 deletions app.py
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ def on_get(self, req, resp):
resp.content = api.template("index.html")


@api.route('/races/{rid}')
class ViewRaces:
def on_get(self, req, resp, rid):
resp.content = api.template("races.html", rid=rid)


@api.route('/api/races')
class RaceListData:
def on_get(self, req, resp):
Expand Down
4 changes: 3 additions & 1 deletion crawler/race.py
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ def recent():
r = db.races.find(where).sort("date", pymongo.DESCENDING)[1]["date"]

# Get next race list
select = {"place": 1, "round": 1, "title": 1,
"date": 1, "track": 1, "distance": 1}
where = {"date": date_condition(r.year, r.month, r.day)}
rec = db.races.find(where).sort("_id", pymongo.ASCENDING)
rec = db.races.find(where, select).sort("_id", pymongo.ASCENDING)
return to_dict(rec)


Expand Down
56 changes: 39 additions & 17 deletions templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,26 @@
<v-icon dark @click="snackbar = false">mdi-close-box</v-icon>
</v-snackbar>
</v-card-title>
<template>
<v-data-table :headers="headers" :items="results" :items-per-page="5">
</v-data-table>
</template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">場所</th>
<th class="text-left">ラウンド</th>
<th class="text-left">レース名</th>
<th class="text-left">コース</th>
</tr>
</thead>
<tbody>
<tr v-for="rec in results" :key="rec._id" @click="showAlert(rec._id)">
<td>[[ rec.place ]]</td>
<td>[[ rec.round ]]</td>
<td>[[ rec.title ]]</td>
<td>[[ rec.track ]]</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-col>
<v-col cols="12" sm="3">
Expand All @@ -76,38 +92,44 @@
<script>
new Vue({
el: '#index',
delimiters: ["[[", "]]"],
vuetify: new Vuetify(),
data: {
drawer: false,
race_id: "201908040712",
headers: [
{ text: "場所", value: "place" },
{ text: "ラウンド", value: 'round' },
{ text: "レース名", value: "title" },
{ text: "開催日", value: 'date' }
],
results: [],
snackbar: false,
text: 'My timeout is set to 2000.',
timeout: 2000,
},
mounted: async function () {
await axios.get("api/races")
.then(response => { this.results = response.data })
mounted: function () {
axios.get("/api/races").then(response => {
json = response.data;
for (var i in json) {
json[i].round = json[i].round + "R";
json[i]._id = "/races/" + json[i]._id;
json[i].track = json[i].track + json[i].distance + "m";
};
this.results = json
})
},
methods: {
collect: async function () {
await axios.post("api/races/" + this.race_id);
await axios.post("/api/races/" + this.race_id);
await this.get_race();
},
get_race: async function () {
await axios.get("api/races/" + this.race_id)
await axios.get("/api/races/" + this.race_id)
.then(response => { this.results = response.data })
},
recent: async function () {
this.snackbar = true;
await axios.post("api/races");
await this.get_race();
await axios.post("/api/races");
await axios.get("/api/races")
.then(response => { this.results = response.data });
},
showAlert: function (rid) {
window.location.href = rid;
}
}
})
Expand Down
131 changes: 131 additions & 0 deletions templates/races.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
{% extends "layout.html" %}
{% block title %}Home{% endblock %}
{% block content %}

<v-app id="index">
<!-- NAVIGATION DRAWER -->
<v-navigation-drawer app v-model="drawer" color="grey lighten-2" clipped right>
<v-list>
<v-list-item-group color="primary">
<v-list-item href="/">
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-divider></v-divider>
<v-subheader>APPLICATIONS</v-subheader>
<v-list-item href="http://localhost:8888" target="_blank">
<v-list-item-icon>
<v-icon>mdi-language-python</v-icon>
</v-list-item-icon>
<v-list-item-title>JupyterLab</v-list-item-title>
</v-list-item>
<v-list-item href="http://localhost:8081" target="_blank">
<v-list-item-icon>
<v-icon>mdi-database-search</v-icon>
</v-list-item-icon>
<v-list-item-title>Mongo Express</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>

<!-- HEADER -->
<v-app-bar app clipped-left color="deep-orange darken-4" dark dense clipped-right>
<v-toolbar-title href="/" class="title font-weight-black">UMA Prediction</v-toolbar-title>
<v-spacer></v-spacer>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</v-app-bar>

<v-content>
<v-container>
<v-row justify="center">
<v-col cols="12" sm="9">
<v-card>
<v-card-title class="font-weight-bold">
最近のレース
<v-spacer></v-spacer>
<v-icon @click="recent">mdi-refresh</v-icon>
<v-snackbar v-model="snackbar" :timeout="timeout">
タスクを実行しました
<v-icon dark @click="snackbar = false">mdi-close-box</v-icon>
</v-snackbar>
</v-card-title>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">場所</th>
<th class="text-left">ラウンド</th>
<th class="text-left">レース名</th>
<th class="text-left">コース</th>
</tr>
</thead>
<tbody>
<tr v-for="rec in results" :key="rec._id" @click="showAlert(rec._id)">
<td>[[ rec.place ]]</td>
<td>[[ rec.round ]]</td>
<td>[[ rec.title ]]</td>
<td>[[ rec.track ]]</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-col>
<v-col cols="12" sm="3">
<v-card>
<v-card-title class="font-weight-bold">IDを指定して実行</v-card-title>
<v-card-actions>
<v-text-field v-model="race_id" :append-outer-icon="'mdi-send'" filled label="Race ID"
type="text" @click:append-outer="collect"></v-text-field>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>


<script>
new Vue({
el: '#index',
delimiters: ["[[", "]]"],
vuetify: new Vuetify(),
data: {
drawer: false,
race_id: "{{ rid }}",
results: [],
snackbar: false,
text: 'My timeout is set to 2000.',
timeout: 2000,
},
mounted: function () {
axios.get("/api/races/" + this.race_id).then(response => {
this.results = response.data;
})
},
methods: {
collect: async function () {
await axios.post("/api/races/" + this.race_id);
await this.get_race();
},
get_race: async function () {
await axios.get("/api/races/" + this.race_id)
.then(response => { this.results = response.data })
},
recent: async function () {
this.snackbar = true;
await axios.post("/api/races");
await axios.get("/api/races")
.then(response => { this.results = response.data });
},
showAlert: function (rid) {
window.location.href = rid;
}
}
})
</script>
{% endblock %}

0 comments on commit ebfae02

Please sign in to comment.