Merge pull request #33 from crab85193/dev_crab

電話発信ページの作成（動作確認済）

main_app/call_manager.py

@@ -0,0 +1,17 @@
+import os
+from twilio.rest import Client
+
+class CallManager:
+    def __init__(self):
+        account_sid = os.environ.get("TWILIO_ACCOUNT_SID")
+        auth_token = os.environ.get("TWILIO_AUTH_TOKEN")
+        self.__client = Client(account_sid, auth_token)
+
+    def call(self, message, phone_number):
+        _twiml = f'<Response><Say>{message}</Say></Response>'
+        _from  = os.environ.get("FROM_PHONE_NUMBER")
+        _to    = f"+81{phone_number[1:]}"
+
+        call = self.__client.calls.create(twiml=_twiml, to=_to, from_=_from)
+
+        print(call.sid)

main_app/urls.py

@@ -26,20 +26,24 @@
 from .views.dev.icons import IconsBootstrap, IconsBoxicons, IconsRemix
 from .views.dev.pages import Dashboard, PagesBlank, PagesContact, PagesError404, PagesFAQ, PagesLogin, PagesRegister, UsersProfile
 from .views.dev.tables import TablesData, TablesGeneral
+from .views.reservation import ReservationView, ReservationDoneView
 
 app_name = 'main_app'
 
 urlpatterns = [
-    path("", LoginView.as_view(), name="login"),
-    path("logout/", Logout.as_view(), name="logout"),
+    path(""       , LoginView.as_view(), name="login" ),
+    path("logout/", Logout.as_view()   , name="logout"),
 
-    path("register/", RegisterRequestView.as_view(), name="register_request"),
-    path("register/done/", RegisterDoneView.as_view(), name="register_done"),
-    path('register/check/<uuid:activate_token>/', RegisterCompleteView.as_view(), name='register_complete'),
-    path('register/check/error/<int:error_code>/', RegisterErrorView.as_view(), name='register_error'),
+    path("register/"                             , RegisterRequestView.as_view() , name="register_request" ),
+    path("register/done/"                        , RegisterDoneView.as_view()    , name="register_done"    ),
+    path('register/check/<uuid:activate_token>/' , RegisterCompleteView.as_view(), name='register_complete'),
+    path('register/check/error/<int:error_code>/', RegisterErrorView.as_view()   , name='register_error'   ),
 
     path("top/", TopView.as_view(), name="top"),
 
+    path("reservation/"     , ReservationView.as_view()    , name="reservation"     ),
+    path("reservation/done/", ReservationDoneView.as_view(), name="reservation_done"),
+
     # Developer Contents
     ## Charts
     path("dev/charts/apexcharts/", ChartsApexChartsView.as_view(), name="dev_charts_apexcharts"),

main_app/views/reservation.py

@@ -0,0 +1,20 @@
+from django.views.generic import TemplateView
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+from ..call_manager import CallManager
+
+class ReservationView(LoginRequiredMixin, TemplateView):
+    template_name = "main_app/reservation/reservation.html"
+
+    def post(self, request):
+        call_manager = CallManager()
+        call_manager.call("こんにちは。私は予約がしたい", request.POST['tel'])
+        print(f"電話番号 : {request.POST['tel']}")
+
+        return HttpResponseRedirect(reverse('main_app:reservation_done')) 
+
+
+class ReservationDoneView(LoginRequiredMixin, TemplateView):
+    template_name = "main_app/reservation/reservation-done.html"
+

requirements.txt

@@ -1,3 +1,4 @@
 Django==4.2.7
 mysqlclient==2.1.1
 gunicorn>=19.9.0,<20.0
+twilio==8.10.1

templates/main_app/base.html

@@ -278,11 +278,18 @@ <h6>{{ request.user.username }}</h6>
       <ul class="sidebar-nav" id="sidebar-nav">
 
         <li class="nav-item">
-          <a class="nav-link " href="{% url 'main_app:top' %}">
+          <a class="nav-link {% if 'top' not in request.path %}collapsed{% endif %}" href="{% url 'main_app:top' %}">
             <i class="bi bi-grid"></i>
-            <span>Dashboard</span>
+            <span>トップ</span>
           </a>
         </li><!-- End Dashboard Nav -->
+
+        <li class="nav-item">
+          <a class="nav-link {% if 'reservation' not in request.path %}collapsed{% endif %}" href="{% url 'main_app:reservation' %}">
+            <i class="bi bi-grid"></i>
+            <span>自動電話予約</span>
+          </a>
+        </li>
 
         {% if request.user.is_superuser %}
 

templates/main_app/index.html

@@ -1,4 +1,3 @@
-
 {% extends 'main_app/base.html' %}
 {% load static %}
 
@@ -11,8 +10,7 @@
   <h1>Dashboard</h1>
   <nav>
     <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="index.html">Home</a></li>
-      <li class="breadcrumb-item active">Dashboard</li>
+      <li class="breadcrumb-item"><a href="index.html">トップ</a></li>
     </ol>
   </nav>
 </div><!-- End Page Title -->

templates/main_app/reservation/reservation-done.html

@@ -0,0 +1,63 @@
+{% extends 'main_app/base.html' %}
+{% load static %}
+
+{% block title %}
+Reservation Done
+{% endblock%}
+
+{% block main %}
+<div class="pagetitle">
+  <h1>Form Elements</h1>
+  <nav>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="index.html">Home</a></li>
+      <li class="breadcrumb-item">Forms</li>
+      <li class="breadcrumb-item active">Elements</li>
+    </ol>
+  </nav>
+</div><!-- End Page Title -->
+
+<section class="section min-vh-100 d-flex flex-column align-items-center py-4">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8 col-md-10 flex-column align-items-center">
+
+        <div class="card mb-3">
+
+          <div class="card-body">
+
+            <div class="pt-4 pb-2">
+              <h5 class="card-title text-center pb-0 fs-4">予約が完了しました</h5>
+              <p class="text-center small">お店の電話番号を入力してください</p>
+            </div>
+
+            <div class="row g-3 needs-validation justify-content-center">
+              <div class="col-8 d-flex flex-column align-items-center py-2">
+                <button class="btn btn-primary w-100" type="submit">予約状況を見る</button>
+              </div>
+            </div>
+
+            {% comment %} <form class="row g-3 needs-validation justify-content-center" method="POST">
+              {% csrf_token %}
+              <div class="col-12">
+                <label for="id_tel" class="form-label">電話番号</label>
+                <div class="input-group has-validation">
+                  <input type="tel" name="tel" pattern="[\d]*" maxlength="11" class="form-control" id="tel" required>
+                  <div class="invalid-feedback">電話番号を入力してください</div>
+                </div>
+              </div>
+
+              <div class="col-8 d-flex flex-column align-items-center py-2">
+                <button class="btn btn-primary w-100" type="submit">予約する</button>
+              </div>
+            </form> {% endcomment %}
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</section>
+{% endblock %}

templates/main_app/reservation/reservation.html

@@ -0,0 +1,56 @@
+{% extends 'main_app/base.html' %}
+{% load static %}
+
+{% block title %}
+Reservation
+{% endblock%}
+
+{% block main %}
+<div class="pagetitle">
+  <h1>自動電話予約</h1>
+  <nav>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="{% url 'main_app:top' %}">トップ</a></li>
+      <li class="breadcrumb-item">自動電話予約</li>
+    </ol>
+  </nav>
+</div><!-- End Page Title -->
+
+<section class="section min-vh-100 d-flex flex-column align-items-center py-4">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8 col-md-10 flex-column align-items-center">
+
+        <div class="card mb-3">
+
+          <div class="card-body">
+
+            <div class="pt-4 pb-2">
+              <h5 class="card-title text-center pb-0 fs-4">自動電話予約</h5>
+              <p class="text-center small">お店の電話番号を入力してください</p>
+            </div>
+
+            <form class="row g-3 needs-validation justify-content-center" method="POST">
+              {% csrf_token %}
+              <div class="col-11 px-2">
+                <label for="id_tel" class="form-label">電話番号</label>
+                <div class="input-group has-validation">
+                  <input type="tel" name="tel" pattern="[\d]*" maxlength="11" minlength="7" class="form-control" id="tel" required>
+                  <div class="invalid-feedback">電話番号を入力してください</div>
+                </div>
+              </div>
+
+              <div class="col-8 d-flex flex-column align-items-center py-2">
+                <button class="btn btn-primary w-100" type="submit">予約する</button>
+              </div>
+            </form>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</section>
+{% endblock %}