yukimarupie / pomo Goto Github PK
View Code? Open in Web Editor NEWポモドーロアプリ
ポモドーロアプリ
doneカラムをboolean型で追加した。
check_boxにcheckが入ったら、ToDoリストの中から削除され、
同ページの完了タスクリストの中にAjaxで即時追加されるようにしたい。
わざわざ「ゲストログイン」ボタンを押さずとも、
初期画面で機能を一発で試せるようにしたい。
最初はcookieによるユーザーの振り分けをしようとしていたが、
調べても調べてもcookieとsessionの違いしか出てこず、あまりネットに情報がなく積んでいた。
(調べ方が悪かったのかも..)
メンターさんに相談した際、
ローカルストレージ というブラウザにデータが保持できる仕組みを教えていただいたので、そちらでの実装を試みた。
ローカルストレージについては以下サイトがわかりやすい。
https://www.granfairs.com/blog/staff/local-storage-01
重要なところだけ抜き出すと、
・cookieと同じくクライアント側(ブラウザ)データを保持できる技術。
・若干セキュリティ面で懸念が出てきたcookieよりも新しい技術で、取り扱えるデータ容量が大きく、JSによる制御が容易にできる。
・ウェブストレージの一種。ウェブストレージには永続的にデータ保存が可能なローカルストレージとブラウザを閉じればデータが消えるセッションストレージがある。
//データの保存
localStorage.setItem('キー', '値');
//データの取得
localStorage.getItem('キー', '値');
//データの削除
localStorage.removeItem('キー');
// 初期化
localStorage.clear()
remote: -----> Build succeeded!
remote: ! This app may not specify any way to start a node process
remote: https://devcenter.heroku.com/articles/nodejs-support#default-web-process-type
remote:
remote: -----> Ruby app detected
remote: -----> Installing bundler 2.2.16
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-3.0.1
remote: -----> Installing dependencies using bundler 2.2.16
remote: Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
remote: Your bundle only supports platforms ["x86_64-darwin-19"] but your local platform
remote: is x86_64-linux. Add the current platform to the lockfile with `bundle lock
remote: --add-platform x86_64-linux` and try again.
remote: Bundler Output: Your bundle only supports platforms ["x86_64-darwin-19"] but your local platform
remote: is x86_64-linux. Add the current platform to the lockfile with `bundle lock
remote: --add-platform x86_64-linux` and try again.
remote:
remote: !
remote: ! Failed to install gems via Bundler.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: 8120b26e39f943df6a28489fdcfbb070c5b82330
remote: !
remote: ! We have detected that you have triggered a build from source code with version 8120b26e39f943df6a28489fdcfbb070c5b82330
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
これが出る。
ToDoリストから完了タスクに移動したものは、完了のチェックマークを押しても「完了しましたか?」のアラート表示が出ないようにしたい。
ToDoリストをAjaxで即時表示・即時削除・完了ボタンのチェックマークをクリックしたら即時に完了リストの中に移動
までは実装できている。
が、完了リストの中に移動したものも、チェックマークをクリックすると完了しましたか?のアラート表示が出てしまう。
「はい」を押すと、一見何も変わらないように見えるが、リロードすると完了済みタスクの順番が変わってしまう。
<%= link_to done_task_path(task),
method: :patch,
data: { confirm: '完了しましたか?', remote: true } do %>
<i class="far fa-check-circle"></i>
<% end %>
document.getElementById('task-<%= @task.id %>').outerHTML = ''
document.querySelector('.js-task__list-done').insertAdjacentHTML('afterbegin', '<%= j(render @task) %>')
resources :tasks do
patch :done, on: :member
#collection: ルーティングにコレクション(/photos/searchのようにidを伴わないパス)を追加するときに使う https://bityl.co/7548
#member: idが伴う時。
end
class TasksController < ApplicationController
before_action :set_task, only: [:destroy, :edit, :update, :done]
def index
@tasks_undone = Task.where(done: false)
#今日の日付より大きいもののみ表示
@tasks_done = Task.where(done: true).where('created_at >= ?', Time.current.beginning_of_day).order(id: "DESC")
# binding.pry
@task = Task.new #remote: trueのために追加
end
def create
@task = Task.new(task_params)
respond_to do |format|
if @task.save!
format.js #create.js.erbが呼び出される。 フロント側の処理。
else
format.js { render :errors }
end
end
end
def new; end
def edit
end
def update
respond_to do |format|
if @task.update!(task_params)
format.json { render :json => @task } #サーバー側の処理
format.js #create.js.erbが呼び出される。 フロント側の処理。
else
format.json { render :new }
format.js { render :errors }
end
end
end
def destroy
@task.destroy!
end
def done
@task.update(done: true) #doneをtrueに。
end
private
def task_params
params.require(:task).permit(:name, :done)
end
def set_task
# binding.pry
@task = Task.find(params[:id])
end
end
Gemfileにgem 'devise', '~> 3.5', '>= 3.5.1'
を追記後、
bundleしたが、以下エラーが出てインストールできなかった
% bundle
Bundler could not find compatible versions for gem "railties":
In Gemfile:
devise (~> 3.5, >= 3.5.1) was resolved to 3.5.10, which depends on
railties (< 5, >= 3.2.6)
rails (~> 6.1.3, >= 6.1.3.1) was resolved to 6.1.3.2, which depends on
railties (= 6.1.3.2)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.