MediTime_front/image.html at main · ken7python/MediTime_front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>薬の写真</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/index.css">
        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
        <script src="js/config.js"></script>
        <script src="js/vue.min.js"></script>
        <link rel="stylesheet" href="css/image.css">
    </head>
    <body>
        <header>
            <div id="header">
                <h1>薬の写真</h1>
            </div>
        </header>
        <div id="app" class="content">
                <div v-if="viewPhotoRadio" id="viewPhotoRadio">
                    <input type="radio" id="viewPhoto" name="photoOption" value="view" onclick="view()">
                    <label for="viewPhoto">写真を見る</label><br>
                    <br>
                </div>

                <div v-if="registerPhotoRadio" id="registerPhotoRadio" onclick="register()">
                    <input type="radio" id="registerPhoto" name="photoOption" value="register">
                    <label for="registerPhoto">写真を登録する</label><br>
                    <br>
                </div>

                <div v-if="viewPhotoDiv" id="viewPhotoDiv">
                    <input type="radio" id="view_morning" name="timeOption" value="view_morning" onclick="showImage('朝')">
                    <label for="view_morning">朝</label><br>

                    <input type="radio" id="view_afternoon" name="timeOption" value="view_afternoon" onclick="showImage('昼')">
                    <label for="view_afternoon">昼</label><br>

                    <input type="radio" id="view_evening" name="timeOption" value="view_evening" onclick="showImage('夜')">
                    <label for="view_evening">夜</label><br>

                    <input type="radio" id="view_night" name="timeOption" value="view_night" onclick="showImage('寝る前')">
                    <label for="view_night">寝る前</label><br>

                    <image v-if="showingImage != null" :src="showingImage" alt="Image Preview" style="width: 100%; height: auto;">
                    <button v-if="showingImage != null" onclick="deleteImage()">削除</button>
                    <div id="showingTextDiv" v-if="showingText != null">
                        <p v-if="showingText != null">{{ showingText }}</p>
                    </div>
                </div>

                <div v-if="registerPhotoDiv" id="registerPhotoDiv">
                    <input type="radio" id="register_morning" name="timeOption" value="register_morning" onclick="shoot('朝');">
                    <label for="register_morning">朝</label><br>

                    <input type="radio" id="register_afternoon" name="timeOption" value="register_afternoon" onclick="shoot('昼');">
                    <label for="register_afternoon">昼</label><br>

                    <input type="radio" id="register_evening" name="timeOption" value="register_evening" onclick="shoot('夜');">
                    <label for="register_evening">夜</label><br>

                    <input type="radio" id="register_night" name="timeOption" value="register_night" onclick="shoot('寝る前');">
                    <label for="register_night">寝る前</label><br>
                </div>
            <div v-if="uploadDiv" id="upload">
                <div id="satuei">
                    <p>{{ time }}の薬の写真を撮影する</p>
                    <div class="deco-file" v-if="imagePreview == null">
                        <label>
                            撮影する
                            <input type="file" accept="image/*" capture="camera" onchange="Preview()">
                        </label>
                        <p class="file-names"></p>
                    </div>
                </div>
                <img v-if="imagePreview != null" id="imagePreview" :src="imagePreview" alt="Image Preview" style="width: 100%; height: auto;">

                <div v-if="imagePreview != null" id="uploadMenu">
                    <button id="uploadButton" onclick="upload()">登録</button>
                    <button id="cancelButton" onclick="cancelUpload()">キャンセル</button>
                </div>
            </div>
        </div>

        <div id="options">
            <a href="index.html">
                <div class="option">
                    ホーム<br>
                    <ion-icon class="option_icon" name="home"></ion-icon>
                </div>
            </a>
            <a href="hukuyouTime.html">
                <div class="option">
                    通知設定<br>
                    <ion-icon class="option_icon" name="settings-outline"></ion-icon>
                </div>
            </a>
            <a href="calender.html">
                <div class="option">
                    服薬履歴<br>
                    <ion-icon class="option_icon" name="calendar-outline"></ion-icon>
                </div>
            </a>
            <a href="visiting_calender.html">
                <div class="option">
                    通院履歴<br>
                    <ion-icon class="option_icon" name="pricetag-outline"></ion-icon>
                </div>
            </a>
            <a href="image.html">
                <div class="option" style="color: black">
                    薬の写真<br>
                    <ion-icon class="option_icon" name="camera"></ion-icon>
                </div>
            </a>
        </div>
    </body>

    <script src="js/image.js"></script>
</html>