google map apiで、現在の位置を取得できるようにした。
@@ -34,34 +34,32 @@ | ||
34 | 34 | </head> |
35 | 35 | <body> |
36 | 36 | <wicket:extend> |
37 | - <div class="section center half left" style="display: none;"> | |
37 | + <div class="section center half left" > | |
38 | 38 | <h3>打刻</h3> |
39 | 39 | <form wicket:id="timeRecorder"> |
40 | 40 | |
41 | 41 | <div> |
42 | - <span wicket:id="clock" /> | |
42 | + <span wicket:id="clock" class="timecard main clock"/> | |
43 | + <input type="button" value="打刻" class="timecard main button" wicket:id="timeRecordButton"/> | |
43 | 44 | </div> |
44 | - <div style="visible: hidden;"> | |
45 | - <input type="button" value="打刻" /> | |
46 | - </div> | |
47 | - <div class="locationpicker" style="visible:hidden;"> | |
45 | + <div class="locationpicker" > | |
48 | 46 | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCY2EpuxW8aKPvtDVWt9wmqBPKRHRoPwTQ&callback=initMap" |
49 | 47 | async defer> |
50 | 48 | </script> |
51 | 49 | <label class="localtionpicker title">現在位置</label> |
52 | - <div class="localtionpicker map" name="map" style="width:40vw; height:25vh;"></div> | |
50 | + <div class="localtionpicker map" name="map" style=""></div> | |
53 | 51 | <div class="localtionpicker coordinates" name="localtionpicker.coordinates"> |
54 | 52 | <div> |
55 | 53 | <label class="locatitonpicker coordinates label">緯度</label> |
56 | - <label class="locationpicker corrdinaltes parameter" name="latitude">[緯度]</label> | |
54 | + <input type="text" class="locationpicker corrdinaltes parameter" name="latitude" wicket:id="latitude" value="緯度" /> | |
57 | 55 | </div> |
58 | 56 | <div> |
59 | 57 | <label class="locatitonpicker coordinates label">経度</label> |
60 | - <label class="locationpicker corrdinaltes parameter" name="longitude">[経度]</label> | |
58 | + <input type="text" class="locationpicker corrdinaltes parameter" name="longitude" wicket:id="longitude" value="経度"/> | |
61 | 59 | </div> |
62 | 60 | <div> |
63 | 61 | <label class="locatitonpicker coordinates label">誤差</label> |
64 | - <label class="locationpicker corrdinaltes parameter" name="accuracy">[誤差]</label> | |
62 | + <input type="text" class="locationpicker corrdinaltes parameter" name="accuracy" wicket:id="accuracy" value="誤差" /> | |
65 | 63 | </div> |
66 | 64 | </div> |
67 | 65 | <input class="localtionpicker result" type="hidden" name="map_result" /> |
@@ -79,11 +77,11 @@ | ||
79 | 77 | function successCallback(position) { |
80 | 78 | currentPosition = position; |
81 | 79 | //wicketとの干渉を避けるため、getElementsByNameで操作 |
82 | - document.getElementsByName('latitude')[0].textContent = | |
80 | + document.getElementsByName('latitude')[0].value = | |
83 | 81 | position.coords.latitude; |
84 | - document.getElementsByName('longitude')[0].textContent = | |
82 | + document.getElementsByName('longitude')[0].value = | |
85 | 83 | position.coords.longitude; |
86 | - document.getElementsByName('accuracy')[0].textContent = | |
84 | + document.getElementsByName('accuracy')[0].value = | |
87 | 85 | position.coords.accuracy; |
88 | 86 | |
89 | 87 | var position = new google.maps.LatLng( |
@@ -118,6 +116,15 @@ | ||
118 | 116 | |
119 | 117 | new google.maps.Circle(circleOptions); |
120 | 118 | |
119 | + var wcall = wicketAjaxGet('$url$' + '$args$', | |
120 | + function () { | |
121 | + document.write("SUCCESS"); | |
122 | + }, | |
123 | + function () { | |
124 | + document.write("ERROR"); | |
125 | + } | |
126 | + ); | |
127 | + | |
121 | 128 | } |
122 | 129 | |
123 | 130 | /***** 位置情報が取得できない場合 *****/ |
@@ -34,8 +34,10 @@ | ||
34 | 34 | import org.apache.wicket.datetime.markup.html.basic.DateLabel; |
35 | 35 | import org.apache.wicket.extensions.markup.html.repeater.data.table.IColumn; |
36 | 36 | import org.apache.wicket.markup.html.form.Form; |
37 | +import org.apache.wicket.markup.html.form.TextField; | |
37 | 38 | import org.apache.wicket.model.AbstractReadOnlyModel; |
38 | 39 | import org.apache.wicket.model.IModel; |
40 | +import org.apache.wicket.model.Model; | |
39 | 41 | import org.apache.wicket.util.time.Duration; |
40 | 42 | import org.clearfy.ClearfyPage; |
41 | 43 | import org.clearfy.ClearfySection; |
@@ -53,6 +55,16 @@ | ||
53 | 55 | |
54 | 56 | private Form timeRecorder; |
55 | 57 | |
58 | + private DateLabel currentTime; | |
59 | + | |
60 | + private AjaxButton timeRecordButton; | |
61 | + | |
62 | + private TextField<String> latitude; | |
63 | + | |
64 | + private TextField<String> longitude; | |
65 | + | |
66 | + private TextField<String> accuracy; | |
67 | + | |
56 | 68 | private AjaxButton update1; |
57 | 69 | |
58 | 70 | private AjaxButton update2; |
@@ -74,7 +86,7 @@ | ||
74 | 86 | return new Date(); |
75 | 87 | } |
76 | 88 | }; |
77 | - this.timeRecorder.add(new DateLabel("clock", clockModel, | |
89 | + this.currentTime = new DateLabel("clock", clockModel, | |
78 | 90 | new PatternDateConverter("yyyy/MM/dd HH:mm:ss", true)) { |
79 | 91 | @Override |
80 | 92 | protected void onInitialize() { |
@@ -81,9 +93,36 @@ | ||
81 | 93 | super.onInitialize(); |
82 | 94 | add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(1))); |
83 | 95 | } |
84 | - }); | |
96 | + | |
97 | + }; | |
98 | + this.timeRecorder.add(this.currentTime); | |
85 | 99 | this.add(this.timeRecorder); |
86 | 100 | |
101 | + this.latitude = new TextField<>("latitude", Model.of("LATITUDE")); | |
102 | + this.timeRecorder.add(this.latitude); | |
103 | + | |
104 | + this.longitude = new TextField<>("longitude", Model.of("LONGITUDE")); | |
105 | + this.timeRecorder.add(this.longitude); | |
106 | + | |
107 | + this.accuracy = new TextField<>("accuracy", Model.of("ACCURACY")); | |
108 | + this.timeRecorder.add(this.accuracy); | |
109 | + | |
110 | + this.timeRecordButton = new AjaxButton("timeRecordButton", Model.of(this | |
111 | + .getSentence("打刻"))) { | |
112 | + @Override | |
113 | + public void onSubmit(AjaxRequestTarget target, Form form) { | |
114 | + String lat = latitude.getModelObject(); | |
115 | + String lon = longitude.getModelObject(); | |
116 | + String acc = accuracy.getModelObject(); | |
117 | + String now = currentTime.getDefaultModelObjectAsString(); | |
118 | + System.out.println( | |
119 | + String.format("%s %s %s %s", lat, lon, acc, now) | |
120 | + ); | |
121 | + } | |
122 | + | |
123 | + }; | |
124 | + this.timeRecorder.add(this.timeRecordButton); | |
125 | + | |
87 | 126 | this.recordViewForm = new Form("recordViewForm"); |
88 | 127 | |
89 | 128 | this.update1 = new AjaxButton("update1") { |
@@ -144,8 +183,9 @@ | ||
144 | 183 | this.tableView.clear(); |
145 | 184 | |
146 | 185 | LocalDateTime currentTime = LocalDateTime.now(); |
147 | - LocalDateTime todayStart = currentTime.withHour(0).withMinute(0). | |
148 | - withSecond(0); | |
186 | + LocalDateTime todayStart = currentTime.withHour(0) | |
187 | + .withMinute(0) | |
188 | + .withSecond(0); | |
149 | 189 | String szCurrentTime = todayStart.format(DateTimeFormatter.ofPattern( |
150 | 190 | "yyyy-MM-dd")); |
151 | 191 |
@@ -600,4 +600,21 @@ | ||
600 | 600 | #wicketDebugLink{ |
601 | 601 | display: none; |
602 | 602 | } |
603 | +} | |
604 | + | |
605 | +.localtionpicker.map{ | |
606 | + height: 40vh; | |
607 | + width: 100%; | |
608 | +} | |
609 | + | |
610 | +.timecard.main.clock{ | |
611 | + display: inline; | |
612 | + font-size: calc(3vh); | |
613 | + text-align: center; | |
614 | +} | |
615 | + | |
616 | +.timecard.main.button{ | |
617 | + display: inline; | |
618 | + font-size: calc(3vh); | |
619 | + padding: 5px; | |
603 | 620 | } |
\ No newline at end of file |
@@ -38,6 +38,11 @@ | ||
38 | 38 | color: #000099; |
39 | 39 | } |
40 | 40 | |
41 | +input[disabled=disabled]{ | |
42 | + border-style: none; | |
43 | + background-color: unset; | |
44 | +} | |
45 | + | |
41 | 46 | .tabpane { |
42 | 47 | display: inline; |
43 | 48 | margin-right: 1px; |