Coder Social home page Coder Social logo

pomo's People

Contributors

yukimarupie avatar

Watchers

avatar

pomo's Issues

is_doneの処理を持たせたい。

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()

Herokuのデプロイに失敗。Failed to install gems via Bundlerが出る時の対処法 

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

deviceの導入ができない

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.