うつ病記録アプリを作ってみる【4回目】

#うつ病 #鬱病 #HTML #javascript #WEBアプリ #うつ病記録アプリ

久々の投稿です

さぼってましたww

前回はこちらから

時間や日にちの枠の描画まで作成できました

今回はまず日にちを描画させます

日にちを描画させる関数です

    //*****日にち描画*****
    var drawDay = function(text_obj){
        //*** 引数 ***
        // text_obj = {
        //     y:表示位置,
        //     date:日にち,
        //     day:曜日
        // }

        var svg = document.querySelector('svg');
        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x',200);
        text.setAttribute('y',text_obj.y);
        text.setAttribute('dx',"-20");
        text.setAttribute('style',"text-anchor:end;");
        text.setAttribute('dominant-baseline',"central");
        text.innerHTML = text_obj.date + "(" + text_obj.day + ")"

        svg.appendChild(text);
    }

日にちを1か月分描画するための関数

曜日は後ほど、、、とりあえず全部月曜日で、、、

    //*****日付*****
    var drowDays = function(){
        for(let i=0; i < stepNumHorizontal; i++){
            // ????? 曜日算出
            drawDay({y:startYPos + (0.5+i)*stepHorizontal,date:(i+1),day:"月"})
        }
    }

日にちを描画すると、こんな感じ

時刻を描画する関数

同じように時刻を表示させます

    // *****時刻描画*****
    var drawHour = function(text_obj){
        //*** 引数 ***
        // text_obj = {
        //     x:表示位置,
        //     hour:時刻
        // }
        var svg = document.querySelector('svg');
        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x',text_obj.x);
        text.setAttribute('y',startYPos-5);
        text.setAttribute('style',"text-anchor:middle;");
        // text.setAttribute('dominant-baseline',"central");
        text.innerHTML = text_obj.hour

        svg.appendChild(text);

    }   

時刻を1日分表示させる関数

    //*****時刻*****
    var drowHours = function(){
        for(let i = 0; i < (stepNumVertical*0.5 + 1); i++){
            var nowXPos = statDayXPos + 2*i*stepVertical
            var hour
            if(stepNumVertical * 0.5 <= i){
                hour = 12
            }else{
                hour = (i*2) % 12
            }
            drawHour({x:nowXPos,hour:hour});
        }
    }

時刻を描画した結果

イメージ通り描画できてます

年、月を選択する用を作ります

htmlで記述します。とりあえず、まずは記述できればいい感じで。

        <!-- 追加 -->
        <div class="term_area">
            <select name="year">
                <option value="2023">2023</option>
                <option value="2022">2022</option>
            </select>

            <select name="month">
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
        </div>

cssは以下の感じで、svg上に重なるようにします

    main{
        position: relative;
    }

    .term_area{
        position: absolute;
        top: 0;
        left: 200px;
    }

svgがbody要素の中心に来るようにcssを調整します

    body{
        /* background: #CCC; */
        max-width: 1024px;
        width: 100%;
        margin: 0 auto;
    }

    main{
        position: relative;
        
        /* 追加 */
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background: #eee;
    }

次回クリックの処理を追加していきます