[WIP] Team3 ポジネガ判定アプリ

team3/.gitignore

@@ -0,0 +1,6 @@
+vendor/
+server
+tmp/
+
+.idea
+dev.db

team3/Gopkg.toml

@@ -0,0 +1,8 @@
+
+[[dependencies]]
+  name = "github.com/gin-gonic/gin"
+  version = "1.1.4"
+
+[[dependencies]]
+  name = "github.com/mattn/go-sqlite3"
+  version = "1.2.0"

team3/Makefile

@@ -0,0 +1,98 @@
+.DEFAULT_GOAL := help
+
+GOOS = darwin
+GOARCH = amd64
+VERSION = $(shell git rev-parse HEAD)
+ENV = test
+host=localhost:8080
+
+server:
+	go run server.go
+
+## Live reload
+watch:
+	fresh
+
+## Install dependency tools
+deps:
+	which make2help || go get -u github.com/Songmu/make2help/cmd/make2help
+	which dep || go get -u github.com/golang/dep/...
+	which sql-migrate || go get -u github.com/rubenv/sql-migrate/...
+	which fresh || go get -u github.com/pilu/fresh
+	which golint || go get -u github.com/golang/lint/golint
+
+## Install dependency packages, cache compiled packages
+install: deps env/env.go dev.db 
+	dep ensure
+	go install
+
+## Build app
+build:
+	GOOS=$(GOOS) GOARCH=$(GOARCH) go build -ldflags "-X=main.version=$(VERSION)" server.go
+
+## Check code format
+check: fmt vet lint
+
+fmt:
+	go fmt $$(go list ./... | grep -v vendor)
+
+vet:
+	go vet $$(go list ./... | grep -v vendor)
+
+lint:
+	golint $$(go list ./... | grep -v vendor)
+
+clean: clean_vendor
+
+## Clean vendor directory
+clean_vendor:
+	rm -rf vendor/
+
+## Show help
+help:
+	@make2help -all
+
+## Migrate db schema
+migrate_up:
+	sql-migrate up -env=$(ENV)
+
+## Migrate db schema(dryrun)
+migrate_dryrun:
+	sql-migrate up -env=$(ENV) -dryrun
+
+## Show migration status
+migrate_status:
+	sql-migrate status -env=$(ENV)
+
+curl_messages_ping:
+	curl -i $(host)/api/ping
+
+curl_messages_get_all:
+	curl -i $(host)/api/messages
+
+curl_messages_get:
+	curl -i $(host)/api/messages/$(id)
+
+curl_message_create:
+	curl -i -X POST $(host)/api/messages -d '{"body": "$(body)"}'
+
+curl_message_put:
+	curl -i -X PUT $(host)/api/messages/$(id) -d '{"body": "$(body)"}'
+
+curl_message_delete:
+	curl -i -X DELETE $(host)/api/messages/$(id) -d '{"body": "$(body)"}'
+
+dev.db:
+	$(MAKE) db_init
+
+## Initialize database
+db_init:
+	cp -i _etc/seed.db dev.db
+
+## Initialize environment configuration file
+env/env.go:
+	cp env/env.go.tmpl env/env.go
+
+## Build godoc server(http://localhost:6060)
+godoc_server:
+	godoc -http=:6060

team3/assets/css/app.css

@@ -0,0 +1,14 @@
+.message {
+  padding: 10px 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.message-body .action-button {
+  margin: 0px 3px;
+  color: #c1c1c1;
+  cursor: pointer;
+}
+
+.message-body .action-button:hover {
+  color: #444444;
+}

team3/assets/js/app.js

@@ -0,0 +1,113 @@
+(function() {
+  'use strict';
+  const Message = function() {
+    this.body = '';
+  };
+
+  Vue.component('message', {
+    // 1-1. ユーザー名を表示しよう
+    props: ['id', 'body', 'removeMessage', 'updateMessage'],
+    data() {
+      return {
+        editing: false,
+        editedBody: null,
+        displayedBody: this.body,
+      }
+    },
+    // 1-1. ユーザー名を表示しよう
+    template: `
+    <div class="message">
+      <div v-if="editing">
+        <div class="row">
+          <textarea v-model="editedBody" class="u-full-width"></textarea>
+          <button v-on:click="doneEdit">Save</button>
+          <button v-on:click="cancelEdit">Cancel</button>
+        </div>
+      </div>
+      <div class="message-body" v-else>
+        <span>{{ displayedBody }}</span>
+        <span class="action-button u-pull-right" v-on:click="edit">&#9998;</span>
+        <span class="action-button u-pull-right" v-on:click="remove">&#10007;</span>
+      </div>
+    </div>
+  `,
+    methods: {
+      remove() {
+        this.removeMessage(this.id)
+          .then(() => {
+            console.log('Deleting message')
+          })
+      },
+      edit() {
+        this.editing = true
+        this.editedBody = this.displayedBody
+      },
+      cancelEdit() {
+        this.editing = false
+        this.editedBody = null
+      },
+      doneEdit() {
+        this.updateMessage({id: this.id, body: this.editedBody})
+          .then(data => {
+            console.log('Updating message')
+            this.cancelEdit()
+          })
+      }
+    }
+  });
+
+  const app = new Vue({
+    el: '#app',
+    data: {
+      messages: [],
+      newMessage: new Message()
+    },
+    created() {
+      this.getMessages();
+    },
+    methods: {
+      getMessages() {
+        fetch('/api/messages').then(response => response.json()).then(data => {
+          this.messages = data.result;
+        });
+      },
+      sendMessage() {
+        const message = this.newMessage;
+        fetch('/api/messages', {
+          method: 'POST',
+          body: JSON.stringify(message)
+        })
+          .then(response => response.json())
+          .then(response => {
+            if (response.error) {
+              alert(response.error.message);
+              return;
+            }
+            this.messages.push(response.result);
+            this.clearMessage();
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      },
+      removeMessage(id) {
+        return fetch(`/api/messages/${id}`, {
+          method: 'DELETE'
+        })
+        .then(response => response.json())
+      },
+      updateMessage(message) {
+        return fetch(`/api/messages/${message.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(message),
+        })
+        .then(response => response.json())
+      },
+      clearMessage() {
+        this.newMessage = new Message();
+      }
+	  // 1-3. メッセージを編集しよう
+      // ...
+    }
+  });
+})();